How to embed twitter in your site?

14/11/2011 tweets

In internet there are dozens of plugins (not easy to mod) that let you embed your tweets in your web site, by the way today we are going to use the APIs given by Twitter: they are HTML and Javascript based.

In this way we’ll embed our last tweets into our web page.

What about the APIs?

By default Twitter APIs consist in a simple div – to be added to your HTML code – containing an unordered list (<ul></ul) where all your tweets will be loaded through a javascript function.

Here there’s the code to insert into your page:

?

<div>
<ul id="witter_update_list"></ul>
</div>

?

<script src="http://twitter.com/javascripts/blogger.js"></script>
<script src="http://twitter.com/statuses/user_timeline/ID.json?callback=twitterCallback&amp;count=5" type="text/javascript"></script>

How you can see, after the unordered list with the id “twitter_update_list”, we call the two javascript files stored in the Twitter’s servers.

The first one:

?

<script src="http://twitter.com/javascripts/blogger.js"></script>

cares about the creation of a list of tweets coming from your account and inserts them into the “twitter_update_list”, with the time of creation.

The second one:

?

<script src="http://twitter.com/statuses/user_timeline/ID.json?callback=twitterCallback&amp;count=5" type="text/javascript"></script>

communicates to the main server the number of tweets to show into your web page (in this case the counter is set to 5, so your 5 last tweets will be shown).

You’ll have to erase ID and insert your twitter account’s id.

With some small CSS changes you will be able to give a style to this list and here you are: your twitter account is completely embedded into your site. Easy!

And if you would customize the aspect of your tweets?

Twitter APIs customization

First of all you can insert an image for each tweet, to create an unique list!

Here (the link of the first of the two javascripts), you will find the source code of the script: save its content into a javascript file called “twitter.js”.

In your HTML file replace the path of the first javascript files with your “twitter.js” one.

Let’s take a look:

?

function twitterCallback2(twitters) {
var statusHTML = [];
for (var i=0; i<twitters.length; i++){
var username = twitters[i].user.screen_name;
var status = twitters[i].text.replace(/((https?|s?ftp|ssh)\:\/\/[^"\s\<\>]*[^.,;'">\:\s\<\>\)\]\!])/g, function(url) {
return '<a href="'+url+'">'+url+'</a>';
}).replace(/\B@([_a-z0-9]+)/ig, function(reply) {
return  reply.charAt(0)+'<a href="http://twitter.com/'+reply.substring(1)+'">'+reply.substring(1)+'</a>';
});
statusHTML.push('<li><span>'+status+'</span> <a style="font-size:85%" href="http://twitter.com/'+username+'/statuses/'+twitters[i].id+'">'+relative_time(twitters[i].created_at)+'</a></li>');
}
document.getElementById('twitter_update_list').innerHTML = statusHTML.join('');
}

For each one of your tweets the function twitterCallback2 takes its content and inserts it into the “twitter_update_list” with a link to your original tweet and with the time of creation.

If we want to reach this goal, the code to customize is here:

?

statusHTML.push('<li><span>'+status+'</span> <a style="font-size:85%" href="/http://twitter.com/'+username+'/statuses/'+twitters[i].id+'">' +relative_time(twitters[i].created_at)+'</a></li>');

In this string you can add HTML tags, images or javascript lines.

For example, trying to add the classic twitter-bird image before the tweet:

?

statusHTML.push('<li><img src="/twitter-bird.jpg" /><span>'+status+'</span> <a style="font-size:85%" href="/http://twitter.com/'+username+'/statuses/'+twitters[i].id+'">' +relative_time(twitters[i].created_at)+'</a></li>');

Modding the CSS, the result is this.

Now check this line:

?

href="http://twitter.com/'+username+'/statuses/'+twitters[i].id+'">' +relative_time(twitters[i].created_at)+'</a></li>');

“+username+” refers to your Twitter username, so you can use this variable in this way:

?

statusHTML.push('<li><h3>'+username+' dice:</h3>'<span>'+status+'</span> <a style="font-size:85%" href="http://twitter.com/'+username+'/statuses/'+twitters[i].id+'">' +relative_time(twitters[i].created_at)+'</a></li>');

just playing with the CSS and the result is this.

Twitter and Facebook connection…

If you have got a fan page on facebook at the link www.facebook.com/twitter you’ll be able to connect your twitter account to your facebook fan page: all the things written on facebook will be automatically sent to twitter and, obviously will be viewed into your site, because the script recognizes it as a tweet.

Facebook sends not only what you write but the events too: you can choose from the settings of facebook which infos have to be sent to twitter.

Conclusions

The mods you can do thanks to this script are a lot: your tweets can be at the same moment just a detail of your page, or can be the most important element of it.

Details make a web site beautiful, this tweets could be the icing on the cake of your work.

You only have to free your imagination!

Blog - Daily Thoughts