Home » Performance » Plug-in » Twitter » WordPress

Reduce Page Load Time Installing Tweetmeme Retweet Button Manually

Posted by Tanmay

Tweetmeme Retweet Button is very popular WordPress plugin to retweet your blog post. But some time the retweet button participates in moving down your site performance as it increases the page load time. The Tweetmeme  plugin is awesome but it slow downs your pages. You must know that Google has now decided to give more evidence to page load time for Search Engine ranking. So you must worry about your blog page load time.

Related: Remotely control your PC from Twitter.

This article is about to install a retweet button to WordPress blog. Read this article and apply successfully in your WordPress blog.

[ You might also like to read: How to Install Contact Page in WordPress Blog Without Any Plugin ]

The procedure

If  you have the Tweetmeme plugin installed then uninstall it and proceed as follows:

1. Create your own HTML code for the retweet button

<iframe src="http://api.tweetmeme.com/button.js?url=URL&amp;style=normal&amp;source=techtipsgeek&mp;service=bit.ly" scrolling="no" frameborder="0" width="50" height="61" ></iframe>

You can modify the code replacing the proper values.  As example:

&amp;source= Your twitter account.

&amp;service= Url shortening services:

  1. bit.ly
  2. awe.sm
  3. cli.gs
  4. digg.com
  5. is.gd
  6. tinyurl.com
  7. tr.im
  8. su.pr
  9. ow.ly
  10. twurl.nl

&amp;style= normal or compact [ for compact style use width="90" and height="20"].

2. Convert the HTML code to javascript function

Your goal is to use that code into a javascript function. So to convert the code into javascript function copy the code and paste at HTML to Javascript converter tool.

The converted javascript function looks like this

var iframeCode=""; iframeCode += "<iframe src=\"http:\/\/api.tweetmeme.com\/button.js?url=URL&amp;style=normal&amp;source=techtipsgeek&mp;service=bit.ly\" scrolling=\"no\" frameborder=\"0\" width=\"50\" height=\"61\" ><\/iframe>";

Now in the above code replace URL with "+ escape(document.URL) +"

So the new code looks like

var iframeCode=""; iframeCode += "<iframe src=\"http:\/\/api.tweetmeme.com\/button.js?url="+ escape(document.URL) +"&amp;style=normal&amp;source=techtipsgeek&mp;service=bit.ly\" scrolling=\"no\" frameborder=\"0\" width=\"50\" height=\"61\" ><\/iframe>";

3.  Use the code into the function

Now you have to create a function that contain the code. So open notepad and write the following code there

function tweetMemeButton() { // the function will do nothing if TweetMeme container doesn't exist. if (document.getElementById("rt_btn")) { // The code written ago. var iframeCode = ""; iframeCode += "<iframe src=\"http://api.tweetmeme.com/button.js?url=" + escape(document.URL) + "&amp;style=normal&amp;source=techtipsgeek&amp;service=bit.ly\" scrolling=\"no\" frameborder=\"0\" width=\"50\" height=\"61\" >"; // Insert iframe into TweetMeme container document.getElementById("rt_btn").innerHTML = iframeCode; } } window.onload = tweetMemeButton;

Now save the page as retweet.js. Don’t forget to change the Save as type to “All files”.

Note: When writing the code in the notepad you can exclude the comments of the above function.

4. Call retweet.js from your header.php file

Upload the file retweet.js in your site and call the script with its exact location. The code for calling the script is

<script  type="text/javascript" src="/retweet.js"></script>

It is recommended to write the above code between <head>…</head> tag and just after that line where the stylesheet has been called.

5. Call the tweetmeme() function from your single.php

Now add the following code into the single.php in your theme folder

<div id="rt_btn"><?php if( function_exists('tweetMemeButton') ) echo tweetMemeButton();?></div>

Note: The container “rtn_btn” is important. The function will not work without the container id.

Add some CSS rule for the container id rt_btn in the style.css template of your theme. For example you can use the following

#rt_btn{position:absolute; right:-6em;}

You are done. Check your page load time and share this article with your friends. Thanks to SEO mofo.

Related content:

  1. Add Facebook Social Plugin: Like Box to WordPress Blog
  2. Integrate and Customize Outbrain Related Links Widget in WordPress Blog
  3. Host Images of WordPress Blog in a Subdomain for Better Speed
  4. Build an Advanced Custom Archive Page for WordPress Blog
  5. How to Add Extra Widget Section In WordPress Blog
This post was written by Tanmay

Reader Comments

  1. Shabnam Sultan

    I use plugin for retweet , thanks for sharing this trick :) .

    • Tanmay

      @Shabnam Sultan,
      Plugins are just to ease our work. But some time they can mess up the site. So I always try to avoid plugin. Anyway thank you for your comment.

  2. cassandra

    Hi,
    I am building a site using Drupal and tried installing the tweetmeme plugin, which I found was limiting because I could not choose where to position the buttom. This article is very helpful; however, the tweetmeme button is only appearing on one story at a time ( and I would like for it to appear on every story that I post). I added the div to the node-story.tpl.php file, however, it is still only appearing once. Does anyone know how I can change the function in order to make the button appear on every post? Thanks!

  3. Tanmay

    @Cassandra,
    Glad to read your kind words. But frankly, I’m not so much aware of Drupal. My site platform is WordPress. But you can obviously add the Retweet button in your site posts, whatever may be the platform. I’m sorry to say that I could not help you so much. But you can read about installing the Retweet button in Drupal from here http://help.tweetmeme.com/2010/01/04/adding-tweetmeme-to-your-drupal-site/ . Hope this will help you. Any further questions are always welcome.

  4. small business grants

    found your site on del.icio.us today and really liked it.. i bookmarked it and will be back to check it out some more later

  5. Sathishkumar

    Right now I am using Digg Digg plugin. But it takes time to load. So I am going to try this one.

  6. Tanmay

    @Sathiskumar: Let us know after applying this method.

  7. Surender Sharma

    Pageload timing is one of the major part on the blog or site.Nowadays number of plugins are available for blogs to manage different sections.But too many plugins with unprofessional coding can increase page load which is not good for web owners.
    I was also suffering the problem with timing of page load on my blog when I installed some code snippets instead of plugins,timing of page load reduced immediately.

  8. Tanmay

    Surender, I’m totally agree with you. So I always avoid plugin. Thanks for sharing.

  9. TechGopal

    nice trick………

  10. Tanmay

    @TechGopal: Thanks…

  11. Danny Michel

    any way to have the suggested follow be the author of the post?

  12. Charles D

    You guys have the most useful tips! Thanks so much!