loading...

Wednesday, November 10, 2010

Add horizontal twitter ticker widget to blogger

I Did a post on twitter ticker widget for blogger which is a vertical scrollable widget adapted from the of tutorialzine.Now i have modified the code and made it into a horizontal twitter ticker with fade effect using jquery.You can See a demo on blogger.I will teach the working and functioning of the code.Download the required the files.
Add horizontal twitter ticker widget to blogger

How to add horizontal twitter ticker
Step1(Html)
Add the following code to Html/javascript gadget in blogger.Make sure that after you added the code change the USERNAME.
<div id="twitter-ticker"><a href="http://twitter.com/USERNAME><img src="thttp://dl.dropbox.com/u/13256471/ticker/img/twitter_64.png"/>  <ul id="tweet-container"></a></ul>

Step2(CSS)
<style>
#tweet-container{
 width:auto;
 overflow:hidden;
}

#tweet-container {
 background: #d5e8ef;
 border: 1px solid #d5e8ef;
 -moz-border-radius: 7px;
 -webkit-border-radius: 7px;
 -khtml-border-radius: 7px;
 border-radius: 7px;
 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>

Step3
Add the scripts just before the head tag
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="script.js"></script>

Script.js
change the username in the script.js to yours(look for var tweetusers).the below part of code returns the tweets using the twitter search api.
var tweetUsers = ['fuzionpro'];
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);
});

Callback function to append the tweets as li elements
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 call for the fade effect
function InOut()
{
var initialFadeIn = 1000;

   var itemInterval = 5000;

   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);
}

9 comments:

  1. hi, great script, is exactly what I was looking for. But one thing I noticed is it doesn't work with all twitter users. Do you know why? I could make it work with some users, but not with others (just one tweetUser at the time)

    ReplyDelete
  2. ok, I found that the problem is the search API only shows tweets from last 7 days, anyway to display all tweets (older than 7 days too)?

    ReplyDelete
  3. This would be even better if I could come to this page without running into multiple ads that took over the screen!

    ReplyDelete
  4. glad i came across your blog, works great. i've a problem though, want to display the time or date of the tweet? how do i tweak this? your help is much appreciated

    ReplyDelete
  5. Great great script!!

    I too am interested in being able to show the date and time of the tweet. Please let me know if you have any tips to make it show. Thanks!

    ReplyDelete
  6. Can you make this into a Blogger widget the same way you have done with the other ticker? I would be very grateful! Thank you

    ReplyDelete
    Replies
    1. Can You Make Ticker Script Simple >>> Add to Blogger Widget

      Delete
  7. Can You Make Ticker Script Simple >>> Add to Blogger Widget

    ReplyDelete
  8. FIle deleted, can you upload it again? thanks!

    ReplyDelete

fuzionpro Headline

fuzionpro