Twitter JavaScript API - The Beginning

JavaScript/Ajax, Projects Add comments

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!

Twitter JavaScript API - The Beginning

9 Responses to “Twitter JavaScript API - The Beginning”

  1. Jon Says:

    you’re a star for do this!! Thanks

  2. Steven Nagy Says:

    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.

  3. Justin Says:

    @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.

  4. Geek Daily » Blog Archive » Update on the Twitter API Says:

    […] 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 […]

  5. Filipe Melo Says:

    Hi,

    I’ve added this page to Stumbleupon and gave a nice review.

    Regards.

  6. Justin Says:

    Thanks Filipe. I appreciate it.

  7. SATISH -- Technotip.org Says:

    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.

  8. Kevin Micalizzi, Community Mgr, Dimdim Free Web Conferencing Says:

    @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.

  9. Justin Says:

    @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.

Leave a Reply

WP Theme & Icons by N.Design Studio
Entries RSS Login