Putting a custom +1 button into your blog

You can add a custom version of Google's +1 button to your blog, just like  Facebook's Like button.  It can go in under the title bar in the post-header or beside or below each post.  Or it can be a gadget.   And the "plus one" function can apply to  an individual post or your whole blog.   


[Updated Jul 2011 to link to the asynchronous version of the code.] 

What is Google's +1 button

+1 is Google's answer to Facebook's Like button - or at least that's what Google are hoping.

They first announced it in March 2011, and have now added it to the standard sharing buttons for Blogger.

The big difference between +1 and Like is where the results appear:

• Like shows up in counts in the Like button and inside Facebook in the feed from the person doing the liking.    
• +1 shows up in Google search results - it's still not clear if this is just in search results for your "friends" (however they're defined) or if it shows in search results for everyone, or how much influence it will have on search-result.  

Adding +1 if you don't use Blogger's standard sharing buttons

Provided you're willing to accept the disadvantages of editing your template, it's easy enough to add a customized Tweet or Facebook share button to your blog.

Adding a customised +1 button is very similar.   Just follow these steps:

1   Go to the +1 button configuration page Webmaster Central.

2   Choose the basic settings you want:  pick button size, annotation and language. 

So far, I've used the medium (20px) size, as it seems to fit best with the other share-items that I've added before.   You should be able to see it at the top of the page if you're reading this article through a web-browser.   Note that this option is slightly smaller than the default "standard" option.

Annotation is about how your number of +1s is "noted" in the button - choose the different options and watch what happens in the preview to see which one you want to use.  Or choose None if you don't want the button to show a count.

3  Click on Advanced options, and decide what you want to to apply the +1 function to:

• If you want to to put the +1 button where it can be used to on the individual post URL rather than your whole blog, then put some text like PUT-URL-HERE into the "Url to +1" box.   

• If you want readers to +1 your whole blog, just enter your blog's web-address (ie URL) into the "URL to +1" box.  
  (NB It may be possible to leave it blank in this case, but I'd rather specify exactly what URL to use, in case anyone hits +1 from an archive page or similar, which has a separate URL).

5   Copy the HTML shown.


The code provided is in two parts.  The first section is what you put into your blog whereever you want the +1 button to appear.   The second part starts with a comment:  "<!-- Place this tag after the last plusone tag -->".   This means that:

1. You only need to put the code underneath that line into your blog once, and 
2. The place to put it is immediately after the last time you put the +1 button code into your blog.  Iif you only add the button once, then put after that time.   

6   Add it to your blog in the same way that you would add add any other share-this-to-whatever social sharing button, except --- if you want the button to recommend individual posts not the whole blog, then before you save the change, replace the PUT-URL-HERE part of

href="PUT-URL-HERE"    (or whatever text you used)

  with

expr:href='data:post.url'

What your viewers will see:

Visitors who see your blog in their web-browser (not through an RSS feed reader) will see a new button wherever you choose to put it.   (People who read your blog thru feed aggregators, or by email subscription, won't see it.)


When someone clicks the button, what happens depends on whether they are logged in to a Google account at the time, and whether that Google account has a public profile.

I'm not even going to try describing all the options possible as yet (or this will never get published!) but you are welcome to try the one at the top of this article to see how it works

Later on, as the button starts to be used enough to provide meaningful data for Google, potential viewers who see you site listed in Google search results will start to see counts of the number of times that other people have "plus-one'd" you in their search results.

---

Related Articles:



Putting a Share this to XXXX button onto your blog

Advantages and disadvantages of editing your template

Putting a "tweet this" button on your blog

Connecting your blog and the social networks

Understanding Google accounts