Create Twitter Feed using REST API v1.1

Twitter have upgraded their API for twitter feeds and if you require a feed on your website that cannot be derived from those supplied by the twitter widgets section: https://twitter.com/settings/widgets

The following can be done manually using the Restful API. Such as the following:

$(document).ready(function () {
    twitfeed.init();

});

var twitfeed = {
    init: function () {

        var twtimeout = $('#jtwitterfeed').attr('twtimeout');
        var twusername = $('#jtwitterfeed').attr('twusername');
        var twmaxtweets = $('#jtwitterfeed').attr('twmaxtweets');
        var tweeturl = "https://api.twitter.com/1/statuses/user_timeline.json?screen_name=" + twusername + "&count=" + twmaxtweets + "&include_rts=t&callback=?";
        var html = "<ul class='tweetlist'>";
        var tweet = "";

        $.getJSON(tweeturl, function (d) {
            $.each(d, function (i, item) {

                var url = "https://twitter.com/eftposaust";
                var timesince = GetRelativeTimeString(item.created_at);

                tweet = "<li class='tweetblock'>";
                tweet += "<span class='tweet'>" + item.text + "</span>";
                tweet += "<a class='created' href='" + url + "' target='_blank'>" + timesince + "</a>";
                tweet += "</li>";
                html += tweet;
            });

            html += "</ul>";
            $('#jtwitterfeed').html(html);
        });

        setInterval(this.init, twtimeout);
    }
}

function GetRelativeTimeString(time_value) {
    var values = time_value.split(" ");
    time_value = values[1] + " " + values[2] + ", " + values[5] + " " + values[3];
    var parsed_date = Date.parse(time_value);
    var relative_to = (arguments.length > 1) ? arguments[1] : new Date();
    var delta = parseInt((relative_to.getTime() - parsed_date) / 1000);
    delta = delta + (relative_to.getTimezoneOffset() * 60);

    if (delta < 60) {
        return 'less than a minute ago';
    } else if (delta < 120) {
        return 'about a minute ago';
    } else if (delta < (60 * 60)) {
        return (parseInt(delta / 60)).toString() + ' minutes ago';
    } else if (delta < (120 * 60)) {
        return 'about an hour ago';
    } else if (delta < (24 * 60 * 60)) {
        return 'about ' + (parseInt(delta / 3600)).toString() + ' hours ago';
    } else if (delta < (48 * 60 * 60)) {
        return '1 day ago';
    } else {
        return (parseInt(delta / 86400)).toString() + ' days ago';
    }
}

 

You then need to add the following div to hold the twitter feed:

<div id="jtwitterfeed" twtimeout="<TIMEOUT_MS>" twusername="<YOUR_USERNAME>"  twmaxtweets="<MAX_TWEETS>" > </div>

Note that you need to add your own values for twtimeout, twusername, twmaxtweets

More details can be found here: https://dev.twitter.com/docs/api/1.1

 

THe JSON file should be something like this: https://api.twitter.com/1/statuses/user_timeline.json?screen_name=jerrynott&count=4&include_rts=t&callback=?

 

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>