June 4, 2011

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 »

40 comments : Post Yours! Read Comment Policy ▼
PLEASE NOTE:
We have Zero Tolerance to Spam. Chessy Comments and Comments with Links will be deleted immediately upon our review.

  1. Hi Bro
    Can you integrate this button with this widget:
    http://www.mybloggertricks.com/2010/12/add-facebook-like-button-retweet.html

    I tried a lot but just can't get it right :(

    ReplyDelete
  2. 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
  3. @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
  4. 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
  5. @Sam

    Dude use this code for that,

    <b:if cond='data:blog.pageType == &quot;item&quot;'>
    <table border='0'>
    <tr>
    <td><div style='padding-top:6px;'>
    <script type='text/javascript'>
    tweetmeme_style = &quot;compact&quot;;
    </script>
    <script src='http://tweetmeme.com/i/scripts/button.js' type='text/javascript'/>
    </div></td>

    <td>
    <script expr:src='&quot;http://www.stumbleupon.com/hostedbadge.php?s=1&amp;r=&quot; + data:post.url'/>
    </td>

    <td><div style='margin-left:35px;'>
    <script type='text/javascript'>
    undefinedfunctionundefined) {
    var s = document.createElementundefined&#39;SCRIPT&#39;), s1 = document.getElementsByTagNameundefined&#39;SCRIPT&#39;)[0];
    s.type = &#39;text/javascript&#39;;
    s.async = true;
    s.src = &#39;http://widgets.digg.com/buttons.js&#39;;
    s1.parentNode.insertBeforeundefineds, s1);
    })undefined);
    </script>
    <a class='DiggThisButton DiggCompact'/>
    </div></td>

    <td><div style='margin-left:35px;'>
    <g:plusone size="standard" expr:href="data:post.url"/>
    </div>
    </td>

    <td>
    <iframe allowTransparency='true' expr:src='&quot;http://www.facebook.com/plugins/like.php?href=&quot; + data:post.url + &quot;&amp;layout=button_count&amp;show_faces=false&amp;width=100&amp; action=like&amp;font=arial&amp;colorscheme=light&quot;' frameborder='0' scrolling='no' style='border:none; overflow:hidden; margin-left:35px; width:100px; height:20px;'/>
    </td>
    </tr>
    </table> </b:if><br/>

    ReplyDelete
  6. @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
  7. Can't even see the buttons buddy..
    Check this:
    http://samsexy98downloads.blogspot.com/2010/12/makeover-of-our-site.html

    ReplyDelete
  8. @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
  9. Have a look:
    http://rumiiqbalandme.blogspot.com/

    ReplyDelete
  10. @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
  11. Hello Mohammad,
    another master one bro..
    thanks for your regular update and i am eagerly waiting for that sliding facebook widget.

    ReplyDelete
  12. @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
  13. @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
  14. Hi Mohammad! Anyone trying to use +1 with the old-style "classic" blogger may want to have a look at my blog - I've got it running - it's not perfect on the landing page, but works with 100% functionality on individual post pages!

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

    ReplyDelete
  15. @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
  16. @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
  17. @ Mohmd, I did as you instructed but it didn't work. Pl do try an find a solution. Thanks

    ReplyDelete
  18. @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
  19. Thanks for the MBT Encoder :D

    i've placed +1 in the end:

    <table border='0' class='center'>
    <tr>
    <td><div style='padding-top:6px;'>
    <script type='text/javascript'>
    tweetmeme_style = &quot;compact&quot;;
    </script>
    <script src='http://tweetmeme.com/i/scripts/button.js' type='text/javascript'/>
    </div></td>

    <td>
    <script expr:src='&quot;http://www.stumbleupon.com/hostedbadge.php?s=1&amp;r=&quot; + data:post.url'/>
    </td>

    <td><div style='margin-left:35px;'>
    <script type='text/javascript'>
    undefinedfunctionundefined) {
    var s = document.createElementundefined&#39;SCRIPT&#39;), s1 = document.getElementsByTagNameundefined&#39;SCRIPT&#39;)[0];
    s.type = &#39;text/javascript&#39;;
    s.async = true;
    s.src = &#39;http://widgets.digg.com/buttons.js&#39;;
    s1.parentNode.insertBeforeundefineds, s1);
    })undefined);
    </script>
    <a class='DiggThisButton DiggCompact'/>
    </div></td>

    <td>
    <iframe allowTransparency='true' expr:src='&quot;http://www.facebook.com/plugins/like.php?href=&quot; + data:post.url + &quot;&amp;layout=button_count&amp;show_faces=false&amp;width=100&amp; action=like&amp;font=arial&amp;colorscheme=light&quot;' frameborder='0' scrolling='no' style='border:none; overflow:hidden; margin-left:35px; width:100px; height:20px;'/>
    </td>

    <td><div style='margin-left:5px;'>
    <script src='http://apis.google.com/js/plusone.js' type='text/javascript'> {lang: &#39;en-US&#39;} </script><g:plusone expr:href='data:post.url' size='small'/>
    </div></td>

    </tr>
    </table>

    it's fine. but can i pad the +1 button to top a bit?, by 1px or 2px? because it's not in the middle of the box/table (vertically middle)

    ReplyDelete
  20. @ 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
  21. MBT always brings something awesome to list. I'll soon add this button to my blogger page. Thank you

    ReplyDelete
  22. I have implemented it at the end of my posts ;) check it out http://www.hackersthirst.com/2011/01/explaining-phishing-to-new-bies.html

    ReplyDelete
  23. oh, i've solved.... ummm.. no! not solved but overcame my +1 vertical center problem :D
    I added share button in between the +1 button and Facebook like button, so it's looking fine. Plus i changed tweet-meme button to official tweet button (Facebook look-a-like) and removed digg button ( yellow color looked annoying :P ... yeah yeah i like neatly arranged things :D )

    my code now:
    <data:post.body/>

    <table border='0' class='center'>
    <tr>

    <td><div style='padding-top:6px;'>
    <a class='twitter-share-button' data-count='horizontal' href='http://twitter.com/share'>Tweet</a><script src='http://platform.twitter.com/widgets.js' type='text/javascript'/>
    </div></td>

    <td><div style='margin-left:25px;'>
    <script expr:src='&quot;http://www.stumbleupon.com/hostedbadge.php?s=1&amp;r=&quot; + data:post.url'/>
    </div></td>

    <td>
    <iframe allowTransparency='true' expr:src='&quot;http://www.facebook.com/plugins/like.php?href=&quot; + data:post.url + &quot;&amp;layout=button_count&amp;show_faces=false&amp;width=100&amp; action=like&amp;font=arial&amp;colorscheme=light&quot;' frameborder='0' scrolling='no' style='border:none; overflow:hidden; margin-left:35px; width:100px; height:20px;'/>
    </td>

    <td><div class='addthis_toolbox addthis_default_style '>
    <a class='addthis_counter addthis_pill_style'/>
    </div>
    <script src='http://s7.addthis.com/js/250/addthis_widget.js#pubid=xa-4de3b2d654f56f28' type='text/javascript'/>
    <script type='text/javascript'>
    var addthis_config = {
    ui_cobrand: &quot;RUMI, IQBAL AND ME&quot;,
    ui_header_color: &quot;#ffffff&quot;,
    ui_header_background: &quot;#0080FF&quot;
    }

    </script></td>

    <td><div style='margin-left:35px;'>
    <script src='http://apis.google.com/js/plusone.js' type='text/javascript'> {lang: &#39;en-US&#39;} </script><g:plusone expr:href='data:post.url' size='medium'/>
    </div></td>

    </tr>
    </table><br/>

    Thank you sssooo much Mustafa. m very happy to get my customized share box! :D which wasn't possible without you....

    Thanks mate! ::thumbsup::

    ReplyDelete
  24. @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
  25. @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
  26. @Mohammad Mustafa Ahmedzai
    Thanks Mustafa.
    Its working fineon my blog
    ebooks2000.blogspot.com

    ReplyDelete
  27. 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
  28. Hallo frnd i want to integrate g+1 at top of the blog.pls mail me @ prasanth.be.eee@gmail.com

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

    ReplyDelete
  30. 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
  31. This comment has been removed by the author.

    ReplyDelete
  32. <a href="http://google.com/" target="_blank">My Name is Khan</a>

    ReplyDelete
  33. Using the +1 button, users can see the number of 'plus' the site has, meaning how many others have liked the web page. Websites having the button, allow users to share whatever they like at the run time. Amongst the Google circles, users share content using +1, so the button is actually fueling social interaction.

    buy google followers

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

    ReplyDelete
  35. Google plus button is just like fb like :) Thanks,
    Clipping Path

    ReplyDelete

 
  • MBT Icons and buttons

    Icons and Buttons

    Our resources have been successfully downloaded over 10K times and found almost every where. Get yours!

  • choosing webhost for a blog

    Why HostGator?

    Learn Why we chose HostGator as our Web Host and find discount coupons to kick start your blog today!

  • SEO Settings for blogger

    ALL IN ONE SEO PACK 2012

    Learn every single SEO tip that will boost your blog's ranking and organic traffic. We got them all!

  • Blogger widgets and plugins

    Visit MBT's Blogger LAB

    Why not take a tour of all great Blogger widgets published so far? You Name it we have it!

  • become a six figure blogger!

    Become a SIX FIGURE BLOGGER

    Learn what it takes to become a successful entrepreneur and build a living online!