How Add a Google+1 Badge to Your Website
Google's new Google+ service is taking the development world by storm, and why shouldn't it? It's minimalistic UI, use of cutting edge web techniques, and overall usability make it Google+ one of the more impressive web applications I've seen in quite a while (I was going to say "since Google Wave", but that one didn't end up well, did it?) Google+ allows you to share photos, links, statuses, and much more; consider it a mesh between Twitter and Facebook.
Google+ will only gain more traction, meaning that the information we share will be pushed to more and more people. This presents an excellent opportunity to promote our websites, much in the way that Twitter and Facebook have. Let me show you a few different ways to add the new Google+1 badge to your website.
The Simple HTML
Adding a Google+1 badge is as easy as adding a few HTML tags:
Provide the g:plusone tag the URL to share via the HREF attribute (if none is provided, the page's canonical link will be searched for and used, otherwise the current URL is used) and the desired size of button via the size attribute. This tag should be added wherever within the page that you'd like the button to appear; the SCRIPT tag should be found at the bottom of the page. If you'd prefer not to dabble with the HTML yourself, Google provides a Google+1 button builder to do the dirty work for you. Four button sizes are currently offered.
You could also use the following HTML5 code to render your button:
Your button must have the g-plusone CSS class and data- attributes for options.
The HTML code above will render with the rest of the page, but what if you want to render a button on your own schedule? With Google's API, you to render buttons whenever you'd like:
Full API information as well as an introductory video is available here. There are a few more small customization options available so check them out if you're looking to specify language or play with custom rendering.
Don't miss out on another avenue for sharing your awesome web content with everyone! Implementing Twitter, Facebook, and Google+1 sharing buttons takes 5 minutes but the amount of traffic you can gain via these referral avenues is tremendous!