quarta-feira, 18 de maio de 2011

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.

Twitter again

Promessa é dívida. Melhorei a integração Twitter + Blogger e agora vai o como fazer. Baseei-me no artigo de Sitepoint para publicar meus tweets no blog. O que explico abaixo pode ser integrado em qualquer site ou blog.

Entre a solução fácil e a difícil, fiquei no meio. Peguei a fácil e a adaptei ao meu gosto.

A solução mais simples consiste em ir à página Widget do Twitter. Selecionar para o site. Aparece então uma lista com várias opções a publicar: os últimos tweets, resultados de buscas, tweets que eu defini como favoritos, ou listas com pessoas selecionadas. Cliquei nos últimos tweets, era meu objetivo.

Em seguida, aparece uma página com três colunas. À esquerda estão as categorias de personalização do widget. No centro encontra-se uma lista com diversas opções. À direita vê-se um exemplo de como os seus tweets aparecerão no seu site.

Em preferências, sugiro não selecionar o scrollbar nem os tweets sendo publicados a intervalos regulares. Em princípio, parece uma boa idéia, porém logo logo aqueles tweets que ficam pipocando toda hora irritam.

Em aparências, pode-se mudar tudo: a cor de fundo do widget, dos tweets, cores dos textos, dos links. Melhor adaptar tudo porque o que vem padronizado é pavoroso. É bom prestar atenção às cores porque mais tarde é possível modificar direto no site. Vamos chegar lá.

Em dimensões, a largura padrão é de 250 pixels. Preferi largura automática, caso mais tarde eu venha a mudar a aparência do blog. Em compensação, não dá para ter altura automática. O padrão é de 300 pixels. Para mim foi muito, eu só queria apresentar dois tweets de cada vez. Tentei 150 px, mas ocupava muito espaço. Me virei com 120 px. Se mais tarde eu achar curto, posso aumentar para 130, de repente 140, porém 150 é demais. Caso nenhuma altura seja selecionada, o widget não aparece na sua página web. Você tem de definir uma altura qualquer.

No meio da página há dois botões em baixo: testar e pegar o código. À medida em que você for adaptando o widget ao seu gosto, vá testando. Apenas as dimensões não se podem ver no teste.

Quando terminar tudo, clique no botão em baixo pegar o código. Ou você copia o código e cola na sua página web, ou você clica no botão Add to Blogger, como eu fiz. Uma vez em que você tiver o seu código integrado a seu site ou blog, você ainda pode adaptá-lo. Por exemplo, o código será mais ou menos assim:

<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>

Claro que este código vai para os meus tweets.

O que é interessante observar aqui, é uma adaptação nas cores para melhor integrar o widget. No meu blog mudei as cores do widget e dos tweets. Não foi necessário colocar a cor de fundo do site. Simplesmente, selecionei as partes que estão marcadas em lilás (os dois backgrounds) e coloquei tudo transparente.

Ao invés de:
background: '#333333'
Coloquei:
background: 'transparent'

Meu widget ficou muito mais classe.

As outras soluções do artigo do Sitepoint são todas em Java Script. Permitem uma personalização mais avançada, inclusive em CSS. No entanto, são mais delicadas e demandam uma base em informática. Meu objetivo aqui é explicar o modo mais simples para que todos possam publicar seus tweets nos respectivos sites ou blogs.