How to embed twitter in your site?

In the States draws the crowds since 2006, in Italy is even more growing importance that the italian language will be soon one of the avaiable languages (as in the official blog): nowadays every remarkable blog has a twitter account.

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!

Master per Web Designer Freelance
In tutti questi anni abbiamo ricevuto centinaia di richieste di approfondimento sulle numerose tematiche del web design vissuto da freelance. Le abbiamo affrontate volta per volta. Ma ci siamo resi conto che era necessario fare qualcosa di più. Ecco perché è nato One Year Together, un vero e proprio master per web designer freelance che apre finalmente le porte al mondo del lavoro.
Scopri One Year Together »
[pdf]Scarica articolo in PDF[/pdf]
Tags: , ,

The Author

Web designer, seeks the inspiration everywhere. Specialized in Wordpress theme development, he's always looking for the coolest javaScript framework, the new generation social, the most innovative design... Music? Lounge...

Author's web site | Other articles written by

Related Posts

You may be interested in the following articles:

25 comments

  1. bob
  2. Joe
  3. dave
  4. dave
  5. Froggy
  6. Nicole

Trackback e pingback

  1. How can I embed twitter into my site? | Your Inspiration Web « 01Scripts.co.cc
    [...] More here:  How can I embed twitter into my site? | Your Inspiration Web [...]
  2. uberVU - social comments
    Social comments and analytics for this post... This post was mentioned on Twitter by yiw: RT @YIW How to embed twitter …
  3. YIW Minimal: a free & clean template for a simple yet professional website | Your Inspiration Web
    [...] The first has the latest twitter messages, integrated following the explanation in Ivan’s article; in the second you can …
  4. YIW MINIMAL: Under the hood | My Blog
    [...] The first has the latest twitter messages, integrated following the explanation in Ivan’s article; in the second you can put a client …

Leave a Reply

Current month ye@r day *