Adding news ticker like twitter update widget to web page

Friday, July 29, 2011

Now most of us have twitter account. Unlike Face book, twitter has indirect usage for social savvy user. Your friends/colleagues/customers may not always directly visit your twitter. Therefore you may better off integrating twitter to web resources like your web site or Face book profile.Twitter has provided standard widgets to share your tweets in your web site or blog. Firstly it looks very common due to wide usage. Secondly, the standard twitter widget may be too big for your web page. You better take control it and put your twitter feed according to your liking.

This news ticker like jQuery/ajax based solution is ideal in most of the case where your web page has limited space for all. I found it amazingly simple and charmingly work. I am rewriting/rearranging the steps with due credit to the original post that you can find here.

http://www.fuzionpro.info/2010/11/add-horizontal-twitter-ticker-widget-to.html

OK, first thing first, create following javaScript file and save it as say twitterticker.js

// JavaScript Document
var tweetUsers = ['auroracslk'];
var buildString = "";

$(document).ready(function(){
 for(var i=0;i<tweetUsers.length;i++)
 {
  if(i!=0) buildString+='+OR+';
  buildString+='from:'+tweetUsers[i];
 }
 
 var fileref = document.createElement('script');
 
 fileref.setAttribute("type","text/javascript");
 fileref.setAttribute("src", "http://search.twitter.com/search.json?q="+buildString+"&callback=TweetTick&rpp=50");
 
 document.getElementsByTagName("head")[0].appendChild(fileref);
});

function TweetTick(ob)
{
 var container=$('#tweet-container');
 container.html='';
 $(ob.results).each(function(el){
      
  var str = '<li class="rotating-item">'+formatTwitString(this.text)+'</li>';
  container.append(str);
  
 });
 $('#tweet-container li').hide();
    InOut();
}
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 InOut()
{
var initialFadeIn = 1000;

   var itemInterval = 12000;

   var fadeTime = 1000;

   var numberOfItems = $('#tweet-container li').length;

   var currentItem = 0;
   $('#tweet-container li').eq(currentItem).fadeIn(initialFadeIn);
   var infiniteLoop = setInterval(function(){
   
    $('#tweet-container li').eq(currentItem).fadeOut(fadeTime);

    if(currentItem == numberOfItems -1){
     currentItem = 0;
    }else{
     currentItem++;
    }
    $('#tweet-container li').delay(1000);
    $('#tweet-container li').eq(currentItem).fadeIn(fadeTime);
   }, itemInterval);
}

The following html page demonstrate use of twitter ticker in a web page.

<html>
  <head>
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
  <script type="text/javascript" src="js/twitterticker.js"></script>
  <style type="text/css">
  #tweet-container {
 width:300px;
 overflow:hidden;
  }
  #tweet-container {
 background: #d5e8ef;
 padding: 10px;
 margin: 0 0 20px 0;
 font-size: 10px;
 color: #6e6f73;
 font-weight: bold;
 font-family: verdana;
 float: left;
  }
  #tweet-container p {
 padding: 0px;
 margin: 0px;
  }
  #tweet-container p a {
 color: #45799f;
 text-decoration: none;
  }
  </style>
  </head>

  <body>
    <div id="twitter-ticker">
      <ul id="tweet-container"></ul>
    </div>
  </body>
</html>

you can view this example demo here.


Adding this twitter ticker is very simple.
  1. Add the JavaScript file to your web code base.
  2. In the javaScript code look for the
    var tweetUsers = ['auroracslk'];
    and replace auroracslk with your twitter user name.
  3. Add the JavaScript include and styles code in the above example to the head section of your web page.
  4. Add the following code to the place in your web page that you like your twitter ticker appear.
<div id="twitter-ticker">
      <ul id="tweet-container"></ul>
    </div>

Isn't it simple ?
Ok now you may like to customize it a bit. Firstly you may change the time interval by changing the 'itemInterval' javascript variable value in the javascript.

Simillarly you may change initialFadeInand and fadeTimevalues as well.
   var initialFadeIn = 1000;
   var itemInterval = 5000;
   var fadeTime = 1000;

You can customize width, background color, alignment, border, floating etc modifying the style. OK, it is time for you to add it to your personal or corporate web site. If you have any issues do not hesitate to post it as a comment.

If you want to have rounded border, just change the styles as explained in our previous post "Adding rounded borders using CSS and HTML".

Credits and reference:
http://www.fuzionpro.info/2010/11/add-horizontal-twitter-ticker-widget-to.html

Related Posts Plugin for WordPress, Blogger...

3 comments:

Anonymous said...

This is something i was looking for :-). Charmingly explained. sooo cool.

Anonymous said...

Cool

Sara said...

hi, im trying this and i have a problem.
i don't know where i have to put the .js thing, i could only do this in my web (wordpress) and i don't know how to continue o resolve this.
thanks
http://www.fastfashion.es

 
 
 

DZone

Business Insider (Tech)

TechCrunch

Mashable

Computer World

eWeek - RSS Feed