So do you own a website and have a personal/business Twitter account and wish to implement your tweets into your website? Then no worries as this can be accomplished easily with a few simple lines of code using the famous jQuery and basic html structure for jQuery to use.
All you need is the following:
- A website either free hosted (must allow you to host your own scripts!) and let’s you edit the html code.
- A little knowledge working with API’s (Application Programming Interface’s).
- A little knowledge working with JavaScript & jQuery.
- A activated Twitter account to allow the script to grab your tweets and parse them.
- Skill level: Average (Requires a little bit more skill than a beginner).
Before we begin you can see the result to your right under “Latest Tweets”, when you refresh the page it’ll say “Loading Tweets…” then once it has the tweets are instantly displayed – now of course this all varies between people’s Internet connection, which I won’t discuss here as we all entitled to use whatever connection we feel comfortably paying for out of our own pockets!
So now you got a feel for the ‘final’ script, shall we check under the bonnet of it and see what makes this script blow you away?! I think we should – let’s dig in!
So first up is our html structure that we can place anywhere within the <body></body> tags, even a novice will know how to do this so don’t sweat just yet!
Here’s the code:
<div id="tweets"> <ul id="twitter_update_list"></ul> </div>
Now of course you can style this to fit in nicely with your site theme or blog theme with the below CSS code:
/*
Tweets
*/
div.tw
{
padding-top:9px;
padding-bottom:4px;
border-bottom:1px dotted #D0D0D0;
overflow:hidden;
font-size:11px;
color:#666;
}
div.tw_info
{
font-size:10px;
color:inherit;
font-style:italic;
}
Your probably thinking…huh?! These div tags don’t match up, well correct they don’t and you’ll find out what we’ll be styling when I pull out the JavaScript/jQuery script!
You ready for it? Was that yes I heard then great here it is for you!
//Twitter
window.onload = function() {
var twitter_user = 'InsanelyTech'; //Change this to your Twitter username!
var ajax_load = "<img class="loader" title="Loading..." src=".../images/loader.gif" alt="Loading..." /> Loading Tweets...";
var url = 'http://twitter.com/statuses/user_timeline/' + twitter_user + '.json?callback=twitterCallback2&count=6';
var script = document.createElement('script');
$("#tweets").html(ajax_load);
script.setAttribute('src', url);
document.body.appendChild(script);
}
function twitterCallback2(twitters) {
var statusHTML = [];
for (var i=0; i var username = twitters[i].user.screen_name;
var source = twitters[i].source;
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('
<div class="tw"><a href="http://twitter.com/'+username+'/statuses/'+twitters[i].id+'" target="_blank">'+status+'</a></div>
<div class="tw_info">posted <strong>'+relative_time(twitters[i].created_at)+'</strong> via <strong>'+source+'</strong></div>
');
}
document.getElementById('tweets').innerHTML = statusHTML.join('');
}
function relative_time(time_value) {
var values = time_value.split(" ");
time_value = values[1] + " " + values[2] + " " + values[5] + " " + values[3];
var parsed_date = new Date();
parsed_date.setTime(Date.parse(time_value));
var months = new Array('Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug',
'Sep', 'Oct', 'Nov', 'Dec');
var m = parsed_date.getMonth();
var postedAt = '';
postedAt = months[m];
postedAt += " "+ parsed_date.getDate();
postedAt += ","
postedAt += " "+ parsed_date.getFullYear();
return postedAt;
}
Now save this code in a file and save as “Tweets.js”, you must include the jQuery framework in your header of your site between the <head></head> tags – you can use the Google API one:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
Without this framework half of the code will not function as it relies on the jQuery framework, and the code above is suitable for WordPress if you wish to implement it into your WordPress theme!
This article is meant for tutorial purposes, but I’ve posted the above code as an example and believe it’s not the best use of the API as you could make it use a cache file that saves loading time and many other factors. So only use the above code as a starting point as from a developer perceptive I can say it has many points where it can be improved, and bundled with a lot more features – but as I said that job is for you and not me, so crack on and sooner the better you learn the Twitter API the better!!!
So I hope this was helpful, be sure to recommend this to your friends on Facebook and comment if you need any help!
