Categories: javascripttodas

Inserir twitter no site/blog (desatualizado)

Matéria desatualizada. Para inserir twitter use um widget desenvolvido pelo próprio twitter. Consulte http://twitter.com/about/resources/widgets

Os proprietários de blogs pessoais, notadamente aqueles instalados com WordPress, e que têm uma conta no twitter, certamente conhecem, ou usam, ou pelo menos já ouviram falar da existências de scripts destinados a inserir suas últimas “tuitadas” no blog.

Eu, neste blog, uso requisição para um script que mostra minhas duas últimas tuitadas, na coluna lateral.

Neste tutorial vou analisar passo a passo as etapas para instalar e fazer funcionar um script desenvolvido por Remy Sharp e destinado a inserir tuitadas no seu site ou blog.

Desenvolvi duas páginas demonstrando o resultado final do uso do script e forneço a seguir uma visão antecipada delas. A primeira sem estilização e a segunda estilizada. É claro que você pode personalizar a estilização de acordo com suas necessidades.

Script

O script pode ser baixado do Google e hospedado no seu servidor ou opcionalmente você pode linkar para ele, que se encontra hospedado pelo próprio Google (hotlink) adotando a marcação conforme mostrada a seguir:

  
<head>
...
<script src="http://twitterjs.googlecode.com/svn/trunk/src/twitter.min.js" type="text/javascript"></script>
...
</head>

Função `getTwitters()`

O script funciona fazendo executar uma função denominada getTwitters() tão logo se complete o carregamento da página.
A função admite dois parâmetos: o valor do atributo id do container das tuitadas e um objeto JavaScript definindo alguns argumentos como mostrado a seguir:

getTwitters(
 'meu-container', 
 { 
 string1: 'valor',
 string2: 'valor',
 string3: 'valor',
 string4: 'valor',
 ...
 });

O valor para o id do container (no exemplo: meu-container) é escolhido livremente pelo desenvolvedor e as strings do objeto são conforme relacionadas a seguir:

String	Descrição	Valor default
id	Seu nome no twitter
count	Quantidade de tuitadas a exibir. Máximo: 20.	1
clearContents	Esvazia o container antes de carregá-lo .	true
enableLinks	Torna clicável os links no texto, inclusive @replies e #hashtags.	true
ignoreReplies	Ignora tuitadas de respostas.	false
prefix	Usuário disse.	em branco
timeout	Tempo de espera para execução de onTimeout.	10
onTimeout	Função a ser executada quando ocorre timeout.
onTimeoutCancel	Cancela a requisição quando ocorre timeout.	false
newwindow	Abre links em uma nova janela.	false
callback	Função a ser executada quando se completa a requisição.
template	Marcação HTML para itens de lista contendo as tuitadas.

Exemplo

getTwitters(
 'tweet-container', 
 { 
 id: 'maujor', 
 count: 5, 
 enableLinks: true, 
 ignoreReplies: true, 
 clearContents: true,
 lang: 'pt-br',
 template: '<span class="imagem"><img height="50" width="50" src="%user_profile_image_url%" alt="%user_name%" /></span><span class="prefixo"><a href="http://twitter.com/%user_screen_name%/">%user_name%</a></span><span class="texto"> "%text%"</span> <a href="http://twitter.com/%user_screen_name%/statuses/%id%/" class="time">%time%</a>'
 });

Entendendo `template`

Variáveis para `template`

As variáveis para template são relacionadas a seguir.

text – texto completo da mensagem
id – id da mensagem
source – ferramenta usada para tuitar
time – tempo decorrido da tuitada
created_at – data da criação da tuitada
user_name – nome real do usuário
user_screen_name – nome twitter do usuário
user_id – id do usuário
user_profile_image_url – avatar
user_url – home page do usuário
user_location – localização do usuário
user_description – descrição do usuário

Como funciona `template`

O script gera automaticamente uma lista não ordenada (elemento ul) para receber dentro de seus itens (elementos li) o código HTML definido em template.

Template por sua vez é definido pelo desenvolvedor segundo duas regras simples.

Para exibir uma variável do template coloque-a entre sinais de porcentagem. Por exemplo: %user_screen_name%.
Use marcação HTML dentro do template para criar links e classes (ou ids) para estilização. Lembre-se que a marcação HTML que você criar será inserida dentro de um elemento li, portanto só insira no template elementos HTML válidos como descentes de li. Normalmente elementos a e span são suficientes.

Observe atentamente o template que usamos no nosso exemplo e tente entendê-lo.

Container

Para exibir as tuitadas você precisa criar apenas um container e a ele definir um id que será uma referência para o script.

Adicionalmente você pode colocar dentro do container uma mensagem de texto ou uma imagem tipo gif animada, indicadores de carregamento para serem exibidas enquanto não se conclui a requisição. A marcação do container adotada nos exemplos é mostrada a seguir:

<div id="tweet-container">
 <p>Por favor, aguarde... <img src="carregando.gif" alt="" /></p>
 <p><a href="http://twitter.com/maujor">Se o carregamento não se completar vá para minha página no twitter</a></p>
