Alexander Hofbauer bits, bites and beer for free

Ricardo González wrote a nice plugin for WordPress that displays the public timeline of a twitter account in your WordPress theme.

Though the plugin works I found two major problems:

• Sometimes Twitter doesn’t provide the timeline at first request.
• Embedding it in your theme significantly slows down loading of the blog.

I came up with a solution to both of them (featuring MooTools or jQuery support) using XMLHttpRequest.

Basically all it does is wait until the page is loaded and then request the tweets. If Twitter decides not to provide the timeline, the request is sent again until a configurable number of retries is reached.

There are two ways to use this plugin:

1. Configure it manually (see how-to below)
2. Use it as a widget (version two and above)

If you use it as widget, simply use the management functionality for widgets provided by WordPress. Otherwise (if your theme doesn’t support widgets for example) you can set also it up manually as I did on this blog (because I use MooTools here).

Plugin setup:

Provide a PHP-script (e.g. twitter.php in your theme folder), which can be loaded by the request:

if (!defined('DB_NAME')) {
	require_once("../../../wp-config.php");
}

echo AJAXedTwitter::messages(array(
	'username' => 'username'
));

You can see I modified the original plugin to use an array instead of parameters (I hate functions that require more than 3 parameters).

Parameters for AJAXedTwitter::messages are:

JavaScript-Setup:

You have to tell the plugin which JS file to include (this should be done in wp_config.php):

define('AJAXED_TWITTER_FRAMEWORK', 'mootools');

In this example the plugin will enqueue the twitter class for MooTools. If you don’t want to use it, you can also define AJAXED_TWITTER_FRAMEWORK to false and include our own scripts. The default value is jquery. It’s also possible to include both scripts (using ‘both’).

Please note that using the provided Twitter-class you have to add MooTools to your theme’s header before wp_head();.

Then, below wp_head(); add a script tag where you configure the twitter part:

var twitter = new Twitter('myTweets', {
  url: '<?php bloginfo('stylesheet_directory'); ?>/twitter.php',
  retries: 2,
  animate: true
});

The above JS-code will automatically replace the element “myTweets” with your public timeline (or the error message if it runs out of retries) by loading the file twitter.php in your theme’s folder (see the PHP code?).

Possible options to the constructor are:

CSS classes:

Download:

AJAXed Twitter for WordPress 0.5