Twitter API + jQuery JSONP How to
Here i will show you how easily fetch non authenticated Twitter API methods using ajax json callback functions with jQuery framework, I use user_timeline method as an example but you can use this sampel to fire other twitter api method as long as its needless authorization.
The TwitterAPI Class
TwitterAPI = {
Statuses: {
user_timeline:function(screen_name, count, callback){
jQuery.getJSON("http://twitter.com/statuses/user_timeline/" + screen_name + ".json?count="+count+"&cb="+Math.random()+"&callback=?", callback);
}
}
};
Why do i used nested objects? twitter classified their API methods and I personally think that its good to follow the Twitter API structures, it will help you easily spoting the methods and online documentation of each methods wherever needed. The code above create a javascript object named “TwitterAPI” which has class member ( an object ) “Statuses” which has methods user_timeline with some parameters:
- screen_name: (string) your twitter username
- count: (int) count of statuses that you need to fetch
- callback: (function) javascript function that will fired when the json result is coming
for more references about this methods parameters have a look at Twitter API Wiki
Implementation
Create the HTML DOM container element in your body/sidebar when you need the list of statuses to be appeared (eg. ID: HTML5 <aside>)
<aside></aside>
Load jquery framework
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
Put the code that we made above (API Class & Use Method Function) after jQuery load, you can either put it between or before the closing tag. Next you need to fire the API method on DOM ready with parameters as discribes above.
jQuery(document).ready(function($){
TwitterAPI.Statuses.user_timeline(your_twitter_username,5,function(json){
var content = "";
content += '<ul>';
$.each(json, function(i){
var tweet = this['text'];
var d = new Date(this['created_at']);
var date_show = d.getDate()+'/'+d.getMonth()+'/'+d.getFullYear()+' '+d.getHours()+':'+d.getMinutes();
content += '<li>' + tweet + ' (<date>'+date_show+'</date>)</li>';
});
content += '</ul>';
// the HTML DOM container that we've created before
$('aside').append(content);
});
});
Adjustment
If you follow the steps above now you will have the plain text list of your tweets, now we need to convert “mentions (@)”, “hash (#) tags” and “valid url format” into clickable links, for this purpose I taken the function below from Remy Sharp code (based on dustin diaz code).
window.ify=function(){var entities={'"':'"','&':'&','<':'<','>':'>'};return{"link":function(t){return t.replace(/[a-z]+:\/\/[a-z0-9-_]+\.[a-z0-9-_:~%&\?\/.=]+[^:\.,\)\s*$]/ig,function(m){return'<a href="'+m+'">'+((m.length>25)?m.substr(0,24)+'...':m)+'</a>';});},"at":function(t){return t.replace(/(^|[^\w]+)\@([a-zA-Z0-9_]{1,15})/g,function(m,m1,m2){return m1+'@<a href="http://twitter.com/'+m2+'">'+m2+'</a>';});},"hash":function(t){return t.replace(/(^|[^\w'"]+)\#([a-zA-Z0-9_]+)/g,function(m,m1,m2){return m1+'#<a href="http://search.twitter.com/search?q=%23'+m2+'">'+m2+'</a>';});},"clean":function(tweet){return this.hash(this.at(this.link(tweet)));;}();
just copy the code into your HTML document and we need to change the callback functions as follow:
jQuery(document).ready(function($){
TwitterAPI.Statuses.user_timeline(your_twitter_username,5,function(json){
var content = "";
content += '<ul>';
$.each(json, function(i){
var tweet = ify.clean(this['text']);
var d = new Date(this['created_at']);
var date_show = d.getDate()+'/'+d.getMonth()+'/'+d.getFullYear()+' '+d.getHours()+':'+d.getMinutes();
content += '<li>' + tweet + ' (<date>'+date_show+'</date>)</li>';
});
content += '</ul>';
$('aside').append(content);
});
});
Thats it, now you have your own widget.
Notes:
Theres limitation about the amount of request per hour, so if your pages is a high traffic page then you may need to use caching mechanism otherwise you will get error limit request exceeded from Twitter API.
Final Code
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>JQuery JSONP + Twitter API</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
TwitterAPI = {
Statuses: {
user_timeline:function(screen_name, count, callback){
jQuery.getJSON("http://twitter.com/statuses/user_timeline/" + screen_name + ".json?count="+count+"&cb="+Math.random()+"&callback=?", callback);
}
}
};
// @rem
window.ify=function(){var entities={'"':'"','&':'&','<':'<','>':'>'};return{"link":function(t){return t.replace(/[a-z]+:\/\/[a-z0-9-_]+\.[a-z0-9-_:~%&\?\/.=]+[^:\.,\)\s*$]/ig,function(m){return'<a href="'+m+'">'+((m.length>25)?m.substr(0,24)+'...':m)+'</a>';});},"at":function(t){return t.replace(/(^|[^\w]+)\@([a-zA-Z0-9_]{1,15})/g,function(m,m1,m2){return m1+'@<a href="http://twitter.com/'+m2+'">'+m2+'</a>';});},"hash":function(t){return t.replace(/(^|[^\w'"]+)\#([a-zA-Z0-9_]+)/g,function(m,m1,m2){return m1+'#<a href="http://search.twitter.com/search?q=%23'+m2+'">'+m2+'</a>';});},"clean":function(tweet){return this.hash(this.at(this.link(tweet)));;}();
</script>
</head>
<body>
<aside>
<h3>My Tweets</h3>
</aside>
<script type="text/javascript">
jQuery(document).ready(function($){
TwitterAPI.Statuses.user_timeline("chazzuka",5,function(json){
var content = "";
content += '<ul>';
$.each(json, function(i){
var tweet = ify.clean(this['text']);
var d = new Date(this['created_at']);
var date_show = d.getDate()+'/'+d.getMonth()+'/'+d.getFullYear()+' '+d.getHours()+':'+d.getMinutes();
content += '<li>' + tweet + ' (<date>'+date_show+'</date>)</li>';
});
content += '</ul>';
$('aside').append(content);
});
});
</script>
</body>
</html>
-
Advertise here with BSA Info: This is a review of a paid resource. There are lots of jQuery... Read Full Story » -
Advertise here with BSA Many of us probably heard the EU Cookie Law already and thinking about... Read Full Story » -
Advertise here with BSA Many of us probably heard the? EU Cookie Law already and thinking... Read Full Story » -
jQuery E-Books Collection (PDF) English | PDF | Ebook Collection | All In One | 561 MB... Read Full Story » -
I'm designing this ( http://omgcarlos.com/demo/omgDynami-forms/ ) dynamic form for a client... Read Full Story »