</div>

Estilização

A página estilizada que apresentei no início usa a seguinte folha de estilos.

body {
 background:#e3ffdd;
 margin:20px;
 font:12px arial, sans-serif;
 }
#tweet-container ul {
 background:#eee;
 color:#333;
 list-style:none;
 width:600px;
 padding:5px 15px;
 border:1px solid #ccc;
 }
#tweet-container .imagem img {
 display:block;
 float:left;
 margin-right:5px;
 }
#tweet-container li {
 min-height:40px;
 background:#fff;
 clear:both;
 border:1px solid #ccc;
 padding:5px;
 margin:4px 0;
 }
.time {
 font-size:11px;
 display:block;
 text-align:right;
 margin:5px 5px 0 0;
 }
#tweet-container ul a {
 color:#999;
 font-style:italic;
 }
#tweet-container ul a:hover {
 color:#ccc;
 text-decoration:none;
 }

Twitter interativo

Você não precisa ficar restrito à apresentação de tuitadas de um determinado usuário tão logo a página carregue. Com um pouco de criatividade e algum conhecimento básico de JavaScript você pode criar uma página contendo campos de formulário a serem preenchidos pelo usuário que ao ser submetido passará os dados para o objeto contendo as variáveis para apresentação das tuitadas. Aproveitando o exemplo estilizado que mostrei, desenvolvi uma página contendo um campo para entrada do nome de usuário twitter.

Naquela página você entra o nome válido de um tuiteiro no campo, clica o botão e são apresentadas as 5 últimas tuitadas dele.

Você poderá criar mais campos de formulário e controlar outras variáveis do objeto, como por exemplo o número de tuitadas a apresentar. Faça suas experiências e um bom uso do script.

Consulte o código fonte da página para maiores informações sobre o uso do formulário na requisição. Notar ainda que usei, neste exemplo, algumas váriaveis mais do objeto, inclusive uma função callback a ser executada caso a requisição falhe (por exemplo: se você entrar um nome não existente, após 12 segundos o script retornará uma mensagem de erro).

Maujor

Next Teste seu conhecimento 09 »

Previous « Navegação semântica com HTML 5

View Comments

Mario says:

08/04/2014 at 1:29

Demorei pra encontrar, mas achei obrigado Maujor
Joao says:

01/01/2014 at 22:59

Não está funcionando, ou seja, os tweets não estão aparecendo. O twitter mudou alguma coisa na api?
victei says:

18/05/2012 at 18:25

Muito bom este artigo, Major, principalmente pela facilidade de o adaptar ao theme wordpress que usamos em nosso site/blog.

Abraços!
Mauricio says:

16/12/2011 at 20:16

Muito bom .... parabéns!
Rafaelito says:

17/08/2011 at 3:28

Gostaria de listar somente os mentions tem como?
Valentim says:

09/08/2011 at 1:07

Belas dicas, muito didático e fácil de fazer!
Bruno says:

02/08/2011 at 19:04

Tem como listas em 2as colunas isso?? tipo em uma coluna listaria de 1 até 5 e na outra coluna listaria de 6 até 10

tem como fazer isso???
Samuel says:

11/07/2011 at 12:02

Olá Maujor. Bom dia. Eu estou usando o app há algum tempo, mais percebi que na última semana ele vem apresentando um erro, ele não carrega mais os últimos posts e aplica a mensagem de erro. A princípio imaginei que poderia ter sido alguma linha de programação alterada, mais não foi esse o motivo, pois entrei no seu exemplo e ele está apresentando o mesmo erro. Você já percebeu isso? como fazer para corrigir.

Aguardo pela resposta.
Fabricio Soares says:

13/05/2011 at 14:42

Grande Maujor vc eo cara graças suas ajudas, tenho aprndido muiiito continue assim sou seu fa.. vc saca pacas....
marcio says:

05/05/2011 at 12:38

Maujor, Otima materia... Teria como eu exibir dois twitter's diferente dentro de um mesmo bloco como o do exemplo twitter-com-estilos.html
???

Inserir twitter no site/blog (desatualizado)

Script

Função `getTwitters()`

Entendendo `template`

Variáveis para `template`

Como funciona `template`

Container

Estilização

Twitter interativo

View Comments

Recent Posts

Teste seu conhecimento #20

Teste seu conhecimento #19

JavaScript bubbling e capturing

HTML5 – W3C versus WHATWG

Seria esse o futuro das imagens responsivas?

BrazilJS Conf 2013

Inserir twitter no site/blog (desatualizado)

Script

Função getTwitters()

Entendendo template

Variáveis para template

Como funciona template

Container

Estilização

Twitter interativo

View Comments

Related Post

Recent Posts

Teste seu conhecimento #20

Teste seu conhecimento #19

JavaScript bubbling e capturing

HTML5 – W3C versus WHATWG

Seria esse o futuro das imagens responsivas?

BrazilJS Conf 2013

Função `getTwitters()`

Entendendo `template`

Variáveis para `template`

Como funciona `template`