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&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&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!
*****************************************
L'immagine principale dell'articolo è stata fornita da @Fotolia
The Author
Related Posts
You may be interested in the following articles:
25 comments
Trackback e pingback
-
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 [...] -
uberVU - social comments
Social comments and analytics for this post... This post was mentioned on Twitter by yiw: RT @YIW How to embed twitter ... -
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 ... -
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 ...
I want to quote your post in my blog. It can?
And you et an account on Twitter?
Hi purenoise,
yes you can quote this article on your site. We appreciated if you inserted a link to our blog in the article!
YourInspirationWeb has a twitter account and its authors have their twitter personal accounts too.
So if I understood your question, yes we are on Twitter!
Bye!
Sorry, but mistake in post
>>>The first one:
>>>
>>>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:
>>>
>>>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).
The second one will be
Or am i not right?
Sorry, but mistake in post
————–
The first one:
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:
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).
————
The second one will be
Or am i not right?
Sorry, but mistake in post
————–
The first one: RIGHT
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: WRONG (the same)
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).
————
The second one will be ANOTHER
Or am i not right?
hi Alex,
thanks for reporting our mistake.
Now, it’s okay!
See you soon
This is very useful, thank you so much!
You’re welcome, Hillary!
I can’t seem to get this to work.
Could you maybe include a demo ?
Great article!
I personally use a PHP based class to link to and get twitter results. That way it will work if JavaScript is not supported in the user’s browser.
Hi,
If I want that to show the retweets, how can I do this?
The Code is Working. Thanks for Sharing.
waow, cool.
doesnt work
doesnt work
perhaps an example please
obviously like your web site but you have to check the spelling on several of your posts. Several of them are rife with spelling problems and I find it very troublesome to tell the truth nevertheless I’ll surely come back again.
It is possible to embed twitter on a website with this nice plugin JQuery plugin http://minitwitter.webdevdesigner.com
thanks you for helpful info
Actually, to be frank, this is the easiest tutorial on how to add twitter into a website, that I had come across. I had visited a lot of videos and tutorials earlier on this topic but did not find much.
This stopped working on both my webpages. It worked fine for a year or so. Somewhere else I read that the link (or so) became invalid. How can I get this working again?
Thanks
It’s really a nice and helpful piece of info. I’m happy that you shared
this useful info with us. Please keep us informed like this.
Thank you for sharing.
bedroom