When I last posted anything about TwitRSS.me, I was complaining that I was getting a million requests a month. I am now getting over 2 million requests a day.
Today I am pubicly announcing a (very alpha) Javascript version in the hope that it will help some of the thousands of folk using TwitRSS.me get their Twitter feeds as RSS.
A bit of background
A lot of the traffic on TwitRSS.me comes from Yahoo pipes — I am currently 404ing them because I don’t have the capacity to serve that much traffic yet. People have been generously donating, but I have yet to make enough to beef up the server.
A few weeks back, I decided to see if I could implement the same sort of functionality using Javascript and Yahoo’s YQL platform. This won’t solve the problem of getting your Twitter feed as RSS for everyone, at the same time I have added the ability to get some plain HTML of your Twitter feed, which may be convenient for users who can’t use Twitter’s widget for some reason.
The code is all GPL and can be grabbed from the TwitRSS github if you want to play. I would anticipate adding the ability to pull in other pages like searches "at some point" but this is very much a side project, so don’t expect it to happen soon.
Using the code
To add twitrssme.js to your page, you also need to be running jquery. At least for now, so in the head of your page you will want to pull that in.
<script src="//cdn.jsdelivr.net/jquery/1.10.2/jquery-1.10.2.min.js"></script>
You can put the twitrssme.js script wherever you like on the page.
<script src="//twitrss.me/js/twitrssme.js"></script>
Making HTML or RSS within the page
There are 2 main ways to output your feed currently: RSS and HTML. You will first need a little bit of HTML to assign the output to. Here I am also creating a form so that users can enter a username to get the feed of.
<body>
<form id="tweets">
<label for="username">Username: @</label><input type="text" placeholder="ciderpunx" id="username"/>
<input id="make-rss" type="submit" value="As RSS" />
<input id="make-html" type="submit" value="As HTML" />
</form>
<ul id="html-result"></ul>
<p><pre id="rss-result"></pre></p>
Now you can call the tweetsFor function which pulls back the last 5 tweets from the user. I will probably add the ability to specify the number of tweets to retrieve in a future release. The function takes:
- A Twitter username
- The jQuery element to return content to
- A function for rendering the tweet collection — makeRSS and makeHTML are built in
- An optional jQuery format specifier — 1 to call html() to add the content to the target element, 0 to call text()
- An optional showFeed callback, discussed later
Here is how we could work with the implementation above in javascript.
$( "#make-rss" ).click(function( event ) {
tweetsFor($('#username').val(),$('#rss-result'),makeRSS);
event.preventDefault();
});
$( "#make-html" ).click(function( event ) {
tweetsFor($('#username').val(),$('#html-result'),makeHTML,1);
event.preventDefault();
});
Demo
And here is how that bit looks.
Making a proper RSS feed
This was all very cool. But I have been struggling to have the script direct the browser to an actual RSS feed. The technique that I have found works in most browsers except IE. I just use a Data URI.
Here is where that last argument to tweetsFor comes in — it names a callback that pulls the data back out of the target jQuery element, puts it into a data uri and directs the browser to open that data uri. I added it as a parameter so that it could be overridden if I think of a better way to create the feed in Javascript.
The code to make a proper TwitRSS.me-alike is as follows.
<form id="tweets">
<label for="username">Username: @</label><input type="text" placeholder="ciderpunx" id="username"/>
<input id="show-btn" type="submit" value="Go" />
</form>
<pre id="rss-result"></pre>
<script>
$( "#tweets" ).submit(function( event ) {
feedElem = $('#rss-result')
tweetsFor($('#username').val()
, feedElem
, makeRSS
, 0
, showFeed);
event.preventDefault();
});
</script>
<script src="//twitrss.me/js/twitrssme.js"></script>
The code fetches JSON from YQL, pushes it into the specified jQuery element, then pulls it out again, constructs a data uri and directs the browser there.
Demo
Conclusion
So that is the preview, let me know what you think in the comments. I should stress that this is very much alpha and very much a side project of a side project.