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).
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.
Did You Enjoy This Post?
Be sure to grab my RSS feed so you don't miss out on more great articles.
This Post Was Brought To You By
How do I save time? I use FreshBooks for invoicing.
Get Information Technology magazine subscriptions and white papers for FREE!
Did you like this post? Be sure to Twitter JavaScript API - The Beginning
October 3rd, 2007 at 6:41 am
you’re a star for do this!! Thanks
October 23rd, 2007 at 5:32 am
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.
October 23rd, 2007 at 7:57 am
@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.
May 27th, 2008 at 8:03 am
[…] I would like to thank Wink Chin for sending me an email to let me know the link to the demo of the Twitter API was broken. I have fixed that so you should have no trouble previewing the code in […]
August 28th, 2008 at 8:00 am
Hi,
I’ve added this page to Stumbleupon and gave a nice review.
Regards.
August 28th, 2008 at 4:15 pm
Thanks Filipe. I appreciate it.
November 1st, 2008 at 1:09 pm
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.
November 19th, 2008 at 5:57 am
@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.
November 19th, 2008 at 6:54 am
@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.