How to reduce my Twitter feed to my last 3-5 tweets in my Tumblr web using HTML?

Question

As you can see in my blog, the twitter feed displays lots and lots of tweets. I need to reduce this number to just 3-5 tweets. I have posted below the HTML code but I can see any argument like "limit", "number" or something like that. The fact is that I do not have too much about coding, so if you can help me and tell what I have to add I will be very grateful.

.TWITTER {
    overflow: hidden;
}

.TWITTER #tweets a, .TWITTER #tweets a:visited {
    -khtml-border-radius: 4px;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    background: #79a4ba;
    color: #ffffff;
    display: block;
    margin: 4px 0;
    padding: 10px;
}

.TWITTER #tweets .content {
    color: #ffffff;
    font-size: 11px;
    font-weight: bold;
}

.TWITTER .TWITTER_bird {
    background: url('http://static.tumblr.com/l3zugnz/204kvwebe/twitterbird.png') no-repeat 0 0;
    height: 55px;
    margin-top: -10px;
    width: 200px;
}

.TWITTER .TWITTER_bird a, 
.TWITTER .TWITTER_bird a:visited, 
.TWITTER .TWITTER_bird a:hover {
    display: block;
    height: 55px;
    width: 200px;
}

pea.sandwell · Answer 1 · 2013-09-26T09:20:06.817

There should be an option in the tweetstream to limit the number of tweets. Admittedly I don't really know how to use it myself, but one option is to use CSS to hide all other tweets after the third one:

CSS:

#tweets a:nth-child(n+4) {
  display: none;
}

Basically what's this is saying is "Select all a inside #tweets that are 4th onwards, and hide it".

See it in action here.

The only downside is that not all browsers would support this. So the older versions of IE (I think anything below IE8) would still be showing all the tweets. The modern browsers will be perfectly fine though.

score 0 · Answer 2 · answered Sep 26 '13 at 10:29

To specify how many tweets to display, you could modify the recent_tweets function to:

function recent_tweets(data) {
    var tweetsToDisplay = 4;
    for (i=0; i <= tweetsToDisplay; i++) {
        document.getElementById("tweets").innerHTML =
            document.getElementById("tweets").innerHTML +
            '<a href="http://twitter.com/ramiroaznar/status/' +
            data[i].id + '"><div class="content">' + data[i].text +
            '</div></a>';
        }
    document.getElementById("twitter").style.display = 'block';
}

Change tweetsToDisplay to the number of tweets you wish to be shown.

How to reduce my Twitter feed to my last 3-5 tweets in my Tumblr web using HTML?

2 Answers2