Twitter is becoming more and more popular everyday it seems. Even Rid and I here at ForTheLose.org have gotten caught up in all the hype. If you own a website, you are probably (or probably want to) add a Twitter feed to your page so your readers can track what you're doing at every single moment of the day.

But what if you don't want to display just your own Twitter feed on your site? What if you want to also display the Twitter feed of someone you look up to or perhaps the feed of another author on your blog? You'd just copy-and-paste another widget onto your page with the other persons Twitter details in it, right? Wrong. That won't work and all it will do is scramble up the two feeds producing an unwanted mess. In this quick tutorial, I will be showing you how to display multiple twitter feeds on your page just like right here on ForTheLose.org.

Step 1 - Get the Code

This is the code that Twitter tells you to paste onto your site to get your Twitter feed up and running. You're still going to want to do that, so go ahead and do it.

<div id="twitter_div">
<h2 class="sidebar-title">Twitter Updates</h2>
<ul id="twitter_update_list"></ul>
<a href="http://twitter.com/TwitterIDHere" id="twitter-link" style="display:block;text-align:right;">follow me on Twitter</a>
</div>
<script type="text/javascript" src="http://twitter.com/javascripts/blogger.js"></script>
<script type="text/javascript" src="http://twitter.com/statuses/user_timeline/TwitterIDHere.json?callback=twitterCallback2&amp;count=5"></script>

Step 2 - Download Blogger.js

Alright, now find this in the code snippet you just pasted.

<script type="text/javascript" src="http://twitter.com/javascripts/blogger.js"></script>

What we'll be doing is actually downloading this file, modifying it ourselves, and hosting it and linking to it from our own server. Once you have downloaded blogger.js (by copy-and-pasting the code into a text file and saving it as a *.js file), you're ready for step 3.

Step 3 - Modify the Code

Inside of your downloaded blogger.js file, look for this snippet of code inside.

function twitterCallback2(C){
    var A = [];
    for (var D = 0; D < C.length; D++) {
        var E = C[D].user.screen_name;
        var B = C[D].text.replace(/((https?|s?ftp|ssh)\:\/\/[^"\s\<\>]*[^.,;'">\:\s\<\>\)\]\!])/g, function(F){
            return '<a href="' + F + '">' + F + "</a>"
        }).replace(/\B@([_a-z0-9]+)/ig, function(F){
            return F.charAt(0) + '<a href="http://www.twitter.com/' + F.substring(1) + '">' + F.substring(1) + "</a>"
        });
        A.push("<li><span>" + B + '</span> <a style="font-size:85%" href="http://twitter.com/' + E + "/statuses/" + C[D].id + '">' + relative_time(C[D].created_at) + "</a></li>")
    }
    document.getElementById("twitter_update_list").innerHTML = A.join("")
}

Once you've found it, duplicate it by copy and pasting it right underneath itself. Now we have to change two things, the first one being the function name. So change this:

function twitterCallback2(C){

To something like:

function twitterCallback3(C){

Next, find this line of code in the new second function:

document.getElementById("twitter_update_list").innerHTML = A.join("")

And change it to:

document.getElementById("twitter_update_list3").innerHTML = A.join("")

That's it. You're done with this file. So save it as a *.js file, and host it on your server somewhere. For the sake of this tutorial, we'll say it's hosted at http://example.com/blogger.js.

Step 4 - Modify the HTML

Once the new, modified blogger.js is hosted on your server, it's time to go back to the original widget code Twitter gave us. It's correct as it is, but since you want two Twitter feeds, you're going to have to copy and paste the code to add a second feed. Once that is done, go to the second widget code and change this:

<ul id="twitter_update_list"></ul>

To this:

<ul id="twitter_update_list3"></ul>

By doing this, you differentiate the two Twitter feeds from eachother, and thus you will have no more mix up when the two feeds are on the same page together. Oh and one last thing if you haven't done it already, you obviously shouldn't link to the Twitter.com blogger.js file when you've just created and hosted your own, so make sure instead of:

<script type="text/javascript" src="http://twitter.com/javascripts/blogger.js"></script>

You have this:

<script type="text/javascript" src="http://example.com/blogger.js"></script>

Once you have this all done, you're good to go. You're two Twitter feeds should run with no problems at all. If you want to add more than two feeds to a page, just repeat this process a second time. Just make sure when that you rename the function in the modified blogger.js file it is it's own unique name. If it's not, you'll be just where you started. Hope this tutorial was useful to you. If it was, why not follow me on Twitter so you'll never miss a new post again.

If you liked this post, stay updated. Follow me on Twitter or subscribe to our RSS Feed via email.

Related Posts

Like this post? Spread it!