Browse By

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

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 🙂

8 thoughts on “How To: Add Official Google +1 Button to your site”

    Leave a Reply