A Simple Jquery Twitter Widget « Ajithmanmu on Coldfusion,Web2.0

A Simple Jquery Twitter Widget

October 4, 2009 · 3 Comments

Twitter is familiar for all of us now…Listing twitter feeds using Jquery will be fun as well…Let’s create a Jquery – Twitter widget that can be used in our website. I have only started off with learning Jquery. So i guess this might be easy for beginners of Jquery…

Our Jquery-Twitter widget will have 3 tabs. The first tab will show the public twitter timeline (means the 20 most recent statuses from non-protected users). The next tab shows the latest 5 tweets of the user and the final tab shows the Twitter profile info of the user.

The first step is to create the Jquery widget. Later we will call the Twitter feeds using inbuilt ajax functions of Jquery.

Step 1 : Creating the Jquery Widget

Creating a Jquery Widget have been wonderfully explained in Webitect. You can refer that tutorial here. Below is my version.

Create an HTML page with the following code:-



<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<script src="js/jquery-1.3.2.min.js" type="text/javascript"></script>
</head>
<body>
<div id="sidebar">
<div>
<h5>Public</h5>
</div>
<div>
<h5>Mine</h5>
</div>
<div>
<h5>About Me</h5>
</div>
</div>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<script src="js/jquery-1.3.2.min.js" type="text/javascript"></script>
</head>
<body>
<div id="sidebar">
<div class="widget">
<h5>Public</h5>
</div>
<div class="widget">
<h5>Mine</h5>
</div>
<div class="widget">
<h5>About Me</h5>
</div>
</div>
</body>
</html>

Here we include the jquery library inside the script tag. We then create the skeletal structure of our widget. The three divs corresponds to three tabs. We give the title for each tab in the <h5> tag.

So the basic structure is ready. Now let’s use Jquery to create a tabbed appearence.


$(document).ready(function(){

var newWidget="<div class='widget-wrapper'><ul class='tab-wrapper'></ul><div class='new-widget'></div></div>";
$(".widget").hide();
$(".widget:first").before(newWidget);
$(".widget > ul").each(function(){
$(".tab-wrapper").append("<li class='tab'>"+this.id+"</li>");
$(this).appendTo(".new-widget");
 });
});

The above code runs as soon as the page runs. Here we are creating a main div (with class name widget-wrapper) that holds the Widget. Inside this main div we create a unordered list with class tab-wrapper that holds the tab name and then another div with class name new-widget that holds the content inside each tab. We create an html string for these and assigns to a variable newWidget. Next step is to hide all elements with class name widget . Now, we’ll use the first widget as a reference point to insert our tabbed container, using the jQuery before() function.

Now we will loop thru each unordered lists inside a div with class widget and then append a list with class “tab” and the text inside the <li> as the id of each <ul>. Please note that the id of each <ul> will be shown as the tab header.

So our Jquery widget is created in tabbed format with no content in it. Let’s fill each tabs with twitter content while clicking the tab header. We use separate twitter API methods to fill the content for each tab. The code is as below:-



$(".tab").click(function(){
 
var obj = this; 
 
if($(obj).text() == 'public')
{
var url ="http://twitter.com/statuses/public_timeline.json?callback=?";
}
else if($(obj).text() == 'mine')
{
var url = "http://twitter.com/status/user_timeline/ajithmanmu.json?count=5&callback=?";
}
else
{
var url = "http://twitter.com/users/show/ajithmanmu.json?callback=?";
}
 
$.getJSON(url,{obj:obj},
function(data){
   
$("#"+$(obj).text()).html('');
var mystr = '';
if($(obj).text() == 'about')
{
mystr = "<li><table><tr><td>"+"<img src='"+data.profile_image_url+"'>"+"</td><td>"+data.friends_count+" following</td><td>"+data.followers_count+" followers</td></tr>"
mystr = mystr + "<tr><td>"+data.name+"</td></tr>"
mystr = mystr + "<tr><td>"+data.description+"</td></tr>"
mystr = mystr + "<tr><td><a href='"+data.url+ "' target='_blank'>Website</a></td></tr>"
mystr = mystr + "<tr><td><img src='twitter-bird-2.png' height='60px' width='40px'/></td><td><a href='http://twitter.com/ajithmanmu'>Follow Me</a></td></tr></table></li>"
 
}
else{
 
$(data).each(function(i,tweetobj)
 {
  if(mystr == '')
  {mystr = "<li>"+"<img src='"+tweetobj.user["profile_image_url"]+"'>"+tweetobj.text+"</li>"
  }
else
  {
  mystr = mystr + "<li>"+"<img src='"+tweetobj.user["profile_image_url"]+"'>"+tweetobj.text+"</li>"
}
})}
$("#"+$(obj).text()).append(mystr);
$(".new-widget > ul").hide();
$('#'+$(obj).text()).show();
$(".tab").removeClass("active-tab");
$(obj).addClass("active-tab");
 });
});

The getJSON function calls the required twitter method and then generates the html content inside its success function.

Also make sure that on page load one tab always needs to be selected. For that just before the closing of the $(document).ready function give the following code:-


$(".tab:first").click();

So we have created a simple Jquery-Twitter widget. I hope its not very confusing for u….If you have any queries please feel free to get back in touch.

You can see a running example here.

Categories: javascript
Tagged: jquery, twitter, widget

3 responses so far ↓

Adriano // November 14, 2009 at 7:41 pm | Reply

Hello,nice job man =). Can i ask you how to add date on single tweet?
- ajithmanmu // November 15, 2009 at 3:04 pm | Reply
  
  Hi Adriano,
  Thanks. I am not sure whether you are looking for showing date created along with your tweet, but if you are then you can use created_at attribute of your tweet object. So for example tweetobj .created_at. You can get more info here http://apiwiki.twitter.com/Twitter-REST-API-Method:-statuses-user_timeline
  HTH.
Arun // December 23, 2009 at 7:40 pm | Reply

Man… you are doing a cool job here. Nice to see you turning to a web 2.0 geek…

All my best for a great new year buddy… things are on the right track for you buddy.. listen to your heart…

Ajithmanmu on Coldfusion,Web2.0