How to Create a Scrolling Twitter Feed Using jQuery

Published Friday 24th of June 2011

In this tutorial I'll explain how to create one of those scrolling twitter feed boxes that are quite common on many websites today.

I'll be using jQuery as well as Remy Sharp's Silky Smooth Marquee plug-in.

The HTML

Most of the code will be generated with JS. But we'll add a container and a little "Loading..."-text directly in the HTML.

<div id="twitter">

    <
h2>Latest tweets</h2>

    <
p>Loading...</p>

    <
noscript>This feature requires JavaScript</noscript>

</
div>

I'll also use the noscript element to inform users without JS that they need to turn it on in order to see the tweets.

You could fetch the tweets using PHP and CURL but that makes your entire page halt until the tweets are loaded so I prefer the JS-approach.

The CSS

You can style it any way you like really but this CSS will make it look kind of like in the image above.

/* The container for the module */
#twitter {
    
background#f1f2f8;

    
width600px/* Up to you but remember to change the div width below as well if you change it */
    
padding0 10px;

    
overflowhidden/* clearfix */

    
-moz-border-radius5px;
    -
webkit-border-radius5px;
    -
o-border-radius5px;
    -
ms-border-radius5px;
    
border-radius5px;
}

    
#twitter h2 {
        
floatleft/* We'll make the heading sit on its own line next to the tweets */
        
width85px/* Might wanna change this depending on the text in the heading */
        
margin0;
        
padding6px 0/* I'll set the top and bottom padding here rather than in the container so as not to cut off any text */

        
font-size12px;
        
color#4b9fff;
        
line-height1;
    }

    
/* The marquee plug-in turns a marquee element into a div */
    #twitter p, 
    #twitter marquee, 
    #twitter div {
        
floatleft;
        
width505px/* Container width - heading width - 10px (for some right padding) */
        
margin0;
        
padding6px 0/* Again we set the padding in here so as not to cut text */
        
line-height1;
    }

        
/* All the tweets will be links pointing to your page on twitter */
        #twitter marquee a, 
        #twitter div a {
            
margin0 10px 0 0;
            
color#333;
            
text-decorationnone;
        }

            
/* The i is used to display the date of the tweet */
            #twitter marquee a i, 
            #twitter div a i {
                
font-stylenormal;
                
color#999;
            
}

The JavaScript

Now for the interesting bits.

var Twitter = {
    
init: function () {
        
// Pass in the username you want to display feeds for
        
this.insertLatestTweets('realjknoxville');
    }, 

    
// This replaces the <p>Loading...</p> with the tweets
    
insertLatestTweets: function (username) {
        var 
limit    5;    // How many feeds do you want?
        
var url        'http://twitter.com/statuses/user_timeline.json?screen_name=' username '&count=' limit '&callback=?';

        
// Now ajax in the feeds from twitter.com
        
$.getJSON(url, function (data) {
            
// We'll start by creating a normal marquee-element for the tweets
            
var html '<marquee behavior="scroll" scrollamount="1" direction="left">';

            
// Loop through all the tweets and create a link for each
            
for (var i in data) {
                
html += '<a href="http://twitter.com/' username '#status_' data[i].id_str '">' data[i].text ' <i>' Twitter.daysAgo(data[i].created_at) + '</i></a>';
            }

            
html += '</marquee>';

            
// Now replace the <p> with our <marquee>-element
            
$('#twitter p').replaceWith(html);

            
// The marquee element looks quite shite so we'll use Remy Sharp's plug-in to replace it with a smooth one
            
Twitter.fancyMarquee();
        });
    }, 

    
// Replaces the marquee-element with a fancy one
    
fancyMarquee: function () {
        
// Replace the marquee and do some fancy stuff (taken from remy sharp's website)
        
$('#twitter marquee').marquee('pointer')
            .
mouseover(function () {
                $(
this).trigger('stop');
            })
            .
mouseout(function () {
                $(
this).trigger('start');
            })
            .
mousemove(function (event) {
                if ($(
this).data('drag') == true) {
                    
this.scrollLeft = $(this).data('scrollX') + ($(this).data('x') - event.clientX);
                }
            })
            .
mousedown(function (event) {
                $(
this).data('drag'true).data('x'event.clientX).data('scrollX'this.scrollLeft);
            })
            .
mouseup(function () {
                $(
this).data('drag'false);
            });
    }, 

    
// Takes a date and return the number of days it's been since said date
    
daysAgo: function (date) {
        
// TODO: Fix date for IE...
        
if ($.browser.msie) {
            return 
'1 day ago';
        }

        var 
= new Date(date).getTime();
        var 
= new Date().getTime();

        var 
numDays Math.round(Math.abs(d) / (1000 60 60 24));
        var 
daysAgo numDays ' days ago';

        if (
numDays == 0) {
            
daysAgo 'today';
        }
        else if (
numDays == 1) {
            
daysAgo numDays ' day ago';
        }

        return 
daysAgo;
    }
};

Twitter.init();

And there you have it. View the scrolling twitter feed in action here.

Tags
Comments
33 comments

Bookmark this Article

  • del.icio.us
  • Digg
  • Furl
  • Google
  • Technorati
  • Ma.gnolia
  • Blinklist
  • Blogmarks
  • Rojo
  • Stumbleupon

Post a Comment

blog comments powered by Disqus

Random jQuery Plug-ins

  • Live Search

    Use this plug-in to turn a normal form-input in to a live ajax search widget. The plug-in displays any HTML you like in the results and the search-res...

    Details

  • Favicons

    This little plug-in will insert favicons to all external links found on your site. The plug-in scans the URL the link is pointing to for a favicon and...

    Details

  • Center

    This little pluggy centers an element on the screen using either fixed or absolute positioning. Can be used to display messages, pop up images etc.

    Details

More Plug-ins

Recent Comments

Powered by Disqus