Add the Google +1 Button to Your Blogger Blogs

ADD GOOLE +1 BUTTONGoogle released recently there +1 Button that will show publicly what you like, agree with, or recommend on the web. When you +1 an article or tutorial, your name will appear under that article when that article appears in search results. You can also find out what articles your friends read and liked. This according to Google is aimed to make Google Search results more relevant and useful. For Bloggers like you, I am sure this is another great tool to increase the PR, relevancy and importance of your blog. According to me, the more +1'd this you receive the chances for your blog's PR to improve will increase also because the PageRank algorithm is linked to all activities that takes place in your blog. The video below will demonstrate better,

How to add the +1 Button to Blogger?

  1. Go To Blogger > Design > Edit HTML
  2. Backup your template
  3. Search for </head>
  4. Paste the code below just above </head>
<script type="text/javascript" src="http://apis.google.com/js/plusone.js"> {lang: 'en-US'} </script>
     5.  Now Check the "Expand Widgets Templates" Box at the top right corner. In order to place the button just below Post titles then search for this code <data:post.body>  and place the +1 button code given below just above it,
<div style='float:left'>
<g:plusone size="standard" expr:href="data:post.url"/>
</div>
  • You can display it to "left" and "right" by adjusting left
  • You can change standard to medium, small or tall. Choose the size that may blend your template.
Tall, small, Medium Respectively:
image

image
image
   


6.  If you want the button to appear below blog posts then add the button code just below <data:post.body>
    7. Save your template to see it working. Have fun! :>


Alternative Method

To add the +1 button to your blog directly without any code then you’ll need to enable Share buttons on Blogger. To do this, go to Design > Page Elements on your Blogger dashboard, find the Blog posts area, click on Edit, and select the “Show Share Buttons” option. If you are already using Share buttons, then you don't need to worry as the +1 button will automatically show up as a new share button.

If you don't want to get yourself into Serious Technical Trouble while editing your Blog Template then just sit back and relax and let us do the Job for you at a fairly reasonable cost. Submit your order details by Clicking Here »

25 comments

PLEASE NOTE:
We have Zero Tolerance to Spam. Chessy Comments and Comments with 'Links' will be deleted immediately upon our review.
  1. I've been ignoring Google's +1 ever since i heard it, but this post made me to integrate it to my site.... Thanks for the post and widget Mohammad.

    Well, I wish to thank "SamSexy98" too because he gave me the idea to merge the two widgets...

    ReplyDelete
  2. @Vamsi
    I see that you have already integrated it successfully. I did exactly the same thing which you have done but I am having some alignment issues. It just not getting fit in my current template.

    ReplyDelete
  3. Thanks for this trick. Though, after implementing it; That is adding the +1 button below my posts title. I couldn't trace the button, what could be the problem? Why can't I place the button just like I did add Facebook Like and Send Button To my Blogger Blogs?

    ReplyDelete
  4. @Vamsi
    I thank you for that. :>

    @Felix
    Dude kindly add it just after your Facebook send button code. Let me know if it worked.

    ReplyDelete
  5. @samsexy98

    Tell me how to post code with tags here. I've got it worked :D
    yup, now my page has 5 buttons, with +1 button on far right

    ReplyDelete
  6. Have a look:
    http://rumiiqbalandme.blogspot.com/

    ReplyDelete
  7. @rIZ
    Do u mean the whole code stuff like Mohammad did. If yes then you cannot post. Only Mohammad can post such things as he is admin. If you try to post you will get error and after trying multiple times blogger will consider you as spammer.

    And I looked at your site and yea yours looks fine but look at the gap between like button and new +1 button. That doesn't looks good to me :(

    ReplyDelete
  8. Hello Mohammad,
    another master one bro..
    thanks for your regular update and i am eagerly waiting for that sliding facebook widget.

    ReplyDelete
  9. @bhavesh

    The button is not showing up because you didn't add the +1 button code above </head> i.e
    <script type="text/javascript" src="http://apis.google.com/js/plusone.js"> {lang: 'en-US'} </script>

    And sorry for the inconvenience. The Javascript for digg code was not encoded So I have emailed you the correct code.

    @rIZ

    To add HTML to Blogger Comment Form, you will need to encode the code. You can do that using this tool -> MBT Encoder

    @Jeet
    Always welcomed bro! :>

    ReplyDelete
  10. @Mohammad
    Look at my demo blog. Looks pretty bad. I have already done this before asking you. Looking for a solution.

    Btw do we have the power to post the full codes like you post.

    ReplyDelete
  11. @sam

    I emailed you the code. Did you check it? I am using the same on this demo blog and it looks just fine -> http://bloggertricks-testblog.blogspot.com/2009/10/this-is-how-peacful-land-turned-into.html
    You can change the button size to small for better visibility.
    Yes sure you can post codes using the Encoder tool

    ReplyDelete
  12. @Mohammad
    Yup buddy I have used the same code which you have mailed me and it doesn't looks good.

    Wait I will send you my demo blog template. Check it out.

    ReplyDelete
  13. @ Mohmd, I did as you instructed but it didn't work. Pl do try an find a solution. Thanks

    ReplyDelete
  14. @Sam

    Ok send it I am waiting. Do you like how it appears here? -> http://bloggertricks-testblog.blogspot.com/2009/10/this-is-how-peacful-land-turned-into.html

    @Felix

    Its the most simplest tutorial friend. Where exactly are you facing problem. did you pasted it below data:post.body ?

    ReplyDelete
  15. @ Mohmd, I noticed in your instruction that you did'nt specify after adding the script above head, that I should save then check and cont.....hence, my confusion. Otherwise, all is well. Thanks. Keep up the good job.

    ReplyDelete
  16. MBT always brings something awesome to list. I'll soon add this button to my blogger page. Thank you

    ReplyDelete
  17. @Riz
    great work bro! You will surely develop the skills soon. More power :>

    @Felix

    Oh I see pal. Glad it finally worked for you and if still needed help I am always at your service. :>

    @NRUPEN|DEVIL'S BLOG ON SECURITY

    I thank you for your kindness brother. :)

    @Wamiq

    Looks nice there. good job bro! =)

    ReplyDelete
  18. @Mohd
    I have already sent you the demo template which is same as my original one. And Sorry for late reply. I was not available for some days due to some health issues yet again.

    ReplyDelete
  19. bro. how to align the sharing button in one line like in your blog? at the top of the post? i just cant align the buttons to make it straight

    ReplyDelete
  20. Hallo frnd i want to integrate g+1 at top of the blog.pls mail me @ prasanth.be.eee@gmail.com

    ReplyDelete
  21. HI there,
    Can you please provide me the code share buttons below your posts and your email subscription box code????

    ReplyDelete
  22. bro. i like your current google +1 widget at the right side. can you make it tutorial for that? please bro. thanks a lot.

    ReplyDelete
  23. Simple and great thanks for the post :)

    ReplyDelete