|
|
read friendfeed using jquery
Wednesday, June 11 2008 at 11:59 pm
|
|
Social networking eh? What’s that about? Well, recently I’ve been finding out. I know I’m a bit late to the game, but at least now a lot of the Web 2.0 hype has died down and some dominant(ish) players have emerged so now it’s easier to get an overview of what’s out there. I’ve now got accounts on Facebook, Twitter, del.icio.us, digg and a few others and I’ve even switched most of my browsing to Flock (the “social browser”).
Cripes, I’ve even got a blog!
But what’s really interesting (and useful) about these services is that the content you place on them can (usually) be read and processed automatically by other services. Friendfeed is an aggregation website that makes use of this openness to read content from your other online services and present it as a single “lifestream” of your activities on those other sites, ostensibly so you can share your activities with your interchums and let them join in the fun. Even better, it’s got a public API of its own.
I’ve used this API to make a little sidebar box for this blog to display the latest entries from my FriendFeed … feed. It uses the excellent jQuery javascript library to make an AJAX call to the FriendFeed API to retrieve the latest entries from my public feed in JSON format, then insert suitable markup to the page document to display the results.
Here’s the code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
| //
// example code to read entries from a user's friendfeed.com public feed
// and insert into the current document, using jQuery AJAX facilities.
//
// see:
// friendfeed api: http://code.google.com/p/friendfeed-api/wiki/ApiDocumentation
// jquery : http://jquery.com/
//
// john girvin, june 2008
// public domain
//
// convert rfc3339 formatted date (as returned by friendfeed api) to
// a normal javascript date object
//
// adapted from: http://www.ibm.com/developerworks/library/x-atom2json.html
function rfc3339ToDate(val) {
var pattern = /^(\d{4})(?:-(\d{2}))?(?:-(\d{2}))?(?:[Tt](\d{2}):(\d{2}):(\d{2})(?:\.(\d*))?)?([Zz])?(?:([+-])(\d{2}):(\d{2}))?$/;
var m = pattern.exec(val);
var year = new Number(m[1] ? m[1] : 0);
var month = new Number(m[2] ? m[2] : 0);
var day = new Number(m[3] ? m[3] : 0);
var hour = new Number(m[4] ? m[4] : 0);
var minute = new Number(m[5] ? m[5] : 0);
var second = new Number(m[6] ? m[6] : 0);
var millis = new Number(m[7] ? m[7] : 0);
var gmt = m[8];
var dir = m[9];
var offhour = new Number(m[10] ? m[10] : 0);
var offmin = new Number(m[11] ? m[11] : 0);
if (dir && offhour && offmin) {
var offset = ((offhour * 60) + offmin);
if (dir == "+") {
minute -= offset;
} else if (dir == "-") {
minute += offset;
}
}
return new Date(Date.UTC(year, month, day, hour, minute, second, millis));
}
// zeropad a number to two digits
function pad(v) {
if (v < 10) {
v = "0" + v;
}
return v;
}
// format a date returned from friendfeed api for display
function formatFriendFeedDate(ffdate) {
var m = new Array('jan', 'feb', 'mar', 'apr', 'may', 'jun', 'jul', 'aug', 'sep', 'oct', 'nov', 'dec');
var d = rfc3339ToDate(ffdate);
return d.getDate() + ' ' + m[d.getMonth()] + ' ' + d.getFullYear() + ', ' + pad(d.getHours()) + ':' + pad(d.getMinutes());
}
// populate friendfeed container via ajax
$(document).ready(function() {
// friendfeed: name of user who's feed we want to retrieve
var usr = 'johngirvin';
var nam = 'John Girvin';
// friendfeed: number of entries to retrieve
var num = 5;
// call friendfeed api
$.getJSON('http://friendfeed.com/api/feed/user/' + usr + '?num=' + num + '&callback=?',
// build content from api results
function(data) {
// reference container to hold generated content
var container = $('#friendfeed');
// loop for each friendfeed entry retrieved
$.each(data.entries,
function(i, entry) {
// ignore entry if it is marked as 'hidden'
if (entry.hidden != true) {
// reference the service details
var svc = entry.service;
// build markup for entry - adapt as you require
var t = '';
t += '<tr>';
t += '<td align="left" valign="top">';
t += '<a target="_new" href="'+svc.profileUrl+'" title="View '+nam+'\'s profile on '+svc.name+'">';
t += '<img class="friendfeed_icon" border="0" src="'+svc.iconUrl+'" alt="'+svc.name+'">';
t += '</a>';
t += '</td>';
t += '<td align="left" valign="top">';
t += '<span class="friendfeed_text">';
t += '<a target="_new" href="'+entry.link+'">';
t += entry.title;
t += '</a>';
t += '</span>';
t += '<br>';
t += '<span class="friendfeed_date">';
t += formatFriendFeedDate(entry.published);
t += '</span>';
t += '</td>';
t += '</tr>';
// append content to container
container.append(t);
}
});
});
}); |
The main fun starts at line 61, hooking the population of the sidebar in after the page has finished loading. 62-66 are some simple configuration, then line 69 makes the AJAX call to fetch the entries from Friendfeed. 78-112 are a simple loop over the returned results, building a table row with two cells for each result returned and adding it to the table defined in the the HTML to display the feed output.
One trickiness is that the FriendFeed API returns dates in RFC 3339 format, which Javascript can’t handle directly. The function rfc3339ToDate() is therefore used to convert strings returned in RFC 3339 format to regular Javascript Date objects so that we can go on to process them as required.
The results of this hacking can be seen in the sidebar to the left of this page. I imagine there’s a lot that could be done to tidy up or improve the above code, but I’m going to cop out at this point and leave improvements as an exercise for the reader! Have fun!
A zip file containing a working example of the code is available here (33Kb).
|
|
2 comments on this post
have your say
Enter your details and comment in the form below, then click Submit to
add your wisdom to the discussion. * indicates a required field.
|