Inserir twitter no site/blog

Publicado em: 2009-10-22 — 5.104 visualizacoes

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

Retweet this post

----------------x-x-x--------------- fim da matéria ---------------x-x-x---------------

Livros do Maujor

Enquete

Lamento. Não há enquetes no momento.

Ver arquivos de enquetes

Esta matéria foi publicada em: 2009-10-22 (quinta-feira). Subscreva o feed RSS 2.0 para comentários.
Comente abaixo, ou link para http://www.maujor.com/blog/2009/10/22/inserir-twitter-no-siteblog/trackback no seu site.

21 comentários na matéria: “Inserir twitter no site/blog”

Haz disse: 2009 - 10 - 22 12:57 GMT
gostei, principalmente das possibilidades de uso.
você citou o wordpress, mas tem alguma ligação? dá pra utilizá-lo em sites não-wp?
Maujor disse: 2009 - 10 - 22 13:13 GMT
Haz
A finalidade é exatamente esta, sites não WP
Para o WP existem plugins.
Este script é bom para sites e blogs que não dispõem de plugins.
No blog do Maujor: Inserir twitter no site/blog | Leo Balter disse: 2009 - 10 - 22 13:46 GMT
[...] super didático, confira. [...]
Luiz Aquino disse: 2009 - 10 - 23 10:20 GMT
Hei Maujor beleza?

Fui no Blog do Autor para saber se havia a possibilidade de fazer a busca por meio de hashtag parece que não existe essa função, mas seria muito bom acrescentar essa string no widget.

Abraços!!!
Luiz disse: 2009 - 10 - 27 14:07 GMT
Muito boa a dica, aquele widget disponibilizado pelo twitter, é cheio de bugs. Vou estudar este, e tentar inserir. Valeu!
anderson disse: 2009 - 11 - 2 15:40 GMT
muito bom a dica
Potter disse: 2009 - 11 - 10 0:30 GMT
Grande Post Cara!!! Ficou muito bom!! e ajuda bastante!! =D
Digo disse: 2009 - 11 - 14 1:45 GMT
Alguém sabe onde remover o “bolinha” do que insiste em aparecer? n encontro de jeito algum (se é que é culpa do li)
Maujor disse: 2009 - 11 - 14 11:09 GMT
Digo
Declare nas CSS:
#tweet-container ul { list-style: none; }
#tweet-container é o nome do ID que você escolheu para o container.
Alexandre Tavares Sergio disse: 2009 - 11 - 14 11:31 GMT
Na verdade, eu uso o bom e velho JS do Twitter. Não que ele faça tudo, mas mostra meus últimos “twitts”.

Vejam a simplicidade (retirei os propositalmente, claro!):

script type=”text/javascript” src=”http://twitter.com/javascripts/blogger.js”>/script

script type=”text/javascript” src=”http://twitter.com/statuses/user_timeline/SEUNICKAQUI.json?callback=twitterCallback2&count=3″>/script

Estou mesmo trabalhando agora em uma versão que mostre os “twitts” que eu veria se estivesse logado em minha página inicial do Twitter. Quero integrar essa funcionalidade ao meu #app, criado especificamente para eu Twittar diretamente do meu Blog, sem ajuda de CMS algum (dei o nome a ele de AlexTweetie).

Sou meio aficcionado por programação.
Antonio disse: 2009 - 11 - 14 11:36 GMT
Eu uso o Juitter, feito por brasileiro, embora o site seja em ingles, acho muito mais simples que esse e completo.

Mas excelente dica, []’s
Edmundo disse: 2009 - 11 - 16 14:17 GMT
Grande Maujor !!

Excelente tutorial !
Parabéns !
Rodrigo Gonçalves disse: 2009 - 12 - 2 14:01 GMT
Maujor obrigado pelo Tutorial excelente porem ficou uma dúvida a qual não consegui resolver gostaria de exibir tambem os twitts enviados em mentions para mim !!! Existe essa possibilidade ?

Desde ja agradecido
Leander disse: 2009 - 12 - 7 1:11 GMT
Muito bom, mas tenho uma dúvida: qdo vou abrir a página pela primeira vez, ele pede meu login e senha do Twitter. Como faço para exibir meus tweets sem pedir esse login? Obrigado.
Daubert Gonçalves disse: 2009 - 12 - 28 11:13 GMT
Bom dia Maujor.
Sou um verdadeiro ogro em programação e gostaria de saber se você pode me passar algo tipo “plug and play” rs. Pra vc ter uma idéia da antiguidade eu estudei basic rs
Estou interessado em colocar notícias do meu twitter no site mas não consegui com suas explicações acima devido a falta de conhecimento.
Gostaria de algo como está no site http://www.jornaldelimeira.com.br
Obrigado pela atenção
David disse: 2009 - 12 - 29 21:45 GMT
No meu aqui deu tudo certo, porém ele ficou com uma margem muito grande…
Qual que eu mudo pra deixar sem margem?

Abraços!
Maicon Sobczak disse: 2009 - 12 - 31 16:56 GMT
Parabéns pela explicação. Mais uma vez aprendi o que precisava lendo o seu blog.
Felippe disse: 2010 - 01 - 5 14:21 GMT
Maujor, como vai?

Inseri o twitter com facilidade no meu site mas o W3C acusa inválido o uso de SPAN nessa área do javascript, então coloquei dentro de uma DIV mas agora acusa problema com a DIV. Uso doctype XHTML 1.0 Strict e, caso possa me ajudar, está aqui o relatório de erro: http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fwww.unanimo.net%2F2010%2F%233#jumpbar

Muito obrigado!

Felippe
Felippe disse: 2010 - 01 - 12 15:24 GMT
Maujor, ja resolvi o “problema” portanto venho aqui agradecer pela bela explicacao para integrar o twitter ao website.

Felippe
Gelson disse: 2010 - 01 - 12 21:07 GMT
Muito Obrigado pelo artigo, era isso que eu precisa para colocar no meu site, parabéns tá funcionando perfeitamente e atendendo a minha necessidade que era deixar meus clientes alertas das notícias de forma rápida e prática. Feliz 2010 Maujor!!!
Renata disse: 2010 - 01 - 12 21:41 GMT
Olá Maujor! tudo bom?
Obrigada pelas dicas!! adorei!!!
só queria saber como faz para abrir o link (de uma msg twitada) em uma nova tab do browser.

obrigada!!