Yesterday I was Googling for better ways of inserting TweetMeme’s Retweet button in a WordPress powered site, because I wasn’t quite happy with the slow load that the <iframe> caused on my blog, accidentally I stumbled upon this article. Admittedly, there are two things I like about the author of the article in word, ONE this SEOmofo guy is very articulated, he explains everything quite reasonably and detailedly, and TWO he is the first person in the world I’ve happened to hear about, who has an attitude very common to mine. And that is, making a public statement, declaring the self-proclamation of being the smartest man alive. I like that.

Now, the method explained by SEOmofo is very adequate when the scenario implies using pure JavaScript. I, however wanted to do the same with the Facebook Like <iframe> button, and as is jQuery (as always) in my case controlling my JavaScript functionality, I had to be flexible and adapt a little.

Before you continue reading below, I recommend you take a look at SEOmofo’s article first, and then you can see what you would like the most. For me, I disliked the window.onload = functionName; since it doesn’t accept two functions at once, instead one should define an array of function in order to load both of them when the DOM is ready, and I wanted to add Facebook Like button, plus I was already using jQuery, so, well I had to change. That’s why jQuery is way more sexy than pure JavaScript.

//Insert TweetMeme Retweet & Facebook Like button,
//without slow page load lag caused from the <iframe> tag.
if ($('#fb_btn').length && $('#tw_btn').length) {
  var fb_code = "";
  var tw_code = "";

  tw_code += "<iframe src=\"http://api.tweetmeme.com/button.js?url=" + escape(document.URL) + "&amp;style=compact&amp;source=axjezzy&amp;service=bit.ly\" scrolling=\"no\" frameborder=\"0\" width=\"60\" height=\"16\" >";

  fb_code += "<iframe src=\"http://www.facebook.com/plugins/like.php?href=" + escape(document.URL) +"&amp;layout=button_count&amp;show_faces=false&amp;width=70&amp;action=like&amp;colorscheme=light&amp;height=20\" scrolling=\"no\" frameborder=\"0\" style=\"border:none; overflow:hidden; width:70px; height:20px;\" allowTransparency=\"true\" >";

  $('#fb_btn').html(fb_code);
  $('#tw_btn').html(tw_code);
}

Copy and Paste the code above within your jQuery(document).ready() (or $(function() short-tag if you use that)

jQuery(document).ready(function($){
//code goes here
}

Now what I did is pretty basic. I’ve just created two <span> tag elements and added them into my theme’s (not the theme I’m using here) single.php file (I’ve put them in the .postmeta div to be precise), one with id=”tw_btn” and the other with id=”fb_btn”. Then I’ve put together the jQuery code you saw above, and all it does is search for those elements by their id and if found it will insert the values assigned to the tw_code and fb_code variables.
In the end, when jQuery realizes that DOM is ready to be manipulated, meaning your page is loaded completely, it will insert those values and you won’t bear with no slow page load at all.

Why is better this way?
Because, iframe won’t piss your nerves when Facebook or TweetMeme servers behave bitchy or even are down at all. Eventually, you will either have the buttons, or you won’t, but the load lag won’t occur by any means.

P.S. I turned 24 today!