More and more sites are adding the various slew of social sharing buttons onto their pages and blog posts. There are several widgets like ShareThis and AddToAny that attempt to handle this, but what if you only want to add specific sharing buttons to your page? And what if you want to delay the loading of these buttons so as to not block the loading of your page?
I spent about an hour today solving this problem to implement a Digg, Facebook, and TweetMeMe combo of buttons. The first two weren’t much trouble, but the ReTweet button and its generated iFrame were causing me headache. My soluction simply added the iFrame myself, note also that in order to add javascript via jQuery, one must use a quirky workaround:
function loadSocialButtons() {
var str = '<ul>';
// add digg
str += '<li>';
str += '<script src="http://widgets.digg.com/buttons.js" type="text/javascript">// <![CDATA[';
str += '<';
str += '/script>';
str += '<a class="DiggThisButton DiggCompact"></a>';
str += '</li>';
// add facebook
str += '<li>';
str += '<a id="fb-share" name="fb_share" type="button_count" href="http://www.facebook.com/sharer.php" mce_href="http://www.facebook.com/sharer.php">Share</a>';
str += '<script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" mce_src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript">';
str += '<';
str += '/script>';
str += '</li>';
// add retweet
str += '<li>';
str += '<iframe width="90" scrolling="no" height="20" frameborder="0" src="http://api.tweetmeme.com/button.js?url=ADD_YOUR_URL&style=compact" mce_src="http://api.tweetmeme.com/button.js?url=&style=compact"></iframe>';
str += '</li>';
str += '</ul>';
$('div#social').html(str);
}
$(document).ready(function() {
setTimeout("loadSocialButtons()", 1000);
});
Make sure to add your page’s url in the TweetMeMe section, you can do this with some server side code.