Google’s +1 Button

Home > News  > Google’s +1 Button

01 Jun Google’s +1 Button

Posted at 23:45h in News by

Yet another link sharing device this time from Google and aptly called the +1 button. For those of you that are not familiar with this sharing widget concept let’s use an example. A recent site I launched for a client recently specialises in Oxygen Bar rentals and was lacking in what I call Social Share Widgets, personally I recommend the following share options for users, in order of preference;

  1. Twitter
  2. Facebook
  3. Gmail
  4. Old School Email to a Friend

With about 200+ active social networks e.g. digg, reddit and stumbleupon – the list is more or less endless. My advice is not get bogged down with what share mechanics to use and how to them and hook into a third party service dedicated to sharing. Why I hear you ask, the answer is simple, these things are transient, remember bebo and MySpace, well in a year or twos time no one will and using them as sharing devices on your site will give a dated feel.

The solution is a simple free widget offered by addthis.com, you can grab the code from there site or if you like you can use my own hacked up version, which I have been working on for a while. AddThis offers a few of the main share options and a dropdown with every social media network, micro blogging platform or what ever they happen to be calling themselves. Check out an example of this in action below. The +1 button is my own addition, you can see the standard share buttons to the right of the +1 folder style icon.

Social Sharing Widget

Adding The Code

Before we add the code we need to look at some facebook specific meta tags, meta tags are generally there to supply header or file information. In MP3 they offer info such as title, track, artist and genre. In a web page the offer simple instructions to let search engines know what is in the site, e.g. title, description and keywords. Facebook in there infinite wisdom have there own meta tags that need to be added to help you control what gets added to a users wall when they like your page.

Facebook Meta Tags

I am using the OxyBubbles example here as it will give a live example, this code must be placed in the header of you site and allows you to customise what is shared. Without this code in place facebook makes a pretty poor effort to read the site’s meta and add content based on pre existing title and description tags. Please note that all facebook’s og or open graph code is not W3C compliant. Personally I hate adding code that messes with the mark-up, but for facebook I will make an exception.

<meta property="og:title" content="Oxygen Bars Ireland - Professional Oxygen Bars &amp; Equipment Rental from Oxy Bubbles"/>
<meta property="og:image" content="http://oxybubbles.com/gui/images/banners/oxygen-bars.png"/>
<meta property="og:url" content="http://oxybubbles.com"/>
<meta property="og:site_name" content="http://oxybubbles.com"/>
<meta property="og:description" content="Oxy Bubbles is Ireland and the UK's leading manufacturer &amp; Supplier of Oxygen Bars, Equipment &amp; Aromas. Order Now 0800 0699714 or info@oxybubbles.com"/>
<meta property="og:type" content="company"/>

Another weird quirk about facebook is its little known ‘linter’ page, the linter is a facility to allow you demo the content that facebook reads from your web site. It is also a great way of getting around facebook’s own internal cache, which can take 24+ hours to update and has been a pain for anyone developing via facebook.

Once you have your facebook meta in place head on over to developers.facebook.com/tools/lint/ and test out your newly adding og meta tags, by entering the URL of your site into the Input URL field and submitting. Ignore any admin errors or type errors, these are not really critical, you can read up more about the API in facebook’s developer section. Now that we have facebook satisfied its time to start adding a facility to share, in our case the AddThis widget code.

AddThis Widget Setup

Drop the following code within the body of your site, where ever you want the widget to appear, keep the javascript call underneath or if you like you can relocate it to the closing body tag, I normally leave it as is. For wordpress users there are some great plugins, personally I hard code all my AddThis widgets, whether CMS driven or not, the choice is yours. You will also notice some custom config settings in my code, which are not supplied by AddThis, basically they remove a lot of the overt branding that AddThis add to twitter and email share options. Please note these are hacks and may not continue to work as new versions of the widget are released.

<div class="addthis_toolbox addthis_default_style">
<a class="addthis_button_preferred_1"></a>
<a class="addthis_button_preferred_2"></a>
<a class="addthis_button_preferred_3"></a>
<a class="addthis_button_preferred_4"></a>
<a class="addthis_button_compact"></a>
<a class="addthis_counter addthis_bubble_style"></a>
</div>
<script type="text/javascript">
var addthis_share = {
 templates: { twitter: 'Oxygen Bars Ireland - Professional Oxygen Bars and Equipment Rental from Oxy Bubbles {{url}}' }
}
var addthis_config ={
 ui_email_note : 'Oxygen Bars Ireland - Professional Oxygen Bars and Equipment Rental from Oxy Bubbles'  
}
</script>
<script type="text/javascript" src="https://s7.addthis.com/js/250/addthis_widget.js#pubid=xa-4de6ba15199beaf1"></script>

AddThis also offer a tracked version of their widget code, which you can access by signing up. If you go with a tracked option you will receive code specific to you, the code below will work perfectly and removes the need to join AddThis.

Adding the Plus 1 Button Code

Add the following code to your header, just before the closing tag, this javascript makes a call to the google api to add the fucntionality to both your web site and listings on the google search index.

<script type="text/javascript" src="https://apis.google.com/js/plusone.js">{lang: 'en-GB'}</script>

Now we update our sharing widget code to add the plus one button to our previous code. You will need to add some of your own custom css to align all the buttons correctly, this is best done as inline styles until you are happy and you can move it to your own css files afterwards. One point to note and it is one that had me stumped, is that users logged in as facebook page admins, can not like pages. Facebook recently updated their system for administrating pages, allowing admins become the page. If you notice any strange changes to the graphics of your facebook like button, then try logging out of facebook or using another browser to see the normal view.

<g:plusone size="small"></g:plusone>
<div class="addthis_toolbox addthis_default_style">
<a class="addthis_button_preferred_1"></a>
<a class="addthis_button_preferred_2"></a>
<a class="addthis_button_preferred_3"></a>
<a class="addthis_button_preferred_4"></a>
<a class="addthis_button_compact"></a>
<a class="addthis_counter addthis_bubble_style"></a>
</div>
<script type="text/javascript">
var addthis_share = {
 templates: { twitter: 'Oxygen Bars Ireland - Professional Oxygen Bars and Equipment Rental from Oxy Bubbles {{url}}' }
}
var addthis_config ={
 ui_email_note : 'Oxygen Bars Ireland - Professional Oxygen Bars and Equipment Rental from Oxy Bubbles'  
}
</script>
<script type="text/javascript" src="https://s7.addthis.com/js/250/addthis_widget.js#pubid=xa-4de6ba15199beaf1"></script>

In Summary

In less than 5 minutes you have added a highly viral sharing mechanic to your site, allowing users share across hundreds of platforms and increase the reach of your site. Feel free to drop me a line if you have any difficulty setting this up on your own site or blog as always you can get me on hello@niallflynn.ie