Twitter again

Je l'avais promis et voilà. J'ai amélioré intégration Twitter + Blogger et voici comment le faire. Je me suis basée sur l'article dans Sitepoint pour publier mes tweets sur le blog. Ce que j'explique ci dessous peut être intégré dans n'importe quel site ou blog.

Entre la solution facile et la difficile, je suis restée au beau milieu. J'ai pris la facile, puis je l'ai adaptée à mon goût.

La solution la plus simple consiste à aller sur la page Widget de Twitter. Il faut sélectionner pour mon site web. Il y a alors une liste avec plusieurs options à publier: les derniers tweets, les résultats de recherches, mes tweets favoris, ou encore une liste avec des personnes sélectionnées. J'ai cliqué sur mes derniers tweets, widget de profil, c'était mon but.

Ensuite apparaît une page à trois colonnes. A gauche sont les catégories de personnalisation du widget. Au centre se trouve une liste avec diverses options. A droite on voit un exemple de à quoi ressembleront nos tweets sur le site.

Dans préférences, je suggère de ne pas sélectionner la barre de défilement ni le chargement à intervalle régulier. En principe cela semble être une bonne idée, mais très bientôt ces tweets qui sautent aux yeux tout le temps énervent plus qu'autre chose.

Dans Apparences, on peut tout changer: la couleur de fond du widget, des tweets, les couleurs du texte, des liens. Il vaut mieux tout adapter parce que le standard est affreux. Faites attention aux couleurs, parce que plus tard on peut les changer directement sur le site. Nous y arriverons.

Dans dimensions, la largeur standard, c'est de 250 pixels. J'ai préféré largeur automatique au cas où je viendrais à changer l'apparence de mon blog. Par contre, il n'est pas possible d'avoir une hauteur automatique. Le standard est de 300 pixels. Pour moi, ça en a été de trop, je ne voulais publier que deux twitter à la fois. J'ai essayé 150 px, mais ça prenait trop de place. Je me suis débrouillée avec 120 px. Si plus tard je trouve ça trop court, je peux l'augmenter vers 130, voir 140 px; cependant, 150, c'est trop. Si aucune hauteur est sélectionnée, le widget n'apparaît pas sur votre page web. Vous devez définir une hauteur quelconque.

Au milieu de la page, il y a deux boutons: tester et terminer et récupérer le code. Au fur et à mesure que vous adaptez le widget à votre goût, testez-le. Il n'y a que les dimensions qu'on ne puisse pas voir sur le test.

Une fois ayant tout fait, cliquer sur le bouton terminer et récupérer le code. Soit vous copiez et coller le code sur votre page web, soit vous cliquez sur Add to Blogger comme j'ai fait. Une fois le code intégré sur votre site ou blog, vous pouvez encore le modifier. Par exemple, le code sera plus au moins comme ça:

<script src="http://widgets.twimg.com/j/2/widget.js"></script>
<script>
new TWTR.Widget({
  version: 2,
  type: 'profile',
  rpp: 4,
  interval: 6000,
  width: 250,
  height: 300,
  theme: {
    shell: {
      background: '#333333',
      color: '#ffffff'
    },
    tweets: {
      background: '#000000',
      color: '#ffffff',
      links: '#4aed05'
    }
  },
  features: {
    scrollbar: false,
    loop: false,
    live: false,
    hashtags: true,
    timestamp: true,
    avatars: false,
    behavior: 'all'
  }
}).render().setUser('lilianwhite').start();
</script>

Bien évidemment, ce code ci envoie vers mes tweets.

Ce qui est intéressant à voir, c'est une adaptation des couleurs pour encore mieux intégrer le widget. Dans mon blog, j'ai changé les couleurs du widget et des tweets. Ce n'était pas nécessaire de mettre la couleur de fond du site. J'ai simplement sélectionné les parties en lilas (les deux background), et j'ai tout mis transparent.

Au lieu de:

background: '#333333'

J'ai mis:

background: 'transparent'

Mon widget est devenu nettement plus classe.

Toutes les autres solutions de l'article de Sitepoint sont du Java Script. Ça permet une personnalisation plus poussée, y compris dans le CSS. Néanmoins, elles sont plus délicates et demandent des connaissances de base en informatique. Mon but ici est d'expliquer le moyen le plus simple pour que tous puissent publier leurs tweets sur les sites ou blogs respectifs.