How to Add Google+ Share Button to WordPress & Blogger Posts

Introducing the New Sharing Member – Google+ Share Button

Google+ Share Button : Days back, Google Developers announced and introduced a brand new button for sharing +1′s of your posts to your Google+ Profile. This is yet another huge step by Google after the major changeover to Google Plus’s layout, they are excelling with much pace in simplifying social sharing. Before on, whenever your visitors used to find something interesting on your blog, they used +1 it and share later but with this sharing button, it’s now more simple to share the post with your friends and their circles.

Importance of Google +1 and Google+ Share Button

Google +1 is more popular among most websites/blogs as it affects organic Google search results. You must be knowing the importance of +1′s to your posts ? Ain’t you ? Then let me tell you that the more +1′s your particular post gets the more high it will rank in it SERP’s (Search Engine Results Page). Research says the if a post is copied from another source, then chances are there for the post to rank high in the top of the SERP’s above the original post if it has more number of +1′s in it than the counts in the original one. So it always and highly recommended to focus on getting more +1′s rather than more likes to your post as finally your post will be ranked in search engines like Google, not on Facebook!

Now with this new social sharing button, your organic visitors can share their choice of topics into their Google+ profile with their friends and circles. This will automatically +1 your post and share. Meanwhile in the normal Google +1 Button, to share the post we had click on it and keep the mouse pointer hovered on it to show the sharing box.

How to Add Google+ Share Button in WordPress

You can find the Sharing Plugin at Google’s Official Developer Page which has a lot of options to change the annotation, size and language for the button. But anyhow, Google provides the button to be applicable for a single URL i.e. it asks the URL to share so that whenever the button is clicked, it will share only that particular post. For WordPress you need to make some changes so as to share the particular topic.

The Coding Begins

1. Open your theme’s footer.php file and add the following codes just before the closing of your </body> tag. You can find this tag at the end of the file before </html>. Click on “Show Source” to expand the code boxes!

<script type="text/javascript">// <![CDATA[
   window.___gcfg = {parsetags: 'onload'};   (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>

2. After you have inserted the codes in your footer, now it’s time to place the Share Button in your posts.

3. Before inserting, check your posts layout once and think where could the button be suitable for your visitors. If you’re confused then I would recommend to add it before and after your posts and once your visitors start noticing it, then you can remove it from one of the places.

4. Open your single.php file to insert the Code for the Button and save your file. Done!

//Code for the Normal (Medium) Button</pre>
<div class="g-plus" data-action="share" data-annotation="none"></div>
//Code for the Bubble (Horizontal) Button
<div class="g-plus" data-action="share" data-annotation="bubble"></div>
<pre>//Code for the Bubble (Vertical) Button</pre>
<div class="g-plus" data-action="share" data-annotation="vertical-bubble" data-height="60"></div>
//Code for the Inline Button
<div class="g-plus" data-action="share" data-width="307"></div>

How to Add Google+ Share Button in Blogger

Blogger being the part of Google has all the features of Google ready made available for it’s platform. But till yet the button isn’t available in the Blogger’s Gadget List as the Popular Google Gadgets like the +1 Button, G+ Badge are available at the top of the page except the share button, which I guess will be available soon in the upcoming days.

So we will add the code for the button for the posts, and once the gadget is available you can use it to insert the button for your homepage. Now for single posts, follow these lines!

1. Go to Blogger Dashboard and Click on your Blog Title.

2. Now navigate to your template tab and perform a backup of your template so that if anything wrong happens you can recover your original template. Click on Edit HTML and then click on Proceed.

3. Tick on Expand Widget Templates options on the top of the page and then right before the </body> tag, place below asynchronous Google+ Share Button Script which loads +1 button without affecting page load time. Click below on show source to view the code.

<script type="text/javascript">// <![CDATA[
  window.___gcfg = {parsetags: 'onload'};

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

4. Now search for the <data:post.body/> tag and you will 2 of the same. Don’t worry, place the below codes just after the first resulted code i.e. while searching when you find the first <data:post.body/> tag, simply place the code under it. By placing here, it will place the button just after your posts.

//Code for the Normal (Medium) Button</pre>
<div class="g-plus" data-action="share" data-annotation="none"></div>
//Code for the Bubble (Horizontal) Button
<div class="g-plus" data-action="share" data-annotation="bubble"></div>
//Code for the Bubble (Vertical) Button
<div class="g-plus" data-action="share" data-annotation="vertical-bubble" data-height="60"></div>
//Code for the Inline Button
<div class="g-plus" data-action="share" data-width="307"></div>

5. Before saving once preview your template to see whether your button is properly appearing or not. Well I’m sure it will work as I have tested it, but for your convenience do check your individual posts after saving it.

Button Configuration

The Button is available in 4 annotations (sizes). Choose accordingly which one would suit your blog and place it in the best position where your visitors would find it easy for sharing.

The 4th Annotation i.e. the Inline Button works the Best for Sidebars. So if you use then according to your sidebar’s width you can adjust the button’s width. Simply edit this line data-width=”307″ with the dimension of your sidebar. You can specify any width if you want to place it somewhere else and make it more large for higher view field. Below are the button examples

Note : If you want to add the Button for your website then add this attribute to your code data-href=”Your Blog URL” for WordPress Blogs and expr:href=”data:post.url” for Blogger Blogs and place the code wherever you want the button to appear for your blog at the homepage.

Screenshots of the Share

Google Developers have posted the screenshots of the sharing button before the share, when clicked and after the share images. Have a look below!

Before visitors share:

When clicked, visitors can add a comment and choose who to share with:

After they’ve shared, the button turns red. They can click to share again. 

You can find the Google+ Share Button at the top of our post. We have found it as the most relevant place for our visitors as it includes the family of all other Social Media’s and together they constitute a Share Hub! Show will you be using the Share button or are you happy with +1 ?

Cheers.