How to Implement Google +1 Button for Social Sharing
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, it’s 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 friend’s 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="http://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="http://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 can’t 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.
Joydeep has 7+ years of strong experience in Online Marketing, Web Technologies, Search Engine Optimization, SEO, SEM, SMM, Web Master, eMail Marketing, Web Analytics, MIS Reporting, Web Design and Development.
Leave a Reply
Get the SEP Newsletter
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">
Joydeep recently posted: How to Implement Google +1 Button for Social Sharing
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?
Adam recently posted: High speed photography… At the river
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.
Joydeep recently posted: How to Implement Google +1 Button for Social Sharing
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
Joydeep recently posted: SEO Overview: What? Why? And How?
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.
Joydeep Deb recently posted: SEO Overview: What? Why? And How?
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.
Joydeep recently posted: Website Analysis: Gain Authority, Popularity & Trust