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:
<script src="/js/jquery.min.js" type="text/javascript"></script>
… 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!):
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"
type="text/javascript"></script>
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.
<script type="text/javascript">
function social_media_buttons(site,text,page) {
// First, check if 'social-media-buttons' div exists...
if ($('#social-media-buttons').length) {
// Create Twitter button
$('#social-media-buttons').append('<div id="twitter-button"></div>');
$('#twitter-button').attr("style","float: left;");
$('#twitter-button').append('<iframe id="share-twitter"></iframe>');
var twitter = $('iframe#share-twitter');
twitter.attr("title", "Twitter Tweet Button");
twitter.attr("frameBorder", "0");
twitter.attr("scrolling", "no");
twitter.attr("marginWidth", "0");
twitter.attr("marginHeight", "0");
twitter.attr("allowtransparency", "true");
twitter.attr("vspace", "0");
twitter.attr("hspace", "0");
twitter.attr("tabindex", "-1");
twitter.attr("style","width: 55px; height: 62px;");
var src = 'http://platform.twitter.com/widgets/tweet_button.html?count=vertical';
src = src + '&enableNewSizing=false&lang=en&original_referer=' + site;
src = src + '&size=m&text=' + encodeURI(text) + '&url=' + page;
twitter.attr("src", src);
// Create Google button
$('#social-media-buttons').append('<div id="google-button"></div>');
$('#google-button').attr("style","float: left; margin: 2px 8px;");
$('#google-button').append('<iframe id="share-google"></iframe>');
var google = $('iframe#share-google');
google.attr("title", "Google +1 Button");
google.attr("frameBorder", "0");
google.attr("scrolling", "no");
google.attr("marginWidth", "0");
google.attr("marginHeight", "0");
google.attr("allowtransparency", "true");
google.attr("vspace", "0");
google.attr("hspace", "0");
google.attr("tabindex", "-1");
google.attr("style","width: 50px; height: 62px;");
var src = 'https://plusone.google.com/_/+1/fastbutton?url=' + page;
src = src + '&useSharedProxy=true&rcache=true&scache=true&size=tall';
src = src + '&count=true&hl=en-US&parent=' + site;
google.attr("src", src);
// Create Facebook button
$('#social-media-buttons').append('<div id="facebook-button"></div>');
$('#facebook-button').attr("style","float: left;");
$('#facebook-button').append('<iframe id="share-facebook"></iframe>');
var facebook = $('iframe#share-facebook');
facebook.attr("title", "Facebook Like Button");
facebook.attr("frameBorder", "0");
facebook.attr("scrolling", "no");
facebook.attr("marginWidth", "0");
facebook.attr("marginHeight", "0");
facebook.attr("allowtransparency", "true");
facebook.attr("vspace", "0");
facebook.attr("hspace", "0");
facebook.attr("tabindex", "-1");
facebook.attr("style","width: 60px; height: 62px;");
var src = 'http://www.facebook.com/plugins/like.php?action=like&href=' + page;
src = src + '&layout=box_count&show_faces=false&width=450&colorscheme=light';
facebook.attr("src", src);
}
}
</script>
Thirdly, on document ready, define your variables and call the function, (place this within the document’s header):
<script type="text/javascript">
$(document).ready(function() {
var site = "http://www.yoursite.com/";
var text = "Tell everyone about how great your page is!";
// This is the url of the page you want to share
// You can either populate this manually,
// or let Javascript use the current page value:
// var page = "http://www.yoursite.com/path/to/page.html";
var page = window.location.protocol + "://" + window.location.host
+ window.location.pathname;
social_media_buttons(site,text,page);
});
</script>
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:
<div id="social-media-buttons"></div>
That’s it, social media buttons! Let me know how you get on…
I am a British web designer and developer, working for the United Nations out in Geneva, Switzerland, where I live with my lovely wife Zoe.