How To Add Google+ Share Button For Your Posts In Blogger

I am sure you must be well aware about the utility of Google +1 option. Anyhow if you are not familiar about its use then let me explain you in simple terms that this feature enables you to recommend your blog on the internet. In others words it is known as recommendation from +1. These recommendations are displayed to even researchers making search on Google search page. Have you installed Google +1 option in your blog while working on Blogger platform? But, if you are not familiar with use of Google+ 1 button then I would suggest you to read Add Google+ 1 Button for blogger post. By installing Google +1 button on your blog, apart from recommending your blog it also promotes your blog on Google+.  But what will you do if someone is interested to share your blog on Google+ rather than recommending it on Google+ 1.



Differenence between Recommendations and Sharing:


As a normal practice readers of your blog may share your blog by pasting URL of your blog on Google+. But if they wish to share your blog directly from your blog without copying its URL then what they should do?  For this they need to click on +1 Option before sharing it on Google+. Do you think that it is necessary, is really so? Because even when reader is not interested to recommend your blog, but he is bound to do so before sharing it on Google+. From my point of view I do not find this exercise necessary because why a reader will recommend your blog, when he only wants to share it with his friend? And this also he is sharing with his friend because he feels that your blog may be of some help to his friend. Tell what will you do when you just want your reader to share your blog only on Google+ ?


How to share:


Google+ has introduced a plugin known as Google+ share option which enables the readers to share your blog directly while reading your blog on Google+ profile of his friend, with whom he wants to share your blog. The share made by Google+ button will not be displayed to public while they make search. But it will be colored in red color when it has been share by someone.  Nevertheless this option can be considered as threat for sharing options available on social networking websites like facebook, (Facebook Send button) or on Twitter (Twitter Tweet Button). However I do not feel that if someone has integrated +1 option in his blog would prefer to Google+ share option in his blog. Sill there must be some features which are offered by Google + button and not by Google+1, option. For example in a blog which is related to some issue of social concern in current scenario, readers would not prefer to click on +1 option, because they just want to share that blog only their friends.  Therefore they would like to see sharing button on your blog rather than a recommendation button. This also helps in enhancing traffic on your blog through Google+.


It is also possible that reader would prefer to click on Google+ option instead of Facebook send button. Therefore I thought that won’t it would be interesting if Google+1 button and Google+ button both together by making use of only code format. I do not know whether Google has any such plans to do or not.  However if you want to integrate Google+ option in your blog, this tutorial will explain you the procedure of  how to add Google+ Share Button for your posts in blogger?



Step 1 : Move on to Blogger Dashboard;


Step 2 : Check the title of your blog;


Step 3 : Move on to template option;



                                                     


PS: I would suggest you to take backup of your template before you start making any changes in your template. If you do not know the process of taking backup of your temple than you should read the process of how to back up your template.


Step 4 : Now move on Edit HTML option;


                                                


Step 5 : Check on proceed option to see template editor option;


Step 6 : Click on Expand widget template option;


Step 7 : Now for activating Google+ share button, just before </body> tag, add the code shown below;



                 


  • In the above code variant “en” refers to default language available with Google+ share option. But if you wish to change it according to your use, you can search for language code available at share button language codes page.

Step 8 : Now look for <data:post.body/> tag in the template and add the following set of code just after that in a new sequence.

There are three types of share button depending upon their size. You have option of using standard share tag or HTML5- valid share tag.


Important to note: 

  • Placement of <data:post.body> placed your button below the post. In case you want to your button to be displayed at different position you should read how to position elements on a blogger post page;


  • You also have option of searching results of <data:post.body/>. This code should be place just after the line of code.


Small:


        

Standard Share Tag

     



HTML5-valid Share Tag


      

Large :

            

Standard Share Tag

      


 HTML5-valid Share Tag


     


In the above code “bubble” variant enables you to change annotation on your share button. By default bubble variant is used for annotation. However you have facility of specifying annotations according to your requirement.

Note:  There are different forms of comments with medium size Google+ share button, discussed below:




Bubble (Horizontal) Annotation

                    


Annotation Value: bubble 



Bubble (Vertical) Annotation

                

Annotation Value: vertical-bubble



No Annotation

                


Annotation Value: none



Inline Annotation

             


It would be important to mention here that if you are working on inline annotation for your share button than you are facilitated to determine the width of your button and inline annotation. You just have to provide width of your share button code as shown below and determine its width in pixels.


Standard Share  Tag  - <g:plus width="450" ...

HTML5-valid Share Tag  -  <div class="g-plus" data-width="450" ...

Step 9: Now save all the changes and check your post displaying Goolge+ share button on your blog. 

Do you find this tutorial beneficial for you to use. Please do provide your comments.

No comments:

Post a Comment

Man Behind Ribbun Software

vikas Singal Vikas Singal is a professional Internet marketer from Jaipur, India.

Apart from Blogging , he is a fun loving person. His areas of Interest are php, wordpress and joomla.

At Ribbun-Software he Writes about Blogging, Wordpress, Technology, Making Money online.

You can read more about him at About me page.

@ribbuntweeting

My Tweeter Updates

    Follow me @ribbuntweeting

    Also Check