How to create a scrolling Twitter feed for your website

Posted by Andreas, filed under Tutorials.

In this tutorial we're going to build a sideway scrolling twitter feed that you can include on your website.

Since Twitter has become much more annoying with how you fetch tweets my old tutorial doesn't work, but Jason Mayes has luckily created a script that fetches tweets without OAuth and server side validation.

What you need to do, though, is log in to Twitter, go to settings -> widgets -> create new, and then copy the "data-widget-id" number in the generated code. We'll be using that ID later on.

We'll start with the HTML which is very basic, just a wrapping element and a Loading text:

<section id="latest-tweets">Loading...</section>

Now we need to fetch the Tweets and stick them in that element, start by downloading and including Jason's script and then run it, passing in the ID you saved before:

<script src="twitterFetcher_min.js"></script>
<script>
    var LatestTweets = {
        init: function () {
            twitterFetcher.fetch({
                id: 'YOUR_ID_FROM_BEFORE', 
                domId: 'latest-tweets'
            });
        }
    };

    LatestTweets.init();
</script>

That's enough for your tweets to show up on the page. Easy innit? If you don't see any tweets then check the console (F12) for errors.

Jason's default HTML contains a lot of information so we're going to CSS it a bit to hide most of it. We just want the Tweets displayed on one line:

/* Just for looks */
#latest-tweets {
    background: #fafafa;
    border: 1px solid #eaeaea;
    padding: 5px 15px;
    border-radius: 5px;
    overflow: hidden;
}

/* Remove padding, margin, bullets and 
   make sure it's only one line */
#latest-tweets ul {
    margin: 0;
    padding: 0;
    list-style: none;
    white-space: nowrap;
    float: left; /* This makes the ul the full width of the children */
}

/* Tweets on one line, separated */
#latest-tweets ul li {
    display: inline-block;
    margin: 0 20px 0 0;
}

#latest-tweets ul li p {
    margin: 0;
}

/* Hide some stuff we don't want */
#latest-tweets ul li div.user, 
#latest-tweets ul li p.timePosted, 
#latest-tweets ul li p.interact {
    display: none;
}

And now finally the scrolling. Instead of JS we'll be using CSS3 Animations. And what we'll do is we'll tell the ul to start 100% to the side, then transition to -100% and then start over again:

/* Scroll it (thanks: http://stackoverflow.com/questions/21233033/css3-marquee-effect) */
#latest-tweets ul {
    padding-left: 110%;  /* show the marquee just outside the paragraph */
    -webkit-animation: marquee 30s linear infinite;
}

#latest-tweets ul:hover {
    -webkit-animation-play-state: paused;
}

@-webkit-keyframes marquee {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-100%); }
}

And that's it! Below you can see the results;