twito: jQuery Twitter Plugin

twito is a simple yet configurable jQuery Twitter plugin that displays the latest tweets on your webpages without acquiring any space. twito creates a floating box on the page that can be set to be displayed on any four corners of the webpage. You can configure twito to show the Twitter updates from multiple Twitter accounts. The plugin uses only jQuery and CSS without any server side coding. In this version two types of animations have been provided – fade and bubble. See the live demo here.

Download Plugin

Demo 1  Demo 2  Demo 3  Demo 4 

twito Plugin Options

users: [Array] It is the array of Twitter accounts whose tweets need to be displayed. e.g. ['web_speaks','smashingmag']

position: [string] It is the position of the twito div on the page. It can be any four corners of the web page. The possible options are:
'br' - Bottom Right
'bl' - Bottom Left
'tl' - Top Left
'tr' - Top Right

width: [string] It is the width of the twito div. Default is '300px'.

height: [string] It is the width of the twito div. Default is 'auto'.

margin: [string] It is the margin of the twito div from the browser boundaries. Default is '10px'.

padding: [string] It is the padding of the twito div. Default is '10px'.

animation: [string] The type of animation. Default is 'fade'. Two animations are supported right now - fade, bubble.

speed: [int] It is the speed of the animation. Default is 5000.

showAvatar: [bool] Whether or not to show the user's Twitter profile image. Default is true.

avatarSize: [string] Height and width of the user's profile image. e.g. '36px',

bgColor: [string] Background color of the twito div. Default is '#ffffff'.

twito Plugin Code

(function($){
$.fn.twito = function(options){

var defaults = {
users: ['web_speaks'],
position: 'br',
width: '300px',
height: 'auto',
margin: '10px',
padding: '10px',
animation: 'fade',
speed: 5000,
showAvatar: true,
avatarSize: '36px',
bgColor : '#ffffff'
}

var o = $.extend(defaults, options);
$('body').append('<div id="twitPane"></div>');

var $this = $('div#twitPane');
$this.css({'width' : o.width});

var buildString = '';
for(var i=0;i<o.users.length;i++){
if(i!=0) buildString+='+OR+';
buildString+='from:'+o.users[i];
}

setPosition(o.position);
function setPosition(pos){
switch(pos){
case 'tl':
$this.css({'top' : o.margin, 'left' : o.margin});
break;
case 'tr':
$this.css({'top' : o.margin, 'right' : o.margin});
break;
case 'bl':
$this.css({'bottom' : o.margin, 'left' : o.margin});
break;
case 'br':
default:
$this.css({'bottom' : o.margin, 'right' : o.margin});
}
}

$.getJSON("http://search.twitter.com/search.json?q="+buildString+"&rpp=50&callback=?", function(data){
tweet(data);
});

function tweet(d){
switch(o.animation){
case 'fade':fade(d);break;
case 'bubble':bubble(d);break;
default:fade(d);
}
}

function fade(d){
var c = 0;
var interval = setInterval(
function() {
$this.find('div.tweet').fadeOut('slow');
var str = createTweetDiv(d.results[c]);
$this.html(str).hide().fadeIn('slow');
c++;
if( c >= d.results.length) c=0;
} , o.speed);
}

function bubble(d){
var c = 0;
var tt = $this.css('top');
var tl = $this.css('left');
var tb = $this.css('bottom');
var tr = $this.css('right');

var interval = setInterval(
function() {
var str = createTweetDiv(d.results[c]);
$this.html(str).fadeTo('fast', 1);
switch(o.position){
case 'bl':
$this.animate({opacity: 0,bottom: '150px'}, parseInt(o.speed*80/100), function() {
$this.css({'bottom' : tb, 'left' : tl});
});
break;
case 'tl':
$this.animate({opacity: 0,top: '150px'}, parseInt(o.speed*80/100), function() {
$this.css({'top' : tt, 'right' : tl});
});
break;
case 'tr':
$this.animate({opacity: 0,top: '150px'}, parseInt(o.speed*80/100), function() {
$this.css({'top' : tt, 'right' : tr});
});
break;
case 'br':
default:
$this.animate({opacity: 0,bottom: '150px'}, parseInt(o.speed*80/100), function() {
$this.css({'bottom' : tb, 'right' : tr});
});
}
c++;
if( c >= d.results.length) c=0;
} , o.speed);

}

function createTweetDiv(data){
var htm = '<div class="tweet" style="background-color:'+o.bgColor+';padding:'+o.padding+';height:'+o.height+'">';
if(o.showAvatar){
htm += '<div class="avatar"><a href="http://twitter.com/'+data.from_user+'" target="_blank"><img style="height:'+o.avatarSize+';width:'+o.avatarSize+';" src="'+data.profile_image_url+'" alt="'+data.from_user+'" /></a></div>';
}
htm += '<div class="user"><a href="http://twitter.com/'+data.from_user+'" target="_blank">'+data.from_user+'</a></div><br />
<div class="time">'+relativeTime(data.created_at)+'</div>
<div class="txt">'+formatTwitString(data.text)+'</div>
</div>';
return htm;
}

function formatTwitString(str){
str=' '+str;
str = str.replace(/((ftp|https?)://([-w.]+)+(:d+)?(/([w/_.]*(?S+)?)?)?)/gm,'<a href="$1" target="_blank">$1</a>');
str = str.replace(/([^w])@([w-]+)/gm,'$1@<a href="http://twitter.com/$2" target="_blank">$2</a>');
str = str.replace(/([^w])#([w-]+)/gm,'$1<a href="http://twitter.com/search?q=%23$2" target="_blank">#$2</a>');
return str;
}

function relativeTime(pastTime){
var origStamp = Date.parse(pastTime);
var curDate = new Date();
var currentStamp = curDate.getTime();

var difference = parseInt((currentStamp - origStamp)/1000);

if(difference < 0) return false;

if(difference <= 5) return "Just now";
if(difference <= 20) return "Seconds ago";
if(difference <= 60) return "A minute ago";
if(difference < 3600) return parseInt(difference/60)+" minutes ago";
if(difference <= 1.5*3600) return "One hour ago";
if(difference < 23.5*3600) return Math.round(difference/3600)+" hours ago";
if(difference < 1.5*24*3600) return "One day ago";

var dateArr = pastTime.split(' ');
return dateArr[4].replace(/:d+$/,'')+' '+dateArr[2]+' '+dateArr[1]+(dateArr[3]!=curDate.getFullYear()?' '+dateArr[3]:'');
}
};

})(jQuery);

Note: createTweetDiv, formatTwitString, relativeTime javascript functions in the plugin and the CSS has been borrowed from Tutorialzine in A jQuery Twitter Ticker article.

twito Plugin Usage

<script type="text/javascript">
$(function(){
$("body").twito();
});
</script>

twito Plugin Usage With Options

<script type="text/javascript">
$(function(){
$("body").twito({
users: ['web_speaks','smashingmag','real_CSS_Tricks','jeresig'],
position: 'tr',
width: '300px',
height: '80px',
margin: '10px',
animation: 'bubble',
speed: 3000,
padding: '10px',
bgColor: "#000",
showAvatar: true,
avatarSize: '24px'
});
});
</script>

twito Full Page Example

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>twito : jQuery Twitter Plugin | WebSpeaks.in</title>
<link rel="stylesheet" type="text/css" href="style.css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="twito.js"></script>
<script type="text/javascript">
$(function(){
$("body").twito();
});
</script>
<!--[if lt IE 7]>
<style type="text/css">
div.tweet {
background:none;
border:none;
}
</style>
<![endif]-->
<style>
div#main{
height:2000px;
}
</style>
</head>

<body>
<div id="main">
<h1>twito : jQuery Twitter Plugin</h1>
<p>Show tweets from multiple accounts</p>
<p>Pure jQuery & CSS</p>
<p>Multiple animations</p>
<p>Options for easy configuration</p>
</body>
</html>

Written by Arvind Bhardwaj

Arvind is a certified Magento 2 expert with more than 10 years of industry-wide experience.

Website: http://www.webspeaks.in/