How to Add Google +1 to your site

23 October 2011

Google launched enhanced version of its +1 button for search results and publishers.  Two months, since the Google +1 was first heard, Google launched the Google +1 button for website owners to allow the visitors the opportunity to Like or +1 the content of the page.

It was a pleasant surprise to see the Google +1 notification with the code snippet in the Google Adsense account.

 

 

The customized script can be generated from the official Google +1 page.

 

 

How to Add Google +1

 

You can add Google +1 to your site in 4 easy steps:

 

  1. Include the following JavaScript file in the <head> tag area of the html of your webpage.
  2. 1 <script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>
  3. Above script is a must for adding the Google +1 button. Now, you are ready to actually place the +1 button on your page area. The +1 button can be displayed by adding the following shortcode in the suitable page area.
  4. 1 <g:plusone></g:plusone>
  5. The button can be customized with various options like the size attribute which can accept values small, large or tall. By default, the size is standard.
  6. 1 <g:plusone size=”tall”></g:plusone>
  7. Alongwith the button, the +1 count can be displayed by adding the attribute count with value equal to true.

 

1 <g:plusone size=”tall” count=”true”></g:plusone>

 

The HTML5 equivalent code of the above code is

 

1 <div class="g-plusone" data-size="tall" data-count="true"></div>

 

Adding the +1 Target URL

 

The most important part in telling Google the URL which is being +1’d is the target attribute. The URL can either be explicitly set as

 

1

]<g:plusone size=”tall” count=”true” href=”http://php.refulz.com”></g:plusone>

 

Else Google tries to read the target URL in two different ways in order of listing:

 

  1. The value of the link rel=”canonical” tag explicitly defined in the <head> area.
  2. 1 <link rel="canonical" href="http://php.refulz.com">
  3. The URL of the page as defined in document.location.href. This is the last and least preferred option. So, should be avoided.

 

Adding the +1 button in WordPress

 

As mentioned, adding the script is mandatory to include the Google +1. The button can displayed within a page area by adding the script

 

1

<g:plusone size=”tall” count=”true” href="<?php get_permalink(); ?>"></g:plusone>

 

The noticeable difference is the value for href attribute. The the_permalink() is the WordPress function is display the current page URL.

Multiple +1 buttons can be displayed on one page by defining different values in the href attributes. For complete documentation, please refer the official documentation page.

 

 


Sumber : Jasa Pembuatan Website dan Sistem Informasi http://klatenweb.com
Selengkapnya : http://klatenweb.com/read/2011/10/23/686/How-to-Add-Google-+1-to-your-site.html