Google+ API Basics: Adding the Google +1 Button To a Web Page
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
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
Once you have added it, you can add the actual button code anywhere on your page, like this:
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>
Google recommends that the asynchronous code be placed directly below the last Google +1 button tag for the fastest loading experience.
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.