Original code twitter watch
Changes:
reverse chronological order (prepend instead of append tweets)
no tweet remove when we have more than nine
display avatar,name and difference on date like the ones twitter display
only add when we click de button that counts the new tweets
Example:
HTML: (add date.format.js)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="gl" lang="gl">
<head>
<title>Twitter alert viewer>/title>
<meta http-equiv="Content-type" content="text/html;charset=UTF-8" />
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<link href="style.css" rel="stylesheet" type="text/css" />
<script src="logic.js" type="text/javascript"></script>
<script src="date.format.js" type="text/javascript"></script>
</head>
<body>
<div id="tweets">
<h1>Twitter alert viewer</h1>
<a href="#" id="pause">Pause</a>
<a href="#" id="run">Run</a>
<div id="feed-container">
</div>
</div>
</body>
</html>
table.sql
CREATE TABLE IF NOT EXISTS `tweets` ( `id` bigint(20) unsigned NOT NULL, `text` varchar(150) NOT NULL, `name` varchar(100) NOT NULL, `screen_name` varchar(255) NOT NULL, `followers_count` varchar(50) NOT NULL, `created_at` datetime NOT NULL, `image` text NOT NULL, PRIMARY KEY (`id`) ) ENGINE=InnoDB DEFAULT CHARSET=latin1;
watch.php
<?php
$db = mysql_connect('localhost', 'twitter_alerts', 'somepasword');
mysql_select_db('twitter_alerts', $db);
$opts = array(
'http'=>array(
'method'=> "POST",
'content'=> 'track='.WORDS_TO_TRACK
)
);
$context = stream_context_create($opts);
$instream = fopen('https://'.TWITTER_USERNAME.':'.TWITTER_PASSWORD.'@stream.twitter.com/1/statuses/filter.json','r',false,$context);
while(! feof($instream)) {
if(! ($line = stream_get_line($instream, 20000, "\n"))) {
continue;
}else{
$tweet = json_decode($line);
if(($tweet->{'text'})||($tweet->{'text'}!="")){
$id = $tweet->{'id_str'};
$text = mysql_real_escape_string($tweet->{'text'});
$date=new DateTime($tweet->{'created_at'}, new DateTimeZone('UTC'));
$time=$date->format("Y-m-d H:i:s");
$name = mysql_real_escape_string($tweet->{'user'}->{'name'});
$screen_name = mysql_real_escape_string($tweet->{'user'}->{'screen_name'});
$followers_count = mysql_real_escape_string($tweet->{'user'}->{'followers_count'});
$image_url=mysql_real_escape_string($tweet->{'user'}->{'profile_image_url'});
$ok = mysql_query("INSERT INTO tweets (id ,text ,name,screen_name ,followers_count, created_at,image) VALUES ('$id', '$text', '$name' , '$screen_name', '$followers_count', '$time', '$image_url')");
if (!$ok) {echo "Mysql Error: ".mysql_error();}
flush();
}
}
}
?>
server.php
<?php
$db = mysql_connect('localhost', 'twitter_alerts', 'somepasword');
mysql_select_db('twitter_alerts');
$start = mysql_real_escape_string($_GET['start']);
if(! $start){
$query = "SELECT * FROM tweets ORDER BY id ASC";
}else{
$query = "SELECT * FROM tweets WHERE id>".$start." ORDER BY id ASC";
}
$result = mysql_query($query);
$data = array();
while ($row = mysql_fetch_assoc($result)){
array_push($data, $row);
}
$json = json_encode($data);
print $json;
?>
logic.js (change to add new tweets count button and diff date like twitter)
var cTime;
var tTime;
var nTotalDiff;
var oDiff;
var Diff;
var last = '';
var init=false;
var timeOut;
var newtweets=0;
var tweets=new Array();
var newtweet=$('<div class="newtweet">');
$(newtweet).html('<div class="count">');
$(newtweet).on("click",function(){
newtweets=0;
$(this).remove();
$("#feed-container").prepend(tweets.reverse());
tweets=new Array();
$(".created_at").diffdate();
});
function poll(){
$.getJSON("server.php?start="+last,
function(data){
if(data.length>0&&init==true&&newtweets==0){
$("#feed-container").prepend(newtweet);
$(newtweet).on("click",function(){
newtweets=0;
$(this).remove();
$("#feed-container").prepend(tweets.reverse());
tweets=new Array();
$(".created_at").diffdate();
});
}
$.each(data, function(count,item){
rgb = Math.floor(16*(Math.log(item.followers_count+1)+1));
var tweet=$('<div class="tweet" id="'+item.id+'">');
$(tweet).html(
'<a href="http://twitter.com/'+item.screen_name+'"><img class="avatar" src="'+item.image+'"></a>'+
'<div class="namec"><a class="name" href="http://twitter.com/'+item.screen_name+'">'+item.name+'</a>'+
'<a class="screen_name" href="http://twitter.com/'+item.screen_name+'">@'+item.screen_name+'</a>'+
'<a href="https://twitter.com/'+item.screen_name+'/status/'+item.id+'" class="created_at">'+item.created_at+'</a></div>'
+'<span class="text">'+item.text+'</span>'+
'<div><a class="expand" href="https://twitter.com/'+item.screen_name+'/status/'+item.id+'">Expand</a></div>'
);
if(init==true){
tweets.push(tweet);
newtweets++;
if(newtweets==1){
$(newtweet).find(".count").html(newtweets+" new Tweet");
}
else{
$(newtweet).find(".count").html(newtweets+" new Tweets");
}
}
else{
$('#feed-container').prepend(tweet);
}
last = item.id;
});
init=true;
$(".created_at").diffdate();
}
);
timeOut = setTimeout('poll()', 30000);
}
function jsdate(ele){
var e=ele.split(/[- :]/);
var d = new Date(Date.UTC(e[0], e[1]-1, e[2], e[3], e[4], e[5]));
return d;
}
(function($){
$.fn.extend({
diffdate: function(){
return this.each(function(){
cTime=new Date();
var ele=this;
if(!$(ele).is(".difference")){
this.createdat=$(ele).html();
$(ele).addClass("difference");
}
tTime=jsdate(ele.createdat);
nTotalDiff = cTime.getTime() - tTime.getTime();
oDiff = new Object();
oDiff.days = Math.floor(nTotalDiff/1000/60/60/24);
nTotalDiff -= oDiff.days*1000*60*60*24;
oDiff.hours = Math.floor(nTotalDiff/1000/60/60);
nTotalDiff -= oDiff.hours*1000*60*60;
oDiff.minutes = Math.floor(nTotalDiff/1000/60);
nTotalDiff -= oDiff.minutes*1000*60;
oDiff.seconds = Math.floor(nTotalDiff/1000);
if(cTime.getTime()<=tTime.getTime()){
Diff="now";
}
else if(oDiff.days==1){
Diff=tTime.format("mmm d");
}
else if(oDiff.days>1){
Diff=tTime.format("mmm d");
}
else if(oDiff.hours==1){
Diff=oDiff.hours+" hr ";
}
else if(oDiff.hours>1){
Diff=oDiff.hours+" hrs ";
}
else if(oDiff.minutes==1){
Diff=oDiff.minutes+" min ";
}
else if(oDiff.minutes>1){
Diff=oDiff.minutes+" mins ";
}
else if(oDiff.seconds==1){
Diff=oDiff.seconds+" sec ";
}
else if(oDiff.seconds>1){
Diff=oDiff.seconds+" secs ";
}
else{
Diff="now";
}
$(ele).html(Diff).attr({"title":tTime.format("h:MM:ss tt - mmm d, yyyy")});
});
}
});
})(jQuery);
$(document).ready(function(){
poll();
$("#pause").click(function(e){
e.preventDefault();
clearTimeout(timeOut);
});
$("#run").click(function(e){
e.preventDefault();
poll();
});
});
date.formatl.js (format date to look like the ones on tooltip)
/* * Date Format 1.2.3 * (c) 2007-2009 Steven Levithanstyle.css (change to look more like twitter)* MIT license * * Includes enhancements by Scott Trenda * and Kris Kowal * * Accepts a date, a mask, or a date and a mask. * Returns a formatted version of the given date. * The date defaults to the current date/time. * The mask defaults to dateFormat.masks.default. */ var dateFormat = function () { var token = /d{1,4}|m{1,4}|yy(?:yy)?|([HhMsTt])\1?|[LloSZ]|"[^"]*"|'[^']*'/g, timezone = /\b(?:[PMCEA][SDP]T|(?:Pacific|Mountain|Central|Eastern|Atlantic) (?:Standard|Daylight|Prevailing) Time|(?:GMT|UTC)(?:[-+]\d{4})?)\b/g, timezoneClip = /[^-+\dA-Z]/g, pad = function (val, len) { val = String(val); len = len || 2; while (val.length < len) val = "0" + val; return val; }; // Regexes and supporting functions are cached through closure return function (date, mask, utc) { var dF = dateFormat; // You can't provide utc if you skip other args (use the "UTC:" mask prefix) if (arguments.length == 1 && Object.prototype.toString.call(date) == "[object String]" && !/\d/.test(date)) { mask = date; date = undefined; } // Passing date through Date applies Date.parse, if necessary date = date ? new Date(date) : new Date; if (isNaN(date)) throw SyntaxError("invalid date"); mask = String(dF.masks[mask] || mask || dF.masks["default"]); // Allow setting the utc argument via the mask if (mask.slice(0, 4) == "UTC:") { mask = mask.slice(4); utc = true; } var _ = utc ? "getUTC" : "get", d = date[_ + "Date"](), D = date[_ + "Day"](), m = date[_ + "Month"](), y = date[_ + "FullYear"](), H = date[_ + "Hours"](), M = date[_ + "Minutes"](), s = date[_ + "Seconds"](), L = date[_ + "Milliseconds"](), o = utc ? 0 : date.getTimezoneOffset(), flags = { d: d, dd: pad(d), ddd: dF.i18n.dayNames[D], dddd: dF.i18n.dayNames[D + 7], m: m + 1, mm: pad(m + 1), mmm: dF.i18n.monthNames[m], mmmm: dF.i18n.monthNames[m + 12], yy: String(y).slice(2), yyyy: y, h: H % 12 || 12, hh: pad(H % 12 || 12), H: H, HH: pad(H), M: M, MM: pad(M), s: s, ss: pad(s), l: pad(L, 3), L: pad(L > 99 ? Math.round(L / 10) : L), t: H < 12 ? "a" : "p", tt: H < 12 ? "am" : "pm", T: H < 12 ? "A" : "P", TT: H < 12 ? "AM" : "PM", Z: utc ? "UTC" : (String(date).match(timezone) || [""]).pop().replace(timezoneClip, ""), o: (o > 0 ? "-" : "+") + pad(Math.floor(Math.abs(o) / 60) * 100 + Math.abs(o) % 60, 4), S: ["th", "st", "nd", "rd"][d % 10 > 3 ? 0 : (d % 100 - d % 10 != 10) * d % 10] }; return mask.replace(token, function ($0) { return $0 in flags ? flags[$0] : $0.slice(1, $0.length - 1); }); }; }(); // Some common format strings dateFormat.masks = { "default": "ddd mmm dd yyyy HH:MM:ss", shortDate: "m/d/yy", mediumDate: "mmm d, yyyy", longDate: "mmmm d, yyyy", fullDate: "dddd, mmmm d, yyyy", shortTime: "h:MM TT", mediumTime: "h:MM:ss TT", longTime: "h:MM:ss TT Z", isoDate: "yyyy-mm-dd", isoTime: "HH:MM:ss", isoDateTime: "yyyy-mm-dd'T'HH:MM:ss", isoUtcDateTime: "UTC:yyyy-mm-dd'T'HH:MM:ss'Z'" }; // Internationalization strings dateFormat.i18n = { dayNames: [ "Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday" ], monthNames: [ "Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec", "January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December" ] }; // For convenience... Date.prototype.format = function (mask, utc) { return dateFormat(this, mask, utc); };
body{
font-family: georgia, serif;
background:#777777;
}
#tweets{
margin:0 auto;
width:400px;
}
.container-top{
border-bottom: 1px solid #DDDDDD;
font-size: 18px;
font-weight: bolder;
height: 30px;
padding-left: 10px;
padding-top: 10px;
position: absolute;
top: 0;
width: 100%;
}
.newtweet{
background: none repeat scroll 0 0 #EEEEEE;
box-shadow: 0 3px 8px rgba(0, 0, 0, 0.1) inset;
cursor: pointer;
height: 30px;
padding-top: 10px;
text-align: center;
margin-bottom:1px;
}
.newtweet:hover{
background: none repeat scroll 0 0 #DDDDDD;
}
.newtweet .tweet{
display:none;
}
#feed-container{
background: none repeat scroll 0 0 #FFFFFF;
border: 1px solid #AAAAAA;
border-radius: 7px 7px 7px 7px;
margin-top: 15px;
overflow: hidden;
padding-top: 40px;
position: relative;
width: 100%;
}
.tweet{
border-bottom: 1px solid #dddddd;
padding: 10px;
position: relative;
word-wrap: break-word;
}
.tweet:hover{
background:#eeeeee;
}
.namec{
left: 60px;
position: absolute;
top: 5px;
width: 330px;
}
.created_at{
color: #AAAAAA;
position: absolute;
right: 0;
text-decoration:none;
}
.created_at:hover{
color: #000000;
text-decoration:underline;
}
.text{
position:relative;
margin-bottom:10px;
padding-left:5px;
top:-7px;
}
.avatar{
border-radius: 5px 5px 5px 5px;
height: 48px;
width: 48px;
}
.name{
color:#000000;
font-weight:bolder;
text-decoration:none;
}
.name:hover{
text-decoration:underline;
}
.screen_name{
color: #AAAAAA;
margin-left: 5px;
text-decoration: none;
}
.expand{
color: #AAAAAA;
left: 0;
position: relative;
text-decoration: none;
}
.expand:hover{
color:#000000;
text-decoration:underline;
}
.tweet:hover .expand{
color:#000000;
}
