Tag Archives: JSONP

Javascript Twitter feed

I wrote a Javascript Twitter feed recently to display a single tweet on my website. Thought I’d try it without using JQuery for a change.

Easy!

However I wanted to do it all in my browser but using JSONP to get the tweet seems to take ages – I’m going to try calling their service from the server instead (back to the old C# then).

I don’t think I’ll be using this but it was fun to make. If anyone would like to give it a try here it is.

The html:


<div id="twitter-feed">
    <div id="twitter-heading">
        <div id="twitter-waiting">Loading content...</div>
        <div id="twitter-date"></div>
    </div>
    <p id="twitter-content"></p>   
    <!-- follow button here -->
</div>

A follow button generator can be found here.

The code:


<script type="text/javascript"> // twitter feed

    var maxCharacters = 100; // maximum number of tweet characters you want to display
    var numberOfTweets = 10; // the number of tweets you want to fetch
    var screenName = "danny_melia";  // the screen name of the account you want tweets from
    var includeRetweets = true;  // include retweets amongst the tweets fetched

    // Processes and displays JSONP
    function handleResponse(responseJson) {

        var tweet;
        var date;
        var i = 0;

        // gets the tweet
        try {
            if (responseJson[i].text != null && responseJson[i].text != "") {

                tweet = responseJson[i].text;
            }
            else {

                for (i = 1; i < 10; i++) {

                    if (responseJson[i].text != null && responseJson[i].text != "") {

                        tweet = responseJson[i].text;
                        break;
                    }
                }
            }

            // gets the date
            var dateList = responseJson[i].created_at.split(" ");
            var day = dateList[2];
            var month = dateList[1];
            var year = dateList[5];

            // replaces the month's name with a number 
            switch (month) {
                case "Jan": month = "01"; break;
                case "Feb": month = "02"; break;
                case "Mar": month = "03"; break;
                case "Apr": month = "04"; break;
                case "May": month = "05"; break;
                case "Jun": month = "06"; break;
                case "Jul": month = "07"; break;
                case "Aug": month = "08"; break;
                case "Sep": month = "09"; break;
                case "Oct": month = "10"; break;
                case "Nov": month = "11"; break;
                case "Dec": month = "12"; break;
                default:
            }

            date = day + "." + month + "." + year;

            // formats the tweet
            if (tweet.length > maxCharacters) {

                var j = maxCharacters;

                while (tweet.charAt(j - 1) == ' ') {

                    j--;
                }

                tweet = tweet.substring(0, j) + "...";
            }

            // checks for problems
            if (tweet == null || tweet == "" || date == null || date == "") { throw ""; }
        }
        catch (err) {
            date = new Date();
            var d = date.getDate();
            var day = (d < 10) ? '0' + d : d;
            var m = date.getMonth() + 1;
            var month = (m < 10) ? '0' + m : m;
            var y = date.getYear();
            var year = (y < 1000) ? y + 1900 : y;
            date = day + "." + month + "." + year;

            if (tweet == null || tweet == "") {

                tweet = "Content could not be found.";
            }
        }
        finally {
            // updates the page
            document.getElementById("twitter-waiting").style.display = "none";
            document.getElementById("twitter-date").innerHTML = date;
            document.getElementById("twitter-content").innerHTML = tweet;
        }
    }

    // gets JSONP
    window.onload = function () {

        var jsonpScript = document.createElement("script");
        jsonpScript.type = "text/javascript";
        jsonpScript.src = "https://api.twitter.com/1/statuses/user_timeline.json?screen_name=" + screenName + "&include_rts=" + includeRetweets + "&count=" + numberOfTweets + "&callback=handleResponse"
        document.body.appendChild(jsonpScript);
    }

    window.onunload = function () { }
        
</script>

Follow

Get every new post delivered to your Inbox.