Toll Free: 1-877-695-7388

GTA: (647) 699-2838

Search Engine People
  • SEO
  • SEM
  • CRO
  • Display
  • Blog
  • Why Us
  • Contact
  • Join Our Team
  • Get A Quote

Toll Free: 1-877-695-7388

GTA: (647) 699-2838

How to Implement Google +1 Button for Social Sharing

Joydeep Deb | August 26th, 2011
Tweet51
Share11
Share
Pin
62 Shares

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="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 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.

Tweet51
Share11
Share
Pin
62 Shares
Posted in Social Media Marketing

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.

Blog | Tools | MISC

13 thoughts on “How to Implement Google +1 Button for Social Sharing”

  1. Ari Amiri says:
    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.

    1. Joydeep says:
      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 says:
    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 says:
    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 says:
    December 11, 2011 at 5:29 am

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

    1. Joydeep says:
      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 says:
    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.

    1. Joydeep Deb says:
      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 says:
    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

    1. Joydeep says:
      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 says:
    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 ?

    1. Joydeep says:
      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 says:
    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.

Recent Posts

  • Maximizing Your E-Commerce Sales:
    A CRO Audit Guide
  • Movin’ On Up! Why Migrating to Google Analytics 4 (GA4) Should be a Priority
  • A Year in Review: The Digital Marketing Trends That Defined 2021
  • The Basics of Video Marketing
  • Just How Much Do Google Reviews Impact Your SEO Ranking?

Categories

  • Analytics & ROI Analysis
  • Company News
  • Content
  • Conversion Optimization
  • CRO
  • Display Advertising/RTB
  • Email Marketing
  • En Español
  • En Français
  • Inbound Marketing
  • Lead Nurture & Marketing Automation
  • Local Search
  • Marketing
  • Mobile
  • Partnership Marketing
  • PPC
  • PR
  • SEO
  • Social Media Marketing
  • Web Design

Additional Posts

Using Other Blogs and Writers to Boost Your SEO

August 26th, 2011 | by Nick Grant

The 7 Deadliest Twitter Mistakes

August 25th, 2011 | by Jennifer Null

SEO Agencies: How to Sell Infographics to Your Clients: A Three Part Series

August 25th, 2011 | by Amy Balliett

LET'S TALK

Need more information or want to get in touch?

Get in touch!
  • SEO
  • SEM
  • Display
  • Blog
  • Why Us
  • Join Our Team
  • Contact Us
  • Local SEO
  • Small Business SEO
  • Enterprise SEO
  • International SEO

LOCATION

1305 Pickering Parkway,
5th Floor Pickering, L1V 3P2

PHONE

Toll Free: 1-877-695-7388
Greater Toronto Area: (647) 699-2838

Social

© Search Engine People Inc. 2023 – Canada’s Top Digital Agency
© SEP 2023 – A Search Engine People Company | Privacy Policy

Search Engine People