December 23rd, 2009
| Categories: twitter
Here is a quick example how to display your Twitter feed just using Javascript and jQuery. As you know, this content won’t be available for spidering so it’s more for your users rather than SEO. Ok, lets get started.
If you haven’t already, let’s include jQuery into your site. Add the following script tag into the <head> of your site:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
Next we’re going to load the data from Twitter asynchronously. The following will do that:
<script type="text/javascript">
//Your twitter name
var twitter_name = "mikeluby";
//Number of tweets you want to get back
var twitter_count = 6;
//Callback function name
var callback_name = "tweet_callback";
//Twitter search url
var twitter_search = "http://twitter.com/statuses/user_timeline";
//Return type (json or xml)
var return_type = "json";
//Adds script tags to the head/body tag
( function() {
var ts = document.createElement('script');
ts.type = 'text/javascript';
ts.async = true;
ts.src = twitter_search + "." + return_type + "?screen_name=" + twitter_name + "&count=" + twitter_count + "&callback=" + callback_name;
( document.getElementsByTagName( 'head' )[ 0 ] || document.getElementsByTagName( 'body' )[ 0 ] ).appendChild( ts );
} )();
</script>
Ok you got the data now what? Let’s parse it and display it!
<script type="text/javascript">
//Call back function
function tweet_callback( data ) {
//Loop through the data from twitter
$.each( data, function( i, tweet ) {
//Make sure the text isn't undefined
if( tweet.text != undefined ) {
//Lets do some regex magic to replace urls, hashtags, and usernames
var text = tweet.text.toString().replace( /(\b(https?|ftp|file):\/\/[-A-Z0-9+&@#\/%?=~_|!:,.;]*[-A-Z0-9+&@#\/%=~_|])/ig, '<a href="$1">$1</a>' ).replace( /(^|\s)@(\w+)/, '<a href="http://www.twitter.com/$2">@$2</a>' ).replace( /[#]+[A-Za-z0-9-_]+/ig, function(t) { var tag = t.replace("#","%23"); return t.link("http://search.twitter.com/search?q="+tag); } );
//Lets append each tweet to a ul with the id of tweet_container
$( "#tweet_container" ).append( "<li>" + text + "</li>");
}
} );
}</script>
There you go! The only limitation is if a user decides to visit the page (and make the twitter api calls) more than 100 times per hour.
For those who don’t know how to do a ul tag with an id:
<ul id="tweet_container"></ul>
Enjoy!
0 comments
