Google+ API Basics: Adding the Google +1 Button To a Web Page

By Scott Clark

Earlier this year, Google+ opened its doors to users who had already received invitations, and quickly gained 10 million users within the first two weeks, which was impressive for a social network that isn't even open to the public. As of October of 2011, Google+ is said to have somewhere between 40 and 50 million users, and it is still not open to the public. Once the doors are open wide, IMO it will likely grow to 200 million users within a month. The new social network offers users most of the services that rival Facebook offers, such as games, chat, the ability to create special "lists" or in Google+'s terminology, "circles" of friends, along with a feed wall, images, videos and more.

Last month Google announced the release of the initial Google+ API, which is currently limited to providing read-only access to public data. To access to the Google+ API, developers will need to have either an OAuth 2.0 token or an API key. Additional restrictions include a courtesy usage quota, which provides enough access for developers to preview the API and begin planning their Google+ application.

Like the Facebook API, many of the Google+ API calls require app users to grant an application permission to access their own data (even Android apps do that--such a mechanism allows users to control their own privacy and security for their profile page, info on their wall, their friend lists, etc.). The OAuth 2.0 protocol is used by the Google+ API to enable authorized apps to access each user's data.

Using the Google+ API: Adding the Google+ +1 Button

While the Google+ API can be complicated, with many restrictions and requirements, one part of Google+ (though not technically part of the Google+ API) can be added by even beginning web developers: the Google +1 button. Adding the basic button to any web page is very simple, but by using the Google JavaScript API and specific parameters, you can customize the +1 button to your liking, and can do things that range from changing the size of the button, to more advanced techniques such as enhancing the page's loading time.

Google +1

Before we get into some specifics here, you may want to take a look at Google's +1 Button Configurator, shown above, which enables developers to use a simple web form interface to create and configure a Gooogle +1 button for their pages. It also includes the option to use more advanced customization options, providing the developer with all the options that are available by working directly within the code manually.

The Simple Google +1 Code

Adding a +1 button to a web page is extremely simple. First you have to add the PlusOne JavaScript include to the page. Google recommends adding it right before the closing BODY tag in your HTML page for the fastest pageloading times, but it can be placed anywhere on the page, either before or after the actual button code. Here's what the JavaScript include looks like:

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

Once you have added it, you can add the actual button code anywhere on your page, like this:

<g:plusone></g:plusone>

More Advanced Customization

The customization features that are available in the Google +1 Button Configurator are also available for the developer when the button is manually configured. For instance, you have the option of creating a +1 tag that is HTML5-compliant. To do so, the class attribute has to be set to g-plusone, and all button attributes have to be prefixed with data-. Here is an example of how the HTML5-compliant code would appear:

<div class="g-plusone" data-size="tall" ... ></div>

Other options include the use of asynchronous inclusion when loading the necessary JavaScript as the page is loading. By using the asynchronous inclusion option, the web page is able to continue loading at the same time the browser downloads the +1 JavaScript file. This means the page will load faster, which is good for users and SEO purposes. Here's the JavaScript code you would use for that option:

<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>

Google recommends that the asynchronous code be placed directly below the last Google +1 button tag for the fastest loading experience.

Conclusion

This isn't really the conclusion, but rather is just the beginning with what you can do with the Google +1 button, and even more so when it comes to the Google+ API. We'll continue this series with even more about the Google+ API as more info is released.



Make a Comment

Loading Comments...

  • Web Development Newsletter Signup

    Invalid email
    You have successfuly registered to our newsletter.
  •  
  •  
  •  
Thanks for your registration, follow us on our social networks to keep up-to-date