Based on a jQuery plugin, this simple script allows to build your very own twitterwall with pure javascript! A twitter wall is nothing else then a collection of tweets to a specific "hashtag". Automatically from time to time the plugin refresehes the screen and adds the new tweets found to the tag.
It is nearly complete css-based and can be styled easily in any way you like.
Include the javascript and css files in your website (if you haven't already included underscore and momentjs in your website, now you should):
<link rel="stylesheet" href="css/twitterwalljs.css" />
<script type="text/javascript" src="js/twitterwalljs.js"></script>
Call the plugin with the options parameter:
$(document).ready(function () {
$("#twitterWall").twitterWall("javascript", { refresh: true, refreshTimeout: 5000 });
});
##Options
refresh: true,
refreshTimeout: 15000,
maxTweetsInWall: 200,
firstLoadResults: 100,
language: 'en',
detectLanguage: true,
apiUrl: 'http://search.twitter.com/search.json?callback=?&result_type=recent&q=' + search
- Please note that the twitter API limits the max results on the first load too 100.
- For editing the style please use the given css file.
- This plugin is completely based on the client, that means you won't need any server logic.
- For more information see this blog-post (german).
##Language support
As this plugin uses momentjs for date-formatting, you can download your preferred language files. To use more than one language, simply reference all the files desired, create a lang-de-en-it.js, or use the langs.min file, which includes all available languages (Warning: bigger size!).
If the detectLanguage-option is enabled (per default it is), it will look for the browser-language (webkit) or system-language (IE).
##Demo
A demo can be found on twitterwall.it.