Free Source Code – Twitter Display: site.js
Twitter Database Server
Twitter Display
Download
Install
Code Architecture
default.css
get_new_tweet_count.php
get_tweet_list.php
index.html
twitter_display.php
display_lib.php
site.js
tweet_list_template.txt
tweet_template.txt
twitter_display_config.php
This script is an optional part of the Twitter display. If you just want a static list of recent tweets that doesn’t have a more tweets button at the bottom, or a refreshing count of new tweets at the top, you can leave out the loading of this script from your Web page.
If you do want to use this script to create a Twitter-style, interactive list of tweets, this script must be loaded in the head section of your Web page. This script uses the free jQuery library, which must be loaded in the page before site.js. The sample web page that comes with this plugin, index.html, shows how these files are loaded.
Site.js is a good example of how much jQuery simplifies Javascript programming. Being able to pluck the tweet_id value out of the first tweet (line 49) or the last tweet (line 78) with a single line of code is amazing. So is the simplicity of Ajax calls (lines 53-55 and 79-81). To be honest, I always had other people write my Javascript code before jQuery came along.
The most interesting part of the site.js code is the way values are passed from the PHP code on the server to the Javascript code in the browser when the page loads. I could have used an Ajax call when the page first loads, but that would have slowed down the load time. Instead, configuration options like the new count refresh interval are stored in the HTML in hidden divs when the page is generated by the PHP code. They can then be read from the HTML by a jQuery call within site.js when the page is loaded.
Let’s use the new tweet count refresh interval as an example. You can see it being read from the page on line 20 with the jQuery function $("#new_count_refresh").html(). This value is defined in twitter_display_config.php. Tweet_list_template.txt creates a div container for this value with an id of new_count_refresh. This div is made invisible with CSS in default.css. When index.php creates the tweet list HTML, it takes the value from the config file, places it into the HTML defined by the template, and returns it to the page that displays the list. Site.js can find it there and use it to set the refresh interval.
This architecture may seem confusing at first, but it allows a simple config file to control any number of Javascript routines without having to construct Ajax calls for each value. I find that reducing the number and complexity of Ajax calls greatly speeds up Javascript code and reduces the amount of time spent screaming obscenities when testing the code in IE. 
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 | /**
* site.js
* Manage the UI for the tweet display
* Latest copy of this code: http://140dev.com/free-twitter-api-source-code-library/
* @author Adam Green <140dev@gmail.com>
* @license GNU Public License
* @version BETA 0.30
*/
// Use jQuery to simplify the programming
// All Javascript programmers should learn jQuery!
jQuery(document).ready(function($){
$.ajaxSetup({
cache: false
});
/***** Initial page load *****/
// Keep checking the new tweet count based on the refresh value
var new_count_refresh = $("#new_count_refresh").html() * 1000;
setInterval(get_new_tweet_count, new_count_refresh);
// Reload the page when the count is clicked
$("#new_tweet_count").click(function(){
window.location.reload();
});
// Set up the more tweets button at the bottom of the list
// Get the current number of tweets displayed
var tweet_count = $("#tweet_list").find(".tweet").length;
// If there are tweets displayed
if (tweet_count) {
// Fill in the count and display the button
$("#tweet_count").html(tweet_count);
$("#more_tweets_button").show();
// Get older tweets when the button is clicked
$("#more_tweets_button").click(function(){
load_more_tweets();
});
}
/**********/
// Refresh the new tweet count at the top of the list
function get_new_tweet_count(){
// Get the tweet_id of the tweet at the top of the list
var first_id = $(".tweet_id").first().html();
// The server's URL was stored in the ajax_url div when the page was generated
// Use Ajax to get a count of newer tweets from the server
$.get($("#ajax_url").html() +
"plugins/twitter_display/get_new_tweet_count.php?first=" + first_id,
function(count_html) {
// If new tweets were found, display the new count
if (count_html != ' ') {
$("#new_tweet_count").show().html(count_html);
}
});
}
// Get older tweets from the server when the more tweets button is clicked
function load_more_tweets() {
// Disable the button, so it can't be clicked multiple times in a row
$('#more_tweets_button').unbind('click');
// Save the button's current values, and display a progress GIF
var old_button = $("#more_tweets_button").html();
var old_count = $("#tweet_list").find(".tweet").length;
$("#more_tweets_button").html("<center><img src='" +
$("#ajax_url").html() +
"plugins/twitter_display/ajax-loading.gif'></center>");
// Ask the server for tweets older than the one at the bottom of the list
var last_id = $(".tweet_id").last().html();
$.get( $("#ajax_url").html() +
"plugins/twitter_display/get_tweet_list.php?last=" + last_id,
function(tweet_html){
// Add the server's response to the end of the list
$("#tweet_list").append(tweet_html);
// If more tweets were added, redisplay the button with the new count
var new_count = $("#tweet_list").find(".tweet").length;
if (new_count > old_count) {
$("#more_tweets_button").html(old_button);
$("#tweet_count").html(new_count);
// Enable the click event again
$("#more_tweets_button").click(function(){
load_more_tweets();
});
} else {
// No older tweets are available
$("#more_tweets_button").hide();
}
});
}
}); |
streaming_framework
