Add a Google +1 Button for Your Website

Google has introduced +1 Button for webmasters with their introduction of Google+ social platform. It has introduced to increase the engagement of sites on the web via organic search results. People can recommend pages they are reading or using and all the recommendations or +1s will count to that page. Then users can see their friends' names if they have +1d or recommended an specific page. So people who see their friends' recommendations will tend to check out that site. For webmasters, it's a great opportunity to see who love or recommend their content across the web. However Google is now trying to hit upon most popular Facebook Like button by implementing this feature. Do you like to get recommended on web?

How Google +1 Button Works?

Now you have the basic idea about Google +1 button. Google +1 button adds capability of attracting new visitors, absolutely friends of users to website as people will able to see recommendations of their friends on the web. Google +1 button appears on Google search results or you can render it on your blog or website for users to recommend your content. Then followers and friends can recommend your site on the web by clicking on Google +1 button implemented on your site or via Google search results. Those recommendations will reveal across the web publicly on Google search results and convince their friends to check out specific site recommended by his friends. Also Google +1 button annotations help to reveal how many users recommended specific website or page, how many of friends recommended the same page and more recommended stories on the same blog or website.

Implementation...

If you are looking for Google +1 button to render on your own website, it's a really simple procedure. But the only disadvantage with Google +1 button is, in case if you wanna migrate to another domain, your +1s or recommendations of your pages won't be migrate to new domain or URLs. But if you implement Google +1 button to represent entire blog or website and have a Google+ page for your website, you can synchronize your +1s to your Google+ page by enabling Google+ Direct Connect. So the +1s received for your blog or website will remain even if you migrate to a new domain. If you are interested, Google +1 button code has HTML5 markup too. However the +1 button for your site in search results will be available only if you implemented +1 button on your blog or website.


Before You Go:

If you are a Blogger user and wanna add Google +1 button for your blog, now Blogger made it easy. Read How to Add Google +1 Button in Blogger.

Steps:

1. Find </body> tag in your page's HTML code and add this asynchronous Google +1 button script just before </body> tag.

<script type="text/javascript"> window.___gcfg = {lang: 'en'};
(function() 
{var po = document.createElement("script");
po.type = "text/javascript"; po.async = true;po.src = "https://apis.google.com/js/plusone.js";
var s = document.getElementsByTagName("script")[0];
s.parentNode.insertBefore(po, s);
})();</script>

Note: If you are a Blogger user and don't know how to edit your template, read How to Edit Your Blogger Template.

Color Indication Information

   - Language Code

The Default language associated with +1 button is English (US). If you prefer to use another available language, find language code from +1 Button Language Codes page and replace value here.

2. Now select your preferred button style from below and place corresponding code snippet where you wanna render your button. You can either use Standard +1 tag or HTML5-valid +1 tag.

Note: If you are a Blogger user and wanna add it as an element, you can add your button code snippet via HTML/JavaScript element. Read How to Add an External Widget or Codes to Blogger. Else if you wanna render it in a Blogger post or page, read How to Embed External Content on Your Blogger Posts or Pages.

Small

Standard +1 Tag

<g:plusone href="[URL of Your Site]" size="small" annotation="bubble"></g:plusone>

HTML5-valid +1 Tag

<div class="g-plusone" href="[URL of Your Site]" data-size="small" data-annotation="bubble"></div>

Medium

Standard +1 Tag

<g:plusone href="[URL of Your Site]" size="medium" annotation="bubble"></g:plusone>

HTML5-valid +1 Tag

<div class="g-plusone" href="[URL of Your Site]" data-size="medium" data-annotation="bubble"></div>

Standard

Standard +1 Tag

<g:plusone href="[URL of Your Site]" annotation="bubble"></g:plusone>

HTML5-valid +1 Tag

<div class="g-plusone" href="[URL of Your Site]" data-annotation="bubble"></div>

Tall

Standard +1 Tag

<g:plusone href="[URL of Your Site]" size="tall" annotation="bubble"></g:plusone>

HTML5-valid +1 Tag

<div class="g-plusone" href="[URL of Your Site]" data-size="tall" data-annotation="bubble"></div>

Color Indication Information

   - URL of Your Site

Specify your website or blog URL here.

   - Button Annotation

Here you can change annotation of your +1 button. By default, Google +1 button use bubble annotation. Additionally you can specify inline or no annotation. Select your preferred annotation and specify corresponding value here.

Note: Here annotation styles are displayed with standard size button, just for the demonstration.

Bubble Annotation

Annotation Value: bubble

No Annotation

Annotation Value: none

Inline Annotation

Annotation Value: inline

If you are using inline annotation with your +1 button, it enables you to specify the width for button and inline annotation. Just add width attribute into your +1 button code as below and specify preferred width in pixels.

Standard +1 Tag - <g:plusone width="400" ...

HTML5-valid +1 Tag - <div class="g-plusone" data-width="400" ...

More Information:

* If you implement Google +1 button to represent your entire blog or website and have a Google+ page for your website, you can synchronize your +1s to your Google+ page by enabling Google+ Direct Connect.

Enjoy :-)