Show A Twitter Status Update On A Page Using Javascript
So you want to show your Twitter status on your website? Don’t want to deal with server-side scripts? Luckily, Twitter gives you an excellent API to call that makes this pretty easy.
Because we live in crazy times, lets start at the end. The Twitter call will be made after all your code. It returns a JSON object to your code. Don’t worry if you don’t know JSON, it’s a pretty simple object and no real world knowledge of JSON is necessary to get your code up and running. The API is as follows (note: change the “planetkodiak” URL to your own user ID).
<script type="text/javascript" src="http://twitter.com/statuses/user_timeline/planetkodiak.json?callback=twitterCallback2&count=1"></script>
The important parts here are the user name and the count. The username above is planetkodiak.json. If your twitter username is “bob” then use bob.json. The count is important in that it will return your most recent posts. In this example we’re only returning the most recent.
Remember, this should come after the rest of your code as it’s expecting a certain function.
Now that we’ve started at the end, lets continue to the beginning (then we’ll finish in the middle because I can’t make it TOO easy for you). In the <head> you can add a javascript with inline code or an external file; your choice. For the example below I’ll give you the code for the inline script.
function twitterCallback2(twitters) { var statusHTML = []; for (var i=0; i<twitters.length; i++){ var username = twitters[i].user.screen_name; var statusT = 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('<span class="status">'+statusT+'</span>'); } document.getElementById('twitterStatus').innerHTML = statusHTML.join(''); }
The name of this function is important, as the JSON is expecting it. It is also ready for multiple statuses if you choose to change the amount of twitter statuses from one to many.
The idea of this function is to build up a variable with the Twitter content and replace the inner HTML of an element with the ID of “twitterStatus” with the contents of that variable. If you’ll notice the only thing we’re putting in the HTML is this:
statusHTML.push('<span class="status">'+statusT+'</span>');
The only variable we’re using is the status itself. The status is set a few lines above with this code:
var statusT = twitters[i].text;
It also includes some replacement text for URL’s. The “twitters” variable is the JSON variable that is sent to this function. It is a multi-dimensional array with a number of key values; “text” is the one with the value of the Twitter status itself, therefore the code is: twitters[i].text.
If you wanted to include your Twitter ID, you would do:
var id = twitters[i].id;
If you wanted to include your Twitter username, you would do:
var username = twitters[i].user.screen_name;
Here is a full list of key/value pairs you can use from one of my recent Twitter updates:
{ "in_reply_to_status_id":null, "contributors":null, "geo":null, "retweet_count":null, "truncated":false, "created_at":"Fri Aug 13 07:29:29 +0000 2010", "coordinates":null, "source":"web","place":null, "retweeted":false, "favorited":false, "user": { "contributors_enabled":false, "description":"Cory Fischer - Software developer at PlanetKodiak.com", "lang":"en","geo_enabled":false, "profile_use_background_image":true, "time_zone":"Alaska", "created_at":"Sat Jan 16 02:33:15 +0000 2010", "location":"Washington State", "notifications":null, "profile_background_color":"9ae4e8", "verified":false, "profile_background_image_url":"http://s.twimg.com/a/1281662294/images/themes/theme1/bg.png", "follow_request_sent":null, "following":null, "profile_text_color":"000000", "profile_background_tile":false, "profile_link_color":"0000ff", "followers_count":5, "protected":false, "profile_image_url":"http://a0.twimg.com/profile_images/864422532/logo_300x300_normal.png", "listed_count":0, "friends_count":7, "profile_sidebar_fill_color":"e0ff92", "name":"Planet Kodiak", "statuses_count":11, "screen_name":"planetkodiak", "id":105344133, "show_all_inline_media":false, "utc_offset":-32400, "favourites_count":0, "profile_sidebar_border_color":"87bc44", "url":"http://www.planetkodiak.com" }, "in_reply_to_user_id":null, "id":21045178144, "in_reply_to_screen_name":null, "text":"Ironically, the W3 (the site that heads up the web accessibility initiative) has a web accessibility issue http://bit.ly/cK7Ail" }
Now, once you’ve got your javascript function configured the way you want, you need to create an HTML element with the ID of “twitterStatus”.
The order of events is to have your twitterCallback2() function in your header, have your twitterStatus element in your body, then link to the Twitter API last. In it’s simplest form, your code should look like this:
<html> <head> <script type="text/javascript"> function twitterCallback2(twitters) { var statusHTML = []; for (var i=0; i<twitters.length; i++){ var username = twitters[i].user.screen_name; var statusT = 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('<span class="status">'+statusT+'</span>'); } document.getElementById('twitterStatus').innerHTML = statusHTML.join(''); } </script> <title>Twitter</title> </head> <body> <div id="twitterStatus"></div> <script type="text/javascript" src="http://twitter.com/statuses/user_timeline/planetkodiak.json?callback=twitterCallback2&count=1"></script> </body> </html>
