digital-nation

Dans la suite de ce billet, je découvre de plus en plus les services de Twitter et j'ai difficile à m'en passer au quotidien.

Cela permet en plus de mettre facilement un petit contenu en ligne, de maintenir un site un peu "up to date" par ce que l'on fait, ce que l'on peut lire, etc.

Malheureusement, il y a quelques défaut. Si vous insérez le code fournis (tant Adobe Flash que Javascript), vous n'aurez aucune validation par le W3C.

Alors pourquoi ne pas faire quelques modifications simples pour ceux qui désirent utiliser cela via le web :

  <!-- debut de Twitter -->
  <div id="twitter">
      <p>Le Groumphy en direct <a href="http://twitter.com/statuses/friends_timeline/6611282.rss"><img src="images/flux_rss.gif" alt="Flux RSS Twitter de Groumphy" class="img_rss"></a></p>
    <object id="flash_twitter_perso"
type="application/x-shockwave-flash" data="http://twitter.com/flash/twitter_badge.swf">
      <param name="movie" value="http://twitter.com/flash/twitter_badge.swf">
      <param name="FlashVars" value="color1=10066329&type=user&id=6611282">
      <param name="allowScriptAccess" value="always">
      <param name="wmode" value="transparent">
  <!-- debut alternatif 1 badge Twitter -->
<ul>
<li id="my_twitter_status"></li>
<li id="my_twitter_status_time"></li>
</ul>
<script type="text/javascript" src="http://www.twitter.com/statuses/user_timeline/6611282.json?callback=_twitterCallback&count=1"></script>
<!-- fin alternatif 1 badge Twitter -->
<!-- debut alternatif 2 badge twitter -->
    <p>Le Groumphy en direct <a href="http://twitter.com/statuses/user_timeline/6611282.rss"><img src="images/flux_rss.gif" alt="Flux RSS Twitter de Groumphy" class="img_rss"></a></p>
<!-- fin alternatif 2 badge twitter -->
</object>
    <p>Le Groumphy en direct et ceux qu'il lit <a href="http://twitter.com/statuses/friends_timeline/6611282.rss"><img src="images/flux_rss.gif" alt="Flux RSS Twitter de Groumphy" class="img_rss"></a></p>
    <object id="flash_twitter" type="application/x-shockwave-flash" data="http://static.twitter.com/flash/twitter_timeline_badge.swf">
      <param name="movie" value="http://static.twitter.com/flash/twitter_timeline_badge.swf">
      <param name="FlashVars" value="user_id=6611282&color1=0x999999&color2=0x999999&textColor1=0x5E5E5E&textColor2=0x0&backgroundColor=0xCCCCCC&textSize=12">
      <param name="allowScriptAccess" value="always">
      <param name="wmode" value="transparent">
      <!-- debut de Twitter (alternatif 1) -->
      <div id="twitter_txt">
        <ul id="twitter_list">
          <li id="texte_twitter">
          <li>
          <li id="temps_passe"></li>
        </ul>
        <script type="text/javascript" src="http://www.twitter.com/statuses/user_timeline/6611282.json?callback=twitterCallback&count=1"></script>
        <p><a href="http://twitter.com/statuses/friends_timeline/6611282.rss">Suivez ce que fais le Groumphy et ceux qu'il lit (RSS)</a></p>
      </div>
      <!-- fin de Twitter (alternatif 1)-->
      <!-- debut de Twitter (alternatif 2) -->
      <noscript>
      <p> <a href="http://twitter.com/statuses/friends_timeline/6611282.rss">Suivez ce que fais le Groumphy et ceux qu'il lit (RSS)</a> </p>
      </noscript>
      <!-- fin de Twitter (alternatif 2) -->
      <!-- debut de Twitter (alternatif 3) -->
      <p><a href="http://twitter.com/Groumphy">Suivez les aventures de Groumphy</a><p>
        <!-- fin de Twitter (alternatif 3) -->
    </object>
  </div>
  <!-- fin de Twitter -->

Vous n'aurez qu'à personnaliser votre ID dans les URI et le tour est joué. Un simple copier-collé vous fera j'espère gagner du temps.

Pour le javascript, j'ai préféré doubler une fonction en place de les rassembler dans l'éventualité où vous ne désireriez qu'une partie du code Twitter.

Voici donc le javascript :

function relative_time(time_value) {
    var values = time_value.split(" ");
    time_value = values[1] + " " + values[2] + ", " + values[5] + " " + values[3];
    var parsed_date = Date.parse(time_value);
    var relative_to = (arguments.length > 1) ? arguments[1] : new Date();
    var delta = parseInt((relative_to.getTime() - parsed_date) / 1000);
    delta = delta + (relative_to.getTimezoneOffset() * 60);
    if (delta < 60) { return '(moins d\'une minute)'; } 
else if(delta < 120) { return '(il y \à une minute)'; } 
else if(delta < (45*60)) { return '(Il y \à' + (parseInt(delta / 60)).toString() + ' minutes)'; } 
else if(delta < (90*60)) { return '(Il y \à une heure)'; } 
else if(delta < (24*60*60)) { return '(plus de ' + (parseInt(delta / 3600)).toString() + ' heures)'; } 
else if(delta < (48*60*60)) { return '(Il y \à un jour)'; } 
else { return '(Il y \à ' + (parseInt(delta / 86400)).toString() + ' jours'; } }  
function twitterCallback(obj) {
var id = obj[0].user.id;
document.getElementById('texte_twitter').innerHTML = obj[0].text;
document.getElementById('temps_passe').innerHTML = relative_time(obj[0].created_at); }
function _twitterCallback(obj) {
var id = obj[0].user.id;
document.getElementById('my_twitter_status').innerHTML = obj[0].text;
document.getElementById('my_twitter_status_time').innerHTML = relative_time(obj[0].created_at);
}

En espérant à nouveau plein de découverte...