A jQuery Twitter Ticker

22 January 2010 Friday

This application was viewed 1715 times

0

A jQuery Twitter Ticker

Introduction

In this tutorial we are going to create a pure jQuery & CSS twitter ticker which utilizes Twitter’s Search API. It will show your or your friends’ latest tweets, and will not require any server side code or databases. As a result, the ticker will be easily included into any web page and easily modified to your likings.

View The DEMO

Step 1 – XHTML

The XHTML part is quite straightforward.

demo.html

<div id="twitter-ticker"> 
<!-- Twitter container, hidden by CSS and shown if JS is present -->
  
    <div id="top-bar"> 
    <!-- This contains the title and icon -->
  
    <div id="twitIcon"><img src="img/twitter_64.png" width="64" height="64" alt="Twitter icon" /></div> 
    <!-- The twitter icon -->
  
    <h2 class="tut">My tweets</h2> 
    <!-- Title -->
  
    </div> 
  
    <div id="tweet-container"><img id="loading" src="img/loading.gif" width="16" height="11" alt="Loading.." /></div> 
    <!-- The loading gif animation - hidden once the tweets are loaded -->
  
    <div id="scroll"></div> 
    <!-- Container for the tweets -->
  
</div>

The twitter ticker operates only if JavaScript is present and enabled. That is why we are hiding it in the CSS and showing it with jQuery. This will insure that it is only shown if working properly.

Lets move to the CSS

Step 2 – CSS

This is the place you should start from if you plan to modify the demo.

demo.css

body,h1,h2,h3,p,quote,small,form,input,ul,li,ol,label{ 
    /* Resetting some of the page elements */
    margin:0px; 
    padding:0px; 
} 
  
h2.tut{ 
    /* This is the "MY TWEETS" title */
    color:white; 
    font-family:"Myriad Pro", Arial, Helvetica, sans-serif; 
    font-size:16px; 
    padding:12px 0 0 58px; 
    text-transform:uppercase; 
  
    /* The CSS3 text-shadow property */
    text-shadow:2px 1px 6px #333; 
} 
  
#twitter-ticker{ 
    /* Styling the ticker */
    width:200px; 
    height:300px; 
    background:url(img/slickbg.png) no-repeat #f5f5f5; 
    color:#666666; 
    display:none; 
  
    /* Rounded corners */
    -moz-border-radius:10px 10px 6px 6px; 
    -khtml-border-radius: 6px; 
    -webkit-border-radius: 6px; 
    border-radius:6px; 
  
    text-align:left; 
} 
  
#tweet-container{ 
    /* This is where the tweets are inserted */
    height:230px; 
    width:auto; 
    overflow:hidden; 
} 
  
#twitIcon{ 
    /* Positioning the icon holder absolutely and moving it to the upper-left */
    position:absolute; 
    top:-25px; 
    left:-10px; 
    width:64px; 
    height:64px; 
} 
  
#top-bar{ 
    height:45px; 
    background:url(img/top_bar.png) repeat-x; 
    border-bottom:1px solid white; 
    position:relative; 
    margin-bottom:8px; 
  
    /* Rounding the top part of the ticker, works only in Firefox unfortunately */
    -moz-border-radius:6px 6px 0 0; 
} 
  
.tweet{ 
    /* Affects the tweets */
    padding:5px; 
    margin:0 8px 8px; 
  
    border:1px solid #F0F0F0; 
    background:url(img/transparent.png); 
  
    width:auto; 
    overflow:hidden; 
} 
  
.tweet .avatar, 
.tweet .user, 
.tweet .time{ 
    float:left; 
} 
  
.tweet .time{ 
    text-transform:uppercase; 
    font-size:10px; 
    color:#AAAAAA; 
    white-space:nowrap; 
} 
  
.tweet .avatar img{ 
    width:36px; 
    height:36px; 
    border:2px solid #eeeeee; 
    margin:0 5px 5px 0; 
} 
  
.tweet .txt{ 
    /* Using the text container to clear the floats */
    clear:both; 
} 
  
.tweet .user{ 
    font-weight:bold; 
} 
  
a, a:visited { 
    /* Styling the links */
    color:#00BBFF; 
    text-decoration:none; 
    outline:none; 
} 
  
a:hover{ 
    text-decoration:underline; 
} 
  
#loading{ 
    /* The loading gif animation */
    margin:100px 95px; 
}

And as any experienced front-end developer can assure you, the code is not complete without some special IE6 treatment.

<!--[if lt IE 7]> 
  
<style type="text/css"> 
div.tweet { 
    background:none; 
    border:none; 
} 
  
div#twitIcon{ 
    filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=img/twitter_64.png, sizingMethod=crop); 
} 
  
div#twitIcon img{ 
    display:none; 
} 
  
</style> 
<![endif]-->

This will take care of the PNG transparency issues in IE6.

Below you can see a detailed explanation of the twitter ticker.

Now lets take a look at the jQuery source.

Step 3 – jQuery

Being front-end only, the widget takes advantage of the Twitter’s Search API. This a really simple solution for fetching data from the twitter’s infrastructure without the need of any server-side code or databases.

Here is how it works:

The ticker loads;
JS builds the twitter search api URL from the provided twitter usernames (in the tweetUsers array) and a name of a callback function (TweetTick in our case);
It includes a script file in the page, using the above URL as its src;
The script in turn calls the callback function and provides a special object containing all the tweets as a parameter;
The callback function uses this object to build and show the tweets;

As the search api script is called after page load, there is no waiting for the script to load and hanging of the page in the mean time. This is a true asynchronous javascript solution – a great alternative to AJAX.

Now here is the code that makes this happen:

demo.html

<link rel="stylesheet" type="text/css" href="demo.css" /> 
<link rel="stylesheet" type="text/css" href="jScrollPane/jScrollPane.css" /> 
  
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> 
<script type="text/javascript" src="jScrollPane/jquery.mousewheel.js"></script> 
<script type="text/javascript" src="jScrollPane/jScrollPane-1.2.3.min.js"></script> 
<script type="text/javascript" src="script.js"></script>

First, we include our demo.css and jScrollPane.css. These style the ticker.

Later we include the jQuery library from Google’s CDN, the mousewheel plugin and the jScrollPane plugin.

Last is script.js, which is shown below:

script.js

var tweetUsers = [´tutorialzine´,´TechCrunch´, 
´smashingmag´,´mashable´]; 
// The twitter accounts that will be included in the ticker 
  
var buildString = ""; 
  
$(document).ready(function(){ 
  
    // After the page is loaded 
  
    $(´#twitter-ticker´).slideDown(´slow´); 
    // Show the ticker 
  
    for(var i=0;i<tweetUsers.length;i++) 
    { 
        // Build the search api parameters 
        if(i!=0) buildString+=´+OR+´; 
        buildString+=´from:´+tweetUsers[i]; 
    } 
  
    var fileref = document.createElement(´script´); 
    // Creating a new script element 
  
    fileref.setAttribute("type","text/javascript"); 
    fileref.setAttribute("src", "http://search.twitter.com/search.json?q="+buildString+"&callback=TweetTick&rpp=50"); 
    // Setting its src to the search API URL; We provide TweetTick as a callback 
  
    document.getElementsByTagName("head")[0].appendChild(fileref); 
    // Appending it to the head of the page and thus executing it 
}); 
  
function TweetTick(ob) 
{ 
    // This is the callback function 
  
    var container=$(´#tweet-container´); 
    container.html(´´); 
    // Removing the loading gif animation 
  
    $(ob.results).each(function(el){ 
  
        // ob contains all the tweets 
  
        var str = ´ <div class="tweet">\ 
        <div class="avatar"><a href="http://twitter.com/´+this.from_user+´" target="_blank"><img src="´+this.profile_image_url+´" alt="´+this.from_user+´" /></a></div>\ 
        <div class="user"><a href="http://twitter.com/´+this.from_user+´" target="_blank">´+this.from_user+´</a></div>\ 
        <div class="time">´+relativeTime(this.created_at)+´</div>\ 
        <div class="txt">´+formatTwitString(this.text)+´</div>\ 
        </div>´; 
  
        container.append(str); 
        // Adding the tweet to the container 
    }); 
  
    container.jScrollPane(); 
    // After all the tweets have been added, create the slidebar 
} 
  
function formatTwitString(str) 
{ 
    // This function formats the tweet body text 
  
    str=´ ´+str; 
  
    str = str.replace(/((ftp|https?):\/\/([-\w\.]+)+(:\d+)?(\/([\w/_\.]*(\?\S+)?)?)?)/gm,´<a href="$1" target="_blank">$1</a>´); 
    // The tweets arrive as plain text, so we replace all the textual URLs with hyperlinks 
  
    str = str.replace(/([^\w])\@([\w\-]+)/gm,´$1@<a href="http://twitter.com/$2" target="_blank">$2</a>´); 
    // Replace the mentions 
  
    str = str.replace(/([^\w])\#([\w\-]+)/gm,´$1<a href="http://twitter.com/search?q=%23$2" target="_blank">#$2</a>´); 
    // Replace the hashtags 
  
    return str; 
} 
  
function relativeTime(pastTime) 
{ 
    // Generate a JavaScript relative time for the tweets 
  
    var origStamp = Date.parse(pastTime); 
    var curDate = new Date(); 
    var currentStamp = curDate.getTime(); 
    var difference = parseInt((currentStamp - origStamp)/1000); 
  
    if(difference < 0) return false; 
  
    if(difference <= 5)          return "Just now"; 
    if(difference <= 20)         return "Seconds ago"; 
    if(difference <= 60)         return "A minute ago"; 
    if(difference < 3600)        return parseInt(difference/60)+" minutes ago"; 
    if(difference <= 1.5*3600)   return "One hour ago"; 
    if(difference < 23.5*3600)   return Math.round(difference/3600)+" hours ago"; 
    if(difference < 1.5*24*3600) return "One day ago"; 
  
    // If the tweet is older than a day, show an absolute date/time value; 
  
    var dateArr = pastTime.split(´ ´); 
  
    return dateArr[4].replace(/\:\d+$/,´´)+´ ´+dateArr[2]+´ ´+dateArr[1]+ 
    (dateArr[3]!=curDate.getFullYear()?´ ´+dateArr[3]:´´); 
}

You can see that on line 55 we use the jScrollPane plugin. It creates a handy scrollbar to the right of the tweets. Thanks to the mouseWheel plugin it is also able to detect and scroll the page on mouse wheel movements.

To change the twitter accounts that are shown in the ticker, you’ll need to modify the tweetUsers array.

If you provide two or more twitter names, their tweets will be shown together. Only the 50 most recent tweets from the past 7 days will be returned.

It is worth noting that Twitter puts a maximum limit to the search api’s URLs of 140 characters. This would be sufficient for about 7 twitter user names.

With this the twitter ticker is complete!

Tags: jquery, twitter, ticker,