28 Sep 2011

How to add Google +1 button on Websites and Blogs

Now a days, while coming across many of the websites or blogs, you might have seen the Google's plus One +1 button in any corner of the web page. Well for those who do no know, for them : actually it started with the launch of the Google's Beta Project on Google Plus, the social networking project of Google similar to
that of Facebook. Before launching the Google Plus beta (P.S: now Google Plus has been launched completely), Google started a button called Google Plus button solely for collecting data about some of the web pages or articles in the blogs to rank them on the Google's search results on the basis of recommendation of the users as one of its 100 parameters used for ranking the contents on the search results page. Well this post is not for the history of Google Plus and I will not bore you telling the long story.

Now we shall focus on the title of topic that is How to add a Google Plus +1 button in websites or web pages. To add the Google Plus button follow the steps listed below

  1. Go to the template settings of your website of web blog. If you are working on a blog which is supported on blogger platform, then you might consider going to the template section of the Blogger Panel (as per new interface of blogger).
  2. Now in the template, click on "Edit Template HTML".
  3. When you get the HTML codes of your blog's template, then search for the </head> tag. Now place the given code snippet before the </head> tag.
    <script type="text/javascript" src="http://apis.google.com/js/plusone.js"></script>
  4. Now the code for including the Google Plus button's javascript file which is hosted at Google's server has been included in the template.
  5. Now when you are done with the above step, then locate the position, where you want the Google Plus One button to appear in the web page when the users will view it. At that position, place the code snippet given below.
    <g:plusone></g:plusone>
  6. Now save your template and refresh your web page. You will be able to view your web page with Google Plus button in it.

Please note that the code given above is for standard size Google Plus button. To make changes in the size, you can make changes in the second code. For example:

<g:plusone size="tall"></g:plusone> for bigger button
<g:plusone size="small"></g:plusone> for smaller button, etc.

The available formats for the Plus One button are small, medium, standard and tall.
Related Post :


1 comment:

  1. Anonymous12/30/2012

    Gгеat artіcle! We аre
    linking to this gгeat cοntent on οur sіte.
    Κeeρ uρ the great writing.
    my page: computer coupons online

    ReplyDelete

If you liked this blog then Join me at:
Facebook
Twitter
RSS