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.