Google+ share with custom text and thumbnail

Question

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)

Solution

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.

Comments

[Martin Matysiak]

By the way, if you want to see a "real life example" of multiple itemscopes and +1 buttons on a website, feel free to look at the source code of my blog: martinmatysiak.de/blog - maybe this helps in getting started more quickly :)

[Garavani]

Sounds great but in my case doesn’t work. I have (and even tested with web tools structured data) good working multiple scopes on my site and share buttons each inside the belonging scopes. Yet, Google always fetches the first one on the upper top of the page for every itemscope share button.