Wednesday, July 27, 2011

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.   

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

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

    5   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)

    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

    Share this Article


    HTML link code:

    BB (forum) link code:

    Subscribe to Blogger-hints-and-tips

    FeedBurner will send a confirmation message. Click the verify link in it to start your subscription.

    Follow Me on Pinterest Subscribe to Blogger-HAT on Google + RSS subscription icon Follow BloggerHAT on Twitter


    1. Thanks for this article. I've now added a +1 button to my blog. I can also see how to use the technique you described to add a button to another of my sites (not a blog).

      I have a question: Is there an easy way to test the +1 button? I have clicked the +1 button in this article, and can see how it works. But presumably Google won't let me click a +1 on my own site. Can you suggest a way I can see what happens when I click my own +1 button, without offending Google (and preferably without imposing those of my friends who have a Google login).

      Thanks in advance for any suggestions, and keep up the good work.


    2. I'm afraid I don't know as yet. It appears that we can +1 our own posts (I've done a few of mine, enough to convince myself that it's consistently showing the costs). And I can see that two people (presumably you and me) have done this post.

      Personally I'm sceptical about Google's plans for "friend weighted" ratings - because Google hasn't given my any good reason to tell them who my friends or colleagues are. But I am guessing that +1 rating might eventually become part of google's search weighting criteria, which is why I've bothered with the button.

    3. Expecting a through article about the intricates of the use of g+ from you, Please. 1.What different parts of Dashboard (?) eg., notifications, circles, etc
      2. How to add in circles and the cares to take ie., in user angle
      3. Learned many from you, by realiable guidance.
      Thanking You with all Regards.

    4. Thanks for the complient, Ifinder, but I just don't have that sort of time these days. I know that Roberto's Report started a series of articles about G+, though he got sick so wasn't able to continue. Some of his work may be useful for you though:

    5. Learned a lot, starting from here (and from the recommended Sites here).
      With your kind Permission and my pleasure, my BlogList includes this Blog ' Blogger Hints and Tips'.
      Thanking You always for your compassionate sharings and with all Regards.

      1. Glad to help, and I'm delighted to be on your bloglist.