Web Design Sydney

This is a follow up to Speed up heavy Twitter feeds

The original post was quite simply a way for you to get yours or someone elses public Twitter timeline and display it on your own site. Twitter decided to kill off basic authentication for their API preventing simple Ajaxian requests to the API. So here is the solution and it comes in the form of JSONP (cross site scripting request).

View Demo :: MooTools

Original excerpt

“Ever wondered where that missing second is in your blog or Web Sites loading time?

Chances are that it is getting eaten up by your feeds or third party API’s like Twitter, Facebook, Google and Flickr. We all love social media, if you don’t then you were probably the school captain throughout your education and don’t posses the intrinsic ability to Tweet, Blog at update your feed from that shiny Iphone at any given time of the day, rain, hail or shine. But for the rest of us, here is a simple solution……”

The New HTML

{code type=html}

{/code}
Add this to your web-site. It is the container which the JavaScript will look for to insert your Twitter posts

The MooTools Javascript

{code type=php}
var twitterUpdate = new Class({
Implements: [Options, Events],
options: {
count: 2,
user_id: ‘default_user’,
id: ‘twitter-update’
},
initialize: function(options){
this.setOptions(options);
this.userName = this.options.user_id;
this.update = $(this.options.id);
if (this.update)
this.getTweets();
},
getTweets: function() {
new Request.JSONP({
url: ‘http://twitter.com/statuses/user_timeline/’ + this.userName + ‘.json’,
data: {
count: this.options.count
},
onSuccess: function(tweets){
tweets.each(function(tweet,i) {
var tmp = this.tweetify(tweet.text)
new Element(‘li’,{
html: ‘

# ‘ + tmp + ‘

‘
}).inject(‘twitter-updates’);
}, this);
}.bind(this)
}).send();
},
/* Credit to David Walsh here */
tweetify: function(str) {
return str.replace(/(https?:\/\/\S+)/gi,’$1‘).replace(/(^|\s)@(\w+)/g,’$1@$2‘).replace(/(^|\s)#(\w+)/g,’$1#$2‘);
}
});
{/code}

Copy this into your JavaScript file. It will run on ‘domready’ to retrieve our twitter posts.

Usage

{code type=php}
window.addEvent(‘domready’,function(){
// Get 2 tweets for simon_ilett and insert them into the element with id ‘twitter-update’
new twitterUpdate({ ‘user_id’ : ‘simon_ilett’});

// Get 5 tweets for bill_henry and insert them into the element with id ‘twitter-feed’
new twitterUpdate({ ‘user_id’ : ‘bill_henry’, ‘id’ : ‘twitter-feed’, ‘count’ : 5});

});
{/code}

Options

{code type=php}
/* Default Options */
{
count: 2,
user_id: ‘default_user’,
id: ‘twitter_update’
}
{/code}

Here is a quick idea of what each option is doing.

• count – How many tweets to return as JSON objects
• default user – A default user name to return tweets for
• id – A default element for the script to place return tweets in

Updating the output

Again very simple, all you do is change the following snippet

{code type=php}
new Element(‘p’,{
html: ‘# ‘ + tweet.text + ‘ ‘
}).inject(this.update);
{/code}

This way your not locked into any over-riding HTML output, easy to change to your liking.

Required

• MooTools Core
• MooTools More – JsonP

Enjoy!