Quick Social Media buttons in a jQuery function

We’ve all seen them, the Tweet this, Like this, Share this social media buttons. They give end users an easy way to share content, whilst providing webmasters with an important promotional service for their sites.

But adding them to your sites can be a bit of a pain. You have to visit a seperate generator page for each social network button, (Twitter buttons, Facebook Like buttons and Google +1 buttons), and fill in all the same details on each one, (your site URL, page URL, text). You then have to cut and paste the three different Javascript snippets into your source code, and if you want to do this on multiple pages, you have to repeat the process to generate unique Javascript code snippets for each URL, which can be incredibly tedious and time-consuming.

This is why I wrote a jQuery function that enables you to quickly and easily add these three buttons to all your pages. It employs the lesser-known iframe method for displaying the buttons, and can be added site-wide to your templates or scripts by including a jQuery function and a couple of lines of code.

Firstly, include your copy of the jQuery library in your document’s header:

… or better still, link to the copy in Google AJAX Libraries, (as using Google’s network of datacenters instead of hosting locally will decrease latency, increase parallelism and improve caching on your site!):

Secondly, include the following jQuery function, either in your document’s header, or in a linked external javascript file. You don’t need to change anything in this script.

Thirdly, on document ready, define your variables and call the function, (place this within the document’s header):

Finally, place the buttons where you want them to appear, by adding a <div> with the ID “social-media-buttons” anywhere on your page, like so:

That’s it, social media buttons! Let me know how you get on…