ThisIsLeon.co.uk

I recently made a few small changes to my personal website, including the addition of my most recent FourSquare check in’s. This post is a quick write up to show you how I did it for FourSquare, but this technique can be used for almost any social network or RSS feed.

You may be thinking – “Why not just use the widget they released?” – because it didn’t fit into the design or style of my site – plus with this I can pick and choose the information that is displayed.

Getting the updates onto my site was made easy by using the jFeed and timeago jQuery plugins.

First of all, go and grab the files from here and here.

The only files we really need from the jFeed download is the plugin itself located in build > dist > jquery.jfeed.pack.js and a file called proxy.php. Upload these and the jquery.timeago.js from the TimeAgo download to somewhere on your server and add a link to the head of your document.

Next, head over to the feeds section on Foursquare and copy the link to your RSS feed (it looks like the image below).

Next step is to create the Javascript to parse the feed. We need to pass this through the proxy.php file due to the fact that the file we are requesting is on a different server to the one we are calling it from. The read me documentation said that this shouldn’t be used – but what the hell I just ignored it!

Don’t forget to add your FourSquare feed in below!

$.getFeed({
        url: 'proxy.php?url=YOUR FOURSQUARE FEED.rss',
        success: function(feed) {

            var html = '
';

           for(var i = 0; i < feed.items.length && i < 5; i++) {

                var item = feed.items[i];

                html += '
'
                + ''
                + item.title
                + ' - '
                + jQuery.timeago(item.updated);
                + '

';

            }

            html += '

';

            $('#foursquare').append(html);
        }
    });

So to explain, the above Javascript passed the FourSquare RSS feed through the proxy.php and then creates a variable called html with an opening <ul> tag. Upon each iteration of the loop, upto a maximum of 5 the function then selects the title, link and when the checkin occurred and adds this to a <li> element. This newly created <li> containing the link and time is then added to the html variable. When the html variable ends, the closing </ul> tag is added.

The whole html variable is then appending via jQuery to a div with the ID of foursquare, pretty simple!

Oh, you’ll notice that the time stamp is passed through jQuery.timeago() – this is so we get a nicely formatted timestamp. You can read more about jQuery.timeago() here.

Take a look at a demo over at http://www.leonbarrett.com