08/15/2011

Google’s +1 Button In Detail

by Cyle
Categories: tools, Web Development
Tags: , , , ,
Comments: Leave a Comment

A few months ago Google released its +1 button. It is much like Facebook’s “like” button. The button influences search results, mainly on your friends. If one of your friends +1’ed a site then you will likely see it in Google search results as “John Doe +1’ed page” and it will be a higher ranked result. I’ll go into more detail about it and its functions below.

The Basics

The easiest way to add the +1 button to your pages is to grab the code from Google’s plusone-button Page. Basically there are two ways of adding it:

1. Basic Source Code (slower)

Below is the basic way of using the +1 button. The script must be loaded once it is encountered in the page, and the rest of the page may not load until the script is done loading.

<script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>
<g:plusone></g:plusone>

The <g:plusone></g:plusone> Is the button itself. The script can be placed anywhere on the page before the button.

2. Asynchronous Source Code (faster)

Using the asynchronous code snippet is much faster because the +1 button and script will load parallel to the page, meaning the page does not have to wait for the script to load to move to the next item. It is much faster and usually does not increase your page load time.

<g:plusone></g:plusone>
<script type="text/javascript">
  (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>

Like above, <g:plusone></g:plusone> is the button and the rest is the script for the button. The script here needs to be added once after the last +1 button. Closer the better.

 

Appearance

We can change the appearance of the +1 button with size= parameter. Below are the available options.


If you want to use the standard size then you do not need to specify the size because it is default. If you want anything other than standard you must use: <g:plusone size="small"></g:plusone>, <g:plusone size="medium"></g:plusone>, or <g:plusone size="tall"></g:plusone>.

 

Visual Counter

The +1 button also has a parameter that allows us to turn off the counter that is above or next to the +1 button. The parameter to use is the count=. If the parameter is set to “true” then the counter is visible, and if set to “false” the counter is hidden.
Example:
<g:plusone></g:plusone> == and,
<g:plusone count="false"></g:plusone> == .

 

Who Gets The +1?

If not specified, the page that the button is found on will get the +1. Sometimes this is not what we want. For example, if we are on a page that has alot of parameters passed through the URL address like http://example.com/page.php?p=4&name=john&rel=blah&etc=andsoforth then we do not want that page to be +1 because it will probably not be found in the search results that way. Instead we need to specify to only use a URL that will be found or accessed by the search results.
To specify the address we want to give credit when the +1 button is clicked we use the href= parameter.
Example:
<g:plusone count="false"></g:plusone> == and,
<g:plusone href="http://njarb.com" count="false"></g:plusone> == .
Notice how they look identical, but one gives credit to the address of the page it is on and the other gives credit to the page we specified.

 

The Callback Function

The callback= parameter is a pretty neat little trick that we can use to execute a JavaScript function when the button is clicked. We can link it with Google Analytics or show a thank you message. However, Google only allows certain things to be done when clicked. I will explain this later…

Basic Callback Example

The simple example below alerts the web user when the button is clicked.

<script type="text/javascript">
 function plusoneclicked(plusone) {	
   window.alert('+1 Triggered, State=' + plusone.state);
}
</script>
<script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>
<g:plusone callback="plusoneclicked"></g:plusone>


Result:
Go ahead and try it out! (If this page didn’t help you, you can always click it again to “un +1” it.)
Notice how the only variable passed to the function is either “on” or “off”.

Tracking with Google Analytics Example

Another useful way this callback parameter can be used is to link it with Google Analytics. If your pages are being tracked by Analytics then you can add this code to your page and track when, who, where, and what pages your +1 buttons are being clicked on.

<script type="text/javascript">
  function plusoneclicked( obj ) {
    _gaq.push(['_trackEvent','plusone',obj.state]);
  }
</script>
<g:plusone callback="plusoneclicked"></g:plusone>

This can help out a lot if you specify a different URL for the button to give credit to because you can see what page the button was clicked on and what page got credit.

Unlocking Content With +1

If you unlock content or do anything similar to it then you need to be extremely careful. Google doesn’t go easy on people who don’t follow their rules. Google says it is OK to use the +1 button to unlock content on a web page, BUT you cannot use the +1 button to enable content that must be paid for, provide a prize for clicking, offer monies or services, etc.
Here is exactly what Google has to say about it:

“Publishers should not promote prizes, monies, or monetary equivalents in exchange for +1 Button clicks.”

“Publishers can direct users to the +1 Button to enable content and functionality for users and their social connections.”

To view the full Policy visit Google’s Plusone Policy Page (its very short).

Unlocking Content Example:

<script type="text/javascript">
  function plusoneclicked( obj ) {
    document.getElementById('plusonecontent').innerHTML = 'Special content can go here.';
  }
</script>
<span id='plusonecontent'>+1 us to view the rest! <g:plusone callback="plusoneclicked"></g:plusone></span>
Sorry To See You Go Callback

If you want to get real fancy and you really care about your +1’s then you can add a javascript function that asks a user why they “un +1ed” your page. When they click on it you can open a new page asking them to reconsider or simple ask what made them “un +1” your page. Yes, it can be annoying to some, but maybe they didn’t mean to do it, or maybe you offended someone and you need to know.

Callback Conclusion

To sum the callback= parameter up I would say it is the most useful part of the +1 button, but also the most dangerous. If used the wrong way, it can get your site removed from Google search results. Be careful not to make someone click on the +1 button, try to encourage them to click on it.

+1 Conclusion

Overall the +1 button can really help your site increase traffic through search results. Not having the button won’t hurt your site, but why wouldn’t you want to add it when it can help so much!? You can add it pretty much anywhere you want, but putting it where it can be found or almost always seen is best. Just remember if you use the callback functions to follow Google’s Policy on how you use it. If this page helped you and you haven’t +1’ed us yet, please consider doing so. Leave a comment below and I just may return the favor on your site.


Leave a Reply

Your email address will not be published. Required fields are marked *



user-avatar
Today is Wednesday
05/24/2017