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.

Google +1 Button for Social Sharing

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

Joydeep Deb is a Senior Digital Marketer and Technical Marketer with 12+ years of experience in Digital Marketing, Lead Generation, Online Brand Management, Marketing Campaigns, Search Engine Optimization (SEO), Search Engine Marketing (SEM), PPC, eMail Marketing, Web Analytics, Web Technologies, Web Design and Development.

13 Comments

  1. Ari Amiri August 30, 2011 at 9:38 am

    Hi,

    how would you implement this using span tags in the body rather than meta tags in the header to customize the snippet.

    • Joydeep August 31, 2011 at 12:19 am

      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”>

  2. Adam September 14, 2011 at 9:00 am

    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?

  3. Joydeep September 14, 2011 at 9:10 pm

    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.

  4. Tara December 11, 2011 at 5:29 am

    Where does the +Snippet get added? I added it to my head but it’s not working.

    • Joydeep December 12, 2011 at 8:26 pm

      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

  5. Tara December 13, 2011 at 8:38 am

    what is the html tag? You said add “” to the html tag but I’m not sure what that is.

    • Joydeep Deb December 13, 2011 at 8:05 pm

      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.

  6. Javier March 26, 2012 at 10:07 am

    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

    • Joydeep March 28, 2012 at 5:38 am

      Hi Javier, if you can share any URL (jsf) I can look for the problem.
      Any runtime issue or syntax issue or something else.

  7. Sougata June 25, 2012 at 2:29 am

    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 ?

    • Joydeep June 26, 2012 at 9:51 pm

      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.

  8. Amiya June 19, 2013 at 1:31 am

    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.

Comments are closed.