Twitter JavaScript API - The Beginning
I have begun building a javascript API for Twitter which takes advantage of Twitters RESTful web services. So far it only contains the methods to get the user timeline and a user’s profile but will be expanded a lot in the near future. I want to encapsulate every
part of the Twitter API with easy to implement JavaScript / AJAX methods for easily adding Twitter functionality to your websites and applications.
I have setup a simple demonstration to let you see just how easy it can be and the direction I hope to take this API.
This example is very simple and includes the following 2 files (besides obviously the API and a stylesheet).
You can get the API here.
twitter.html
<html>
<head>
<title>Twitter JavaScript API</title>
<script type="text/javascript" src="scripts/twitter.js"></script>
<link type="text/css" rel="stylesheet" href="scripts/twitter.css"/>
</head>
<body>
<div><strong>Latest Twitter</strong></div>
<table>
<tr>
<td>
<div id="twitter">
<h3>My Twitters</h3>
</div>
<div id="speech">
<img src="images/arr.gif" alt=""/>
</div>
</td>
<td>
<div id="profile">
<img id="profile_image" alt=""/>
<span id="screen_name"></span>
</div>
<div id="speech">
<img src="images/arr2.gif" alt=""/>
</div>
<div id="twitter_limit"></div>
</td>
</tr>
</table>
<script type="text/javascript">
Twitter.GetUserProfile("justin_");
Twitter.UserTimeline({user:"justin_",update:"twitter"});
Twitter.UserTimeline({user:"justin_",update:"twitter_limit",limit:true});
document.getElementById("profile_image").src = Twitter.UserProfile.ImageUrl;
document.getElementById("screen_name").innerHTML = Twitter.UserProfile.Name + " says";
</script>
</body>
</html>twitter.html makes the API calls which display the results.
twitter.php
<?php
if(isset($_GET["user_timeline"])) {
if(isset($_GET["count"])) {
echo file_get_contents("http://twitter.com/statuses/user_timeline/{$_GET["user_timeline"]}.json?count={$_GET["count"]}");
}
else {
echo file_get_contents("http://twitter.com/statuses/user_timeline/{$_GET["user_timeline"]}.json");
}
}
?>twitter.php does the actual REST request and passes back the resulting JSON code.
As the API grows I will be blogging about it’s progress as well as releasing the code. For now you can access the code throught hte examples but I will have versioned releases and documentation in the near future. Any contribution would be welcomed.
Once this project is firmly established I hope to start a PHP API for Twitter also.
RSS ?
17 comments on this post
you’re a star for do this!! Thanks
So is this really a JS wrapper to the twitter API, or do I really need PHP? I want a JS only wrapper, written in OO JS.
If you have that right now, I’ll pay you $50 to use it in an app I am writing.
@Steven
This library requires some sort of server side code to perform the Ajax requests. I had originally tried making the direct ajax calls to the API but I got “Access Denied” errors from JavaScript (XSS restrictions).
If you know of a way around this to make it a pure Javascript API then I will gladly implement it.
If you have anymore questions just reply or you can email me at aspnet_guy [at] yahoo [dot] ca.
Also checkout the latest updates on the API here and here.
Hi,
I’ve added this page to Stumbleupon and gave a nice review.
Regards.
Thanks Filipe. I appreciate it.
I am waiting for you next articles about twitter API.
I am very much eager to make AJAX based tweet display(display tweets without refreshing).
Please refer me to any site which has this tutorial.
@Justin as much as I’d love to see a direct JavaScript implementation of the api, the security model for browsers only allows JavaScript to communicate with the server it originated from.
@Kevin, thanks. I know this is not possible. The only way to get a JS only client API would be if the library was hosted on Twitter. Really there would still be server side code but the developer using the API wouldn’t have to know or care about it. The same idea as the Google Analytics code.
So until now, I haven’t learnt Ajax, but I will try to understand your API. Thanks for your contribution, Tweet U!
You can do a JS only client with cross domain requests using JSONP callbacks.
http://remysharp.com/2007/10/08/what-is-jsonp/ Twitter API supports callbacks.
Thanks, a great starting point
Hi,
I have a question on that if there is a link inside the text, how can I define the link and make it as clickable when I put it on my website?
Regards,
@Hao Chen,
I think the JSONP callbacks wouldn’t be able to POST data since it uses a ’script’ HTML tag to load the data.
Hi, I have a question on the outside of this.
I want to create a simple little thing showing the number of followers for specified twitter accounts (and showing the difference between them).
Of course, if possible, I would like it to be real time or self updateable but that will be a plus.
I am not very good in this kinda coding and I have absolutely no idea where to start…
Help would be appreciated
New to Ajax, having only recently needed it for a project..wouldn’t this be possible using an XmlHTTPRequest object straight from JS?
thats great that you are talking about the twitter api,a good example of searching with the twitter api is on twiogle.com because you can search on twitter and google at the same time.
1 Trackback(s)