Google: Adding Google Plus button to your content pages

Perhaps the best documented out of the social share buttons.

It's quite straight forward if you read the API page.

A simple example with asynchronous loading would be:

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

That's it!

If you want to configure it, the options are listed on the page under Configuration.

Detecting Plus One Click Event

This is incredibly easy compared to Facebook's API!

<g:plusone callback="googleplus_callback"></g:plusone>

Now in your Javascript function, just check if the state is "on".

function googleplus_callback(response) {
alert(response['state'] == 'on');
}

Ah, so developer friendly!

See my other posts about sharing buttons for Facebook and Twitter.

Sources

• Google+ Platform: +1 Button

Facebook: Add "like" button to your content pages

Bloody hell this was more cryptic than it should have been. You have two options.

Easy way

First option is the deprecated (but still used on YouTube) "share" button.

You simply just create a link in a new window like:

<a rel="nofollow" href=http://www.facebook.com/sharer.php?u=encodedURL&t=encodedTitle">Facebook</a>

It's easy because you can style it whatever way you want.

Drawback is you can't display the number of shares/likes.

Hard way

OK, don't say I didn't warn you.

• Sign up for a Facebook developers account.
• Once you're done, click on "Create new App" (umm yeah "App", right... wtf?)
• When you fill in the "App Domain", be sure to tick "Website" below and fill that in too. It's stupid, I know. Otherwise you'll get an error:

Error
You have specified an App Domain but have not specified a Site URL or a Mobile Web URL

thatawesomeshirt.com must be derived from your Site URL or your Mobile Web URL.

• Now in your page HTML, add "og" and "fb" namespaces:

<html
lang="en" xml:lang="en"
xmlns="http://www.w3.org/1999/xhtml"
xmlns:og="http://ogp.me/ns#"
xmlns:fb="http://www.facebook.com/2008/fbml">

• In the HTML <head> tag, add in the following properties:

<meta property="og:title" content="That Awesome Shirt!" />
<meta property="og:description" content="The best shirts from a collection of online stores rolled into one site for you to browse, add to your wishlist and rate." />
<meta property="og:image" content="http://www.thatawesomeshirt.com/media/images/logo75.png"/>
<meta property="og:url" content="http://www.thatawesomeshirt.com/ "/>
<meta property="og:type" content="blog" />
<meta property="og:site_name" content="That Awesome Shirt" />
<meta property="fb:admins" content="00000xxx" />
<meta property="fb:app_id" content="00000xxx" />

• Remember to change fb:admins and fb:app_id to your IDs. It's on the app dashboard.
• Man, what a face full of crap. Good thing is the OpenGraph meta tags seem to be used by a bunch of other services now so the hard work won't be only for Facebook.
• Bad news is when you realise all those tags change dynamically on each page...
• Finally, to add the "Like" button... go to the Like Button page and generate the HTML.
• Paste the script at the top of the <body> tag.
• Paste the <div> where you want the share button to appear.
• Finally, you're done.

Extra reading

If you want to detect when the user has Liked or Un-Liked your content, you can modify the script a little.

<script type="text/javascript">
function fb_callback(add_or_remove) {
alert(add_or_remove);
}

// This allows you to detect when the button is clicked.
window.fbAsyncInit = function() {
FB.Event.subscribe('edge.create', function(response) {
fb_callback(true);
});

FB.Event.subscribe('edge.remove', function(response) {
fb_callback(false);
});
};

// Normal loading of the SDK asynchronously below
(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/all.js#xfbml=1&appId=00000xxx";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>

Facebook, making you do things the hard way.

See my other posts about sharing buttons for Twitter and GooglePlus.

Sources

• Facebook: JavaScript SDK
• Facebook: FB.Event.subscribe
• Facebook: Like Button

Twitter: Add share/tweet button on your content pages

Visit the Twitter Buttons page to generate your own.

To customise it a bit, you'll have to get your hands a little dirty.

Taking this for example:

<a href="https://twitter.com/share" class="twitter-share-button" data-url="http://twigstechtips.blogspot.com" data-text="I found this stupid post" data-via="myawesomeshirt" data-hashtags="shirts">Tweet</a>

<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>

The first line is where your options go. A simple <a> tag which the Twitter API detects and replaces with a button.

If you don't declare a certain variable, it will simply revert to the default.

• data-url is the URL you wish to share. By default it will share the current page URL.
• data-text is the text which will be tweeted along with the link. By default, this is the page title.
• data-via is who you retweeted from I suppose? I set this to the site's twitter account. Default is empty.
• data-hashtags are the hashtags you want to append to the end of the tweet.

The second line asynchronously loads the Twitter API script. This is important because it won't halt the rest of your page from loading.

See my other posts about sharing buttons for Facebook and GooglePlus.

Disable annoying social media bars on websites

I hate these annoying little social bars that try to be helpful but just aren't. They take up my vertical real-estate and don't really do much for me.

Not sure what I'm talking about?

This shit!

If you're using Firefox, make sure you've got AdBlock Plus installed first. It also comes in Chrome flavour if that's what you're using.

You'll soon wonder how on earth you've made it this far on the internet without it.

Once you've got it installed, go to "Tools" > "AdBlock Plus Preferences".

It'll give you a big scary list. Go to "Filters" > "Add filter".

Now prepare to do some typing. The following are a list of annoying social media bars that I've blocked. I'll occasionally come back and add more bars to this list.

• http://*.wibiya.com (Wibiya)
• http://*.hellobar.com (HelloBar)
• http://*.skysa.com (Skysa)
• http://cim.meebo.com (Meebo)
• ##div#meebo.meebo-00 (Also needed for Meebo)
• http://*.complex.com (Complex Media Network)
• ||meebo.com^ (Post-Google acquisition Meebo)
• ||meebocdn.net^
  

Press OK to save. Refresh the page and the bars should be gone!

If you find any others, paste a link to a page using it and I'll update the post.

*update 16/03/2011* Added Complex Media Network

*update 06/02/2013* Added Post-Google acquisition Meebo