4 Ways To Add Google +1 Button Into Blogger

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>

<script type="text/javascript" src="http://apis.google.com/js/plusone.js"> {lang: 'hi'} </script>

2. 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.