Useful tweets widget using Yahoo Pipes and some JavaScript
Sunday, September 28th, 2008If you look on the right side of this blog (and you can see) and you have JavaScript enabled you’ll spy a little “Useful tweets” widget (list). This is done with Yahoo Pipes and some JavaScript. As people asked me how it is done, here goes:
The idea
I use twitter a lot. Some of what I write is very relevant to the blog here, some is not fit for publication and some is just personal. So publishing all the tweets here would have been disruptive, hence I tried to find a way to filter things down.
What I do is that I end every tweet that I want to show up here with a § symbol, thus giving me a handle to filter out the good ones.
Playing nice with twitter and not summoning the fail whale
As twitter is probably the most hit API out there I didn’t want to go through the API and all the authentication malarkey. Instead I am using the ATOM feed and pipes to get the information and to filter it down.
Yahoo pipes is still full of win when it comes to filtering, mashing and converting data, and the pipe in question that I am using is available here: Useful tweets pipe
It takes the atom feed of a twitter user of a certain ID, removes all tweets but the ones ending in a § and removes the user name of the output.
Using the pipe and displaying the content
In order to display the pipe all you need is a small JavaScript and the right HTML in your page (or in my case WordPress template):
The link means the thing still makes sense when JavaScript is not available and the script does the rest. One thing you need to do to show your useful tweets instead of mine is to change the class on the DIV! You get the number from your twitter page:
- Go to your twitter page, f.e.: http://twitter.com/codepo8
- Click the RSS link at the bottom
- Check the URL of the feed, your ID is the number in between the slash and ‘.rss’, f.e.: http://twitter.com/statuses/user_timeline/13567.rss
The JavaScript for display of the badge is no rocket science whatsoever:
var tweets = function(){
var x = document.getElementById('mytweet');
if(x){
var twitterUserId = x.className.replace('user-','');
var s = document.createElement('script');
s.type = 'text/javascript';
s.src = 'http://pipes.yahoo.com/pipes/pipe.run?' +
'_id=f7229d01b79e508d543fb84e8a0abb0d&_render=json' +
'&id=' + twitterUserId + '&_callback=tweets.tweet';
document.getElementsByTagName('head')[0].appendChild(s);
};
function tweet(data){
if(data && data.value && data.value.items){
if(typeof data.value.items.length !== 'undefined'){
var ul = document.createElement('ul');
var all = data.value.items.length;
var end = all > 5 ? 5 : all;
for(var i=0;i < end;i++){
var now = data.value.items[i];
var li = document.createElement('li');
var a = document.createElement('a');
a.href = now.link;
a.appendChild(document.createTextNode(now.title));
li.appendChild(a);
ul.appendChild(li);
}
x.appendChild(ul);
}
}
};
return{
tweet:tweet
}
}();
- We check if the element with the ID mytweet exists
- We then extract the user ID from the class name and create a new JavaScript pointing to the JSON output of the pipe. This, once loaded, will call tweets.tweet() and send the data as JSON
- The tweet() method checks if data was retrieved, creates a list of links and appends it to the DIV.
Hope this is useful to someone else, too.
