In the last few days I received 2 questions about how to get a Twitter widget on your site to display some data other than a user timeline. Since I love writing stuff I know that people like instead of what I think they will like, I’m going to write a short howto on getting your custom widget.
Getting your user timeline in a widget is easy; Go to Twitter and grab the code from this page: http://twitter.com/widgets/html_widget
If you look at the code you’ll see a link like this http://twitter.com/statuses/user_timeline/pepijndevos.json?callback=twitterCallback2&count=5 Go ahead and click it! It’s a JSON file with my latest tweets.
The cool part is that Twitter has a whole API of urls you can use to get your data. The default widget is using statuses/user_timeline. Note the XML structure at the bottom. We can replace this url with any public url that returns the same structure, that means statuses containing a user, not users containing a status.
Here is a list of a few API calls you could use:
- http://twitter.com/statuses/public_timeline.json?callback=twitterCallback2&count=5 — Show the public timeline.
- http://twitter.com/favorites/pepijndevos.json?callback=twitterCallback2&count=5 — Get a users favorites.
- http://search.twitter.com/search.json?tag=jython&from=pepijndevos&rpp=5&callback=twitterCallback2 — Search will only work after the next version of the API, where it will return the same result as the rest.
An example using my favorites would look like:
<div id="twitter_div"> <h2>Twitter Updates</h2> <ul id="twitter_update_list"> </ul> <a href="http://twitter.com/pepijndevos" id="twitter-link" style="display:block;text-align:right;">follow me on Twitter</a> </div> <script type="text/javascript" src="http://twitter.com/javascripts/blogger.js"></script> <script type="text/javascript" src="http://twitter.com/favorites/pepijndevos.json?callback=twitterCallback2&count=5"></script>
You can now paste this html code anywhere you want it to appear!
