Twitterwall with Javascript: Twitterwalljs

written by devangelist on November 12, 2012 in Javascript with no comments

A so-called Twitterwall is a simple collection of tweets, which will be shown on a website and can be used as an information source about the happening of a specific hashtag (#).

The 140 character feeds are often shown as bubbles:

The Twitterwall Plugin does a refresh automatically from time to time, so that the user hasn’t to press F5 all the time.

Twitter offers a really easy but powerful API, which in a modern application will be called per REST in the JSON-format. The jQuery-framework is used as a client-side-helper (function: getJSON), which transforms the requests to Twitter to a breeze.

The benefit of this way is very simple: you don’t need any server-side code nor a proxy to cache the requests.

No additional traffic will be generated or resources used – instead of the very lightweight plugin itself.

Implementation

Reference the JavaScript and CSS files:

<link rel="stylesheet" href="twitterwalljs.css" />
<script type="text/javascript" src="twitterwalljs.js"></script>

Call the plugin in the document-load event:

$(document).ready(function () {
    $("#twitterWall").twitterWall("javascript", { refresh: true, refreshTimeout: 5000 });
});

In the example shown above the first 100 most recent tweets to the hashtag “Javascript” are loaded and refreshed every 5 seconds.

Options:

refresh: true,
refreshTimeout: 15000,
maxTweetsInWall: 200,
firstLoadResults: 100,
apiUrl: 'http://search.twitter.com/search.json?callback=?&result_type=recent&q=' + search

The parameters should be self explaining. If we take a look to the internals of the plugin, it calls the API-URL by getJSON passing a max_id. This id is used for paging the results, means that to not reload all the tweets that are already loaded, we pass the last id of the tweet we get. For example:

  • A request for all tweets to the tag Javascript returns beside of the 100 most recent tweets a max_id of 154.
  • In the next request the id 154 will be passed as since_id, so that twitter will return only tweets newer to that id..

There is to pay attention to that id’s, because twitter for a while changed it’s type to unsigned integer and so no incremental order is provided.

The code and a demo can be found on Github.

About the Author

Roberto Bez is a passionate Webdeveloper and TechLead at HolidayCheck. For Roberto development is not only work or a job, but a great motivation and a new challange every day. Everything new and geeky, from new web-technologies to all kind of databases – he tries to introduce it in the daily development.