close

How To: Add Official Google +1 Button to your site

google plus one button sizes

Ok guys. Get ready for the yet another social war! Yes, you heard it right 🙂

Just before a day i.e. yesterday  Twitter  released their official Follow Button and  are trying their best to expand their social analytics. And there were rumors about Google’s next big release +1 Button getting released today.

But the rumor turned fact and Google has launched their social button +1 and coming back strongly on social space.

Google started rolling out the +1 button in March, you have been able to recommend content to your friends and contacts directly from Google search results and ads. It was under experiment tag and +1 button was not available for the social space!

In Google I/O 2011, Google speakers started spreading a word about Google’s +1 Button. They said, Google +1 button is weeks away from going online. And just after 2 weeks, Google released +1 button which can now be integrated and added to any website.

How To Add +1 Button?

Follow the below steps to add official Google +1 Button :

  1. Place this piece of code in your head tag or just before you close the body tag. WordPress users can add this code in header.php file.
    <script src="http://apis.google.com/js/plusone.js" type="text/javascript"><!--mce:0--></script>
  2.  

  3. As you can  see below is the screenshot of various available sizes of the Google +1 Button
    1. Small (15px) | Code:
      <g:plusone size="small"></g:plusone>
      
    2. Medium (20px) | Code:
      <g:plusone size="medium"></g:plusone>
    3. Standard (24px) | Code:
      <g:plusone></g:plusone>
    4. Tall (60px) | Code:
      <g:plusone size="tall"></g:plusone>
  4. Note : Place this piece of code where you want the +1 button to render. WordPress users can add this code in single.php file.

     

For webmasters, Google has added a link where you can directly go and grab the button in couple of seconds.

The reason why we mentioned the above code is for English version is, +1 button is available is 44 different languages. To get the particular language based +1 button Google has added small additional code to script like below:

<script src="http://apis.google.com/js/plusone.js" type="text/javascript">// <![CDATA[
{lang: 'en-GB'}
// ]]></script>

For non-webmasters, Google started rolling out +1 button for English-language searches on Google.com. If you want to +1 search results and search ads earlier, you can opt in through Google’s experimental search site. To see recommendations from your friends and contacts in Google search, make sure you’re signed into your Google Account.

Google has added +1 button mainly to share the content you read will be suggested to your friend who is connected through Google Account. +1 is as simple on the rest of the web as it is on Google search.

With a single click you can recommend that anything you found interesting to friends, contacts and the rest of the world. The next time your connections search, they could see your +1’s directly in their search results, helping them find your recommendations when they’re most useful.

Ok! That’s it. You have a +1 button with you now. Help Google is social space as they have already failed with Orkut and Google Buzz!

Please Share your thoughts and lets discuss above the negative and positive face of the +1 Button! Cheers 🙂

Tags: , , , , , , , , , , , , , , , ,

Show 8 Comments

8 Comments

  • avatar image
    stepapa
    June 5, 2011 Reply

    Hi there.Thanks for the information.I have been reading tech18 from the past few weeks and I can say that there is always something new to learn from your blogs.

  • avatar image
    sunil
    June 19, 2011 Reply

    @stepapa We are glad that, you're always learning something from our blog :) Recently we've changed our Theme and we would like to know your feedback ? Thanks for commenting =)

  • avatar image
    reditonline
    June 20, 2011 Reply

    Thanks for the tips on +1 I am wondering if others think this is revolutionary, or just an afterthought from Google, and a bit late in the process to be important?

  • avatar image
    Raphy
    July 6, 2011 Reply

    Hi, when I write this: "{lang: 'en-GB'}" into a CDATA Tag the Button doesn't work? Does anybody what the reason is? Raphy

  • avatar image
    ashutosh nigam
    September 20, 2011 Reply

    from 3-4 days i am searching for this type of information of how to add google+ button in my site...thanks for sharing

    • avatar image
      Sunil Jain
      September 21, 2011 Reply

      I am glad that this helped you buddy :)

  • avatar image
    ashutosh nigam
    September 20, 2011 Reply

    from 3-4 days i am searching for this type of information of how to add google+ button in my site...thanks for sharing

    • avatar image
      Sunil Jain
      September 21, 2011 Reply

      I am glad that this helped you buddy :)

Leave a Reply

Story Page