cajita de mis twitters o comentarios en twitters para insertarlo en blogger o webs con estilo bonito

bueno esta es una cajita en el cual la podemos poner en un gadget en nuestro blog de nuestros twitters, para eso nesesitamos ser twitteros para que aparescan por asi decirlo nuestros comentarios de twitter en la cajita, yo por lo menos no soy twittero pero algunos si.

aqui puedes ver un ejemplo

clic aqui para ver ejemplo

1. lo que nesesitamos primero es subir este archivo a un hosting el cual sera llamado script.js osea ponemos este codigo y lo nombramos script.jsy lo subimos al hosting miremos el codigo:

var tweetUsers = ['id twitter 1'];
var buildString = "";

$(document).ready(function(){

 $('#twitter-ticker').slideDown('slow');
 
 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 = ' <div class="tweet">
     <div class="avatar"><a href="http://twitter.com/'+this.from_user+'" target="_blank"><img src="'+this.profile_image_url+'" alt="'+this.from_user+'" /></a></div>
     <div class="user"><a href="http://twitter.com/'+this.from_user+'" target="_blank">'+this.from_user+'</a></div>
     <div class="time">'+relativeTime(this.created_at)+'</div>
     <div class="txt">'+formatTwitString(this.text)+'</div>
     </div>';
  
  container.append(str);
 
 });
 
 container.jScrollPane();
}

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]:'');
}

aclaracion donde dice    var tweetUsers = ['id twitter 1']; ustedes en  id twitter 1 van a poner su identificacion de twitter osea que por ejemplo mi identificacion es andres8822 lo se por que mi url o id de twitter es  http://twitter.com/#!/andres8822   entonces en ese campo ponen la id de twitter suya en caso de que quieran agregar 2 identificaciones o mas por algun motivo agregan asi 


var tweetUsers = ['id twitter 1','id twitter 2']; ya serian 2 identificaciones quieren agregar otra entonces ,'id twitter 3' asi sucesivamente solo para los que quieran agregar mas cuentas.


 del resto para una cuenta osea la suya dejenla como esta arriba var tweetUsers = ['id twitter 1'];
luego de modificar var tweetUsers = ['id twitter 1']; poniendo su id de twitter le ponen el nombre de script.js  y lo suben al hosting. y copiamos la url donde quedo guardado el script.js 

2. luego de esto nos vamos para blogger y en diseño, edicion html y buscamos con control +f la siguiente palabra  </head>

antes de esa palabra ponen el siguiente codigo:

<!--twitter andres2288-->
<style type="text/css" rel="stylesheet" media="screen">
  @import "http://ensayandopopup.webcindario.com/misarchivos/twiter/twiterandres2288/demo.css";
  </style>

<link rel="stylesheet" type="text/css" href="http://ensayandopopup.webcindario.com/misarchivos/twiter/twiterandres2288/jScrollPane/jScrollPane.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="http://ensayandopopup.webcindario.com/misarchivos/twiter/twiterandres2288/jScrollPane/jquery.mousewheel.js"></script>
<script type="text/javascript" src="http://ensayandopopup.webcindario.com/misarchivos/twiter/twiterandres2288/jScrollPane/jScrollPane-1.2.3.min.js"></script>
<script type="text/javascript" src="url del script.js subido al hosting"></script>

<!--twitter andres2288-->

en donde esta el codigo <script type="text/javascript" src="url del script.js subido al hosting"></script> en donde dice   url del script.js subido al hosting ponen la url del archivo subido  luego de esto le dan guardar entonces en blogger ya queda guardado




3. por ultimo en blogger vayan a diseño , Añadir un gadget , escogen html/javascript y pegan el siguiente codigo:

<div id="main">



  <div id="twitter-ticker">
    <div id="top-bar">
      
      <div id="twitIcon"><img src="http://ensayandopopup.webcindario.com/misarchivos/twiter/twiterandres2288/img/twitter_64.png" width="64" height="64" alt="Twitter icon" /></div>
  
        <h2 class="tut">My tweets</h2>
        </div>
      
        <div id="tweet-container"><img id="loading" src="http://ensayandopopup.webcindario.com/misarchivos/twiter/twiterandres2288/img/loading.gif" width="16" height="11" alt="Loading.." /></div>
      
        <div id="scroll"></div>
    </div>
  
  
</div>

le dan guardar y listo eso es todo


luego les enseño a crear un arbol que crece con los comentarios de twitter y en las hojas ay comentarios de alguna identificacion de twitter que uno desea lo pueden ver en este ejemplo

arbolito con twitter por andres2288