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

  • Max Length Form Controls

    Gives form-controls with a 'maxlength-XXX'-class a max-length and prohibits user from entering more than set amount. It also displays number of charac...

    Details

  • Numeric DL

    This tiny plug-in numbers definitions in a definition-list if there are more than one definition for a term. Can be useful for FAQs, actual lists of d...

    Details

  • Super Simple Tabs

    This is an extremely basic tabs-plugin which allows you to create tabbed content from the ever-so-common list of in-page-links. You can set the select...

    Details

More Plug-ins

Recent Comments

Powered by Disqus