Google+ share with custom text and thumbnail

问题:

While creating sharing links for facebook, you can personalize a sharing link by doing something like :

<a title='Share on Facebook' 
href='http://www.facebook.com/sharer.php?s=100
&p[title]=TITLE_HERE
&p[summary]=TEXT_HERE
&p[url]=URL_HERE
&p[images][0]=URL_TO_IMAGE' target='_blank' >
<img alt="Facebook" src="ICON_URL" />
</a>

Is there a way to do something similar with Google+, instead of having to fill the meta tags in the header (because I need many sharing links in one page)

回答1:

You can use schema.org microdata for that. These are not tags made in the site's head, but instead properties you assign to the specific nodes. Here's an example of how it could work:

Let's say you have a blog with multiple article, each of which should have its own +1 button. In the outermost node of each article (if you're using HTML5 semantics, it'll probably be <article>), you define a new itemscope along with the specific itemtype (in this case "http://schema.org/BlogPosting", see the list of all types).

Next, you annotate the fields that should be included in the share snippet using the itemprop field. For example, if the article has an image, the <img> node could be annotated with itemprop="image" and so on.

Note that these annotations are only valid in the current itemscope. The +1 button has to be placed inside this scope as well, since it looks for the first itemscope that occur above the button in the DOM hierarchy.

The positive side of that is that you can define multiple itemscopes per page, thus easily integrate multiple +1 buttons with different share snippets on it.

More info is also available on the +1 button documentation.