How to Add Google +1 Button to Blogger

Posted In Blogging Tips, Google, Social Media - By Falcon On Thursday, June 2nd, 2011 With 6 Comments

Google +1 button is now available for websites and I recommend you Blogger users to add this new cool button to your blogs because it is another parameter that affects your website’s ranking on search results. So basically you should not ignore the button. It is pretty easy to add Google +1 button to blogspot blogs you don’t have to mess with lots of code snippets. Now go to Google +1 button page and generate your button.

Now, the next step is : Click “Design” tab from Blogger Dashboard and then click “Edit HTML” link. You will see your template codes, in order to see the detailed coding of the template you must click “Expand Widget Templates” link as shown in the screenshot given below.

After you expand the template, find [php]<data:post.body/>[/php] using CTRL+F combination and then paste the code you generated above the lines. Now in order to make it look better we will add some css styles to our button by adding div style. The code we are supposed to paste will look like this :

[php]

<div style=”float:left;”>
<script src=”http://apis.google.com/js/plusone.js’ type=’text/javascript”/>
<g:plusone/>
</div>

[/php]

If you want to make Google +1 button appear on the right simply change “left to “right”. Finally, it must look like this :

Save and refresh your home page.

Any questions?

 

 

Displaying 6 Comments
Have Your Say

  1. Dave Lucas says:

    Google made it fairly easy for blogger/blogspot users (and for WP users) to add the +1 button, but for those of us still sticking with the old so-called “classic” blog*spot template, we had to figure it out for ourselves! I came up with a solution that’s not 100% perfect, but it does the job!

    Here’s the link:
    http://dave-lucas.blogspot.com/2011/06/add-google-1.html

  2. Osho Garg says:

    Hi Falconhive i am using your Zinmag Remedy Template From Some Years I Really Like It and Check My Blog I Update It Too Much :)
    Here’s The Link For Add Floating Google +1 Button To Blogger
    Add Floating Google +1 Button To Blogger

  3. Zubair says:

    Thank you very much for sharing this info, very useful and easily done after reading your article. Most apprecaited.

    Regards

  4. Greg says:

    Thanks for the detailed info, as I was looking for an easy way to add G+ to a blogger site of mine. Thx!

  5. Thx FalconHive for sharing Google +1 button, very usefull

  6. Tom K. says:

    Thanks for the cool share, I want one on my Blogger site.

Leave a comment

XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>