Recently Google announced that the +1 button now lets visitors share your website pages to their Google+ profile. If someone wants to start a conversation about your content, its easy for them to do so, just like Facebook Social Share button.
Just like how Facebook uses OpenGraph Protocol enables you to integrate your Web pages into the social graph. Google is using OpenGraph and schema.org Rich Snippet mark-up to build rich annotations for your pages. The new inline annotations help increase engagement after users see a friends recommendation right on your page. You can use +Snippets to customize the Title, Thumbnail Image and Description that appear when your content is shared.
Customize +Snippet
<!-- Update your html tag to include the itemscope and itemtype attributes -->
<html itemscope itemtype="https://schema.org/Article">
<!-- Add the following three tags inside head -->
<meta itemprop="name" content="Your Page Title/Heading Goes Here">
<meta itemprop="description" content="Your Meta Description Goes Here...">
<meta itemprop="image" content="https://www.example.com/images/cool-image.png">
To add inline annotations, you need to update your +1 button code. Visit the configuration tool, select inline from the Annotation menu, and grab a new snippet of code. Both sharing from +1 and inline annotations are rolling out fully over the next few days.
Customize your +1 button
Copy and paste the following code into your site:
<!-- Place this tag where you want the +1 button to render -->
<g:plusone annotation="inline"></g:plusone>
<!-- Place this render call where appropriate -->
<script type="text/javascript">
(function() {
var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
po.src = 'https://apis.google.com/js/plusone.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
})();
</script>
After +1'ing a page, the user is given the option to share the page to Google+ via a displayed Share bubble. This share bubble (along with the resulting Google+ activity post) includes a preview, or +Snippet, that contains the page title, a brief description of the page, and a thumbnail image.
In case if you cant add the OpenGraph and schema.org Rich Snippet Google is using Meta "title" and "description" tags. If the page's element contains and tags, the +Snippet will use their content attributes for the title and description, respectively. For the thumbnail image, the sharebox will attempt to find a suitable image on the page.
Note: The logic that fetches the +Snippet data respects cache-control directives, so changes to your page may not immediately be reflected in the +Snippet.
About the Author: Joydeep Deb
13 Comments
Comments are closed.
Hi,
how would you implement this using span tags in the body rather than meta tags in the header to customize the snippet.
Hi Ari,
You can use span/div/p tags to implement this
//Update your html tag to include the itemscope and itemtype attributes
<html itemscope itemtype=”http://schema.org/”>
//Your body content
<!– Add the following three tags to your body –>
<span itemprop=”name”>Title of your content</span>
<span itemprop=”description”>This would be a description of the content your users are sharing</span>
<img itemprop=”image” src=”http://www.example.com/images/logo.jpg”>
How would you implement the Google+ button in an image? I don’t want to us the jave version on my site but want an image to act as the button?
Hi Adam, unfortunately you cannot do so, not only with Google +1 but any other social sharing button (E.g. Facebook Like, Twitter Tweet, Digg, LinkedIn etc)
They all use their own set of script to track the clicks, registered users etc.
Where does the +Snippet get added? I added it to my head but it’s not working.
Hi Tara,
It is really simple, when you put +Snippet you need to first modify your <html> tag.
<html itemscope itemtype="http://schema.org/Article">
Add the following meta tags inside the page <head>
<meta itemprop="name" content="Your Page Title/Heading Goes Here" / >
<meta itemprop="description" content="Your Meta Description Goes Here..." / >
<meta itemprop="image" content="http://www.example.com/images/cool-image.png" / >
Add the below code, wherever you want to place the button on-page
<!-- Place this tag where you want the +1 button to render --> <g:plusone annotation="inline"></g:plusone>
Call these JavaScript files to support G+ button
<!-- Place this render call where appropriate -->
<script type="text/javascript"> (function() { var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true; po.src = 'https://apis.google.com/js/plusone.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s); })(); </script>
Let me know if it works now.
Thanks,
Joydeep
what is the html tag? You said add “” to the html tag but I’m not sure what that is.
Tara if you see the source code of any web page, the first line you will see is DTD – Document Type Definition (something like below)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">And the second line (syntax) is your HTML code (something like below)
<html xmlns="http://www.w3.org/1999/xhtml" >This is the HTML tag you need to add the the {itemscope itemtype=”http://schema.org/Article”} code.
Hi,
I’m having a problem trying to use META tags into a jsf, I’m using som jsf templates an when I try to add meta properties to use g+ or facebook they doesn’t seems to work because, no image is showed neither the message, do you have any solution?
Thanks
Javo
Hi Javier, if you can share any URL (jsf) I can look for the problem.
Any runtime issue or syntax issue or something else.
Hey Joydeep ,
Though your post has a G+ share bubble but i didnt find the itemscope in the HTML tag … is it mandatory or am i missing something ?
Hi Sougata,
Itemscope is there in the HTML tag <html>, where we are declaring it as an Article via Schema.
<html itemscope itemtype=”http://schema.org/Article”>
Note: in case snippet data is missing, G+ will pick up the Title tag and Meta Description tag.
Wohh..you just save me, i forget to add render call code which resulted problem in 1+ button’s vertical-align in Sharebar social sharing button.
Very useful article.
Thanks.