4 Ways To Add Google +1 Button Into Blogger

Y ou Have Seen Twitter Tweet, Facebook Like, StumbleUpon, Digg Button And Many Other Social Networking Sharing Option in Many Sites. No...

You Have Seen Twitter Tweet, Facebook Like, StumbleUpon, Digg Button And Many Other Social Networking Sharing Option in Many Sites. Now The “Big G” Google Also Introduced The “+1” Button To Add To Your Site. By adding the +1 button to your blog, you’re providing an easy way for your visitors to recommend your posts to their friends right from your blog.

This button also appears in Google search engine results. +1 buttons let people who love your content recommend it on Google search.

Now Let’s Learn Something About “+1”.

What is +1?

See +1's

Sometimes it’s easier to find exactly what you’re looking for when someone you know already found it. Get recommendations for the things that interest you, right when you want them, in your search results.

The next time you’re trying to remember that bed and breakfast your buddy was raving about, or find a great charity to support, a +1 could help you out. Just make sure you're signed in to your Google Account.

Show +1's

In order to +1 things, you first need a public Google profile. This helps people see who recommended that tasty recipe or great campsite. When you create a profile, it's visible to anyone and connections with your email address can easily find it.

Your +1’s are stored in a new tab on your Google profile. You can show your +1’s tab to the world, or keep it private and just use it to personally manage the ever-expanding record of things you love around the web.

 

Check The “Introducing the +1 Button” Video From Below :-

Ok, Now Let’s Learn How To Add +1 Button To Blogger.

Important Note: Please Save A Copy Of Your Template Before Doing This. Otherwise I Won’t Be Responsible For Any Errors!

Note: Please Click Here To Customize To Your +1 Button

Method 1:- Adding From Page Element

Log in To Blogger and Then Go to Design > Page Elements And Click Edit On The “Blog Post”. Click on Show Share Buttons. +1 button is there. Save it.

Method 2:- Editing HTML template

    If you have enabled Show Share Buttons from Page Elements but still it is not appearing then you can try following procedure. 
    1. Go to Design >> Edit HTML and click on Expand Widget Templates. Place following code BEFORE </head>
    2. <script type="text/javascript" src="http://apis.google.com/js/plusone.js"> {lang: 'hi'} </script>
    3. Now look for <div class=”post-header-line-1/> or <data:post.body/> and add following code BELOW it
    <div style=’float:left; margin-left:10px;’> 
    <g:plusone expr:href=’data:post.url”></g:plusone> 
    </div>
    3. You can also add to sidebar using Add a Gadget >> HTML/Java Script and add following code 
    there and save

    <g:plusone size="tall"></g:plusone>

Method 3:- Combine +1 button with AddThis

If you are using AddThis script, you can add +1 button code to shot it with AddThis buttons as follows. 
1. First do the step 1 as described in Method 2 above 
2. Go to Design >> Edit HTML and click on Expand Widget Templates and look for AddThis code and code in Bold to original AddThis buttons code

<!-- AddThis Button BEGIN --> 
<div class='addthis_toolbox addthis_default_style '> 
<a class='addthis_button_google_plusone'/>
<a class='addthis_button_facebook_like' fb:like:layout='button_count'/> 
<a class='addthis_button_tweet'/> 
<a class='addthis_counter addthis_pill_style'/> 
</div> 
<script type='text/javascript'>var addthis_config = {&quot;data_track_clickback&quot;:true};</script> 
<script src='http://s7.addthis.com/js/250/addthis_widget.js#pubid=ra-4daaf36d0b7c565c' type='text/javascript'/> 
<!-- AddThis Button END -->

3. Save the template.

 

Method 4:- Adding +1 Directly Via HTML

 

  • Go to Dashboard > Design > Edit HTML
  • Backup Your Template
  • Tick the  Expand Widget Templates check box on top right of the HTML window.
  • Find the following code in your HTML, this is the code for your post content:

    <data:post.body/>
    Paste the +1 button code immediately below (after) it:

    <!-- Google +1 button Start -->
    <b:if cond='data:blog.pageType != &quot;static_page&quot;'>
    <p></p>
    <div style='float:left;padding:10px;'>
    <script type="text/javascript" src="http://apis.google.com/js/plusone.js"></script>
    <g:plusone expr:href="data:post.url" size="standard" count="true"></g:plusone>
    </div>
    </b:if>
    <!-- Google +1 button End -->

    Configure button. You can configure by changing the attributes in line 6.



Button size (with count) Value
small
medium
standard
tall


    Button repositioning 
    The code above positions the button on bottom left of each post. You can change the positioning if you wish.
    • Position it on top of post 


      Place the button code before (instead of after)<data:post.body/>.
    • Position it on the right 


      Change the float in line 4 from left to right.

      Displaying button on static pages The code above doesn't display the button on static pages. To make it appear on static pages as well, remove the conditional tag -code line 2 and 8.



That’s All For Today. If You Feel Any Problem, Please Leave A Message Here.

12 comments :

  1. doesn't work on my blogger. It just doesn't show up. What could be wrong?

    Thanks!

    ReplyDelete
  2. I noticed the code I pasted below didn't show up in the comments. What I meant is that the AddThis code that you mentioned to be added into Blogger didn't work. My site shows all the social media buttons on AddThis except Google's +1.

    How do I get AddThis to display the +1 button along with the existing ones?

    Thanks!

    ReplyDelete
  3. I noticed the code I pasted below didn't show up in the comments. What I meant is that the AddThis code that you mentioned to be added into Blogger didn't work. My site shows all the social media buttons on AddThis except Google's +1.

    How do I get AddThis to display the +1 button along with the existing ones?

    Thanks!

    ReplyDelete
  4. I just found the solution to my problem on this website http://mark-shu.blogspot.com/2...

    www.measurementest.com now has +1 buttons! :)

    ReplyDelete
  5. @measuremenTest.comthat's because a mismatched code in your template. css doesn't fit in original width. and also tag shows improper character

    ReplyDelete
  6. Hi Reyad, thanks for your response. I don't quite understand what you mean? Which part of the code has problem? And how do I rectify it?

    ReplyDelete
  7. @measuremenTest.com You are showing two addthis option on each of your post. Edit it.
    Go to Edit Html and the click on "Expand Widget Templates". then search for addthis and you will find two.
    May be one under <div class="post-header-line-1"> and another is just below <b:if cond="data:post.hasJumpLink">......keep only one.
    and also, this tags may vary upon templates </b:if></div>

    ReplyDelete
  8. I noticed the code I pasted below didn't show up in the comments. What I meant is that the AddThis code that you mentioned to be added into Blogger didn't work. My site shows all the social media buttons on AddThis except Google's +1.

    How do I get AddThis to display the +1 button along with the existing ones?

    Thanks!

    ReplyDelete
  9. I just found the solution to my problem on this website http://mark-shu.blogspot.com/2011/06/how-to-integrate-google-1-button-with.html

    www.measurementest.com now has +1 buttons! :)

    ReplyDelete
  10. that's because a mismatched code in your template. css doesn't fit in original width. and also tag shows improper character

    ReplyDelete
  11. Hi Reyad, thanks for your response. I don't quite understand what you mean? Which part of the code has problem? And how do I rectify it?

    ReplyDelete
  12. i have no word to say something for your site .it's really totally awesome ...
    buy google plus one

    ReplyDelete