Inserir twitter no site/blog (desatualizado)
Publicado em: 2009-10-22 — 71.730 visualizacoes
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 mensagemid– id da mensagemsource– ferramenta usada para tuitartime– tempo decorrido da tuitadacreated_at– data da criação da tuitadauser_name– nome real do usuáriouser_screen_name– nome twitter do usuáriouser_id– id do usuáriouser_profile_image_url– avataruser_url– home page do usuáriouser_location– localização do usuário- u
ser_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 notemplateelementos HTML válidos como descentes deli. Normalmente elementosaespansã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).
Desenvolvimento com Padrões Web? Adquira os livros do Maujor
Visite o site dos livros.
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.
Demorei pra encontrar, mas achei obrigado Maujor
Não está funcionando, ou seja, os tweets não estão aparecendo. O twitter mudou alguma coisa na api?
Muito bom este artigo, Major, principalmente pela facilidade de o adaptar ao theme wordpress que usamos em nosso site/blog.
Abraços!
[…] Neste link, o Major ensina como inserir o twitter em um site, usando css e javascript. Não é voltado para sites wordpress, mas quem gosta de programar, vai achar interessante esse tutorial, na hora de criar ou adaptar um theme wordpress. […]
Muito bom …. parabéns!
Gostaria de listar somente os mentions tem como?
Belas dicas, muito didático e fácil de fazer!
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???
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.
Grande Maujor vc eo cara graças suas ajudas, tenho aprndido muiiito continue assim sou seu fa.. vc saca pacas….
Maujor, Otima materia… Teria como eu exibir dois twitter’s diferente dentro de um mesmo bloco como o do exemplo twitter-com-estilos.html
???
tem como adicionar um auto auto_refresh?
Muito bom….parabéns
Mayour, você é o kara.
Muito bom o script, o uso do Css ficou muito bom ainda pq dá para personalizar como eu quero.
grato
Esse scprit serve apenas apra blogs na plataforma wordpress?
Uso a plataforma do blog sapo.
Se responder, grato
Maujor testei aqui e me ajudou bastante.
Obrigado.
Bem legal o script! Tem como fazer o mesmo mas puxando os dados de uma lista do twitter?
Olá Maujor, é incrível como sempre encontro ou no teu blog ou no site exatamente o que eu preciso!! Obrigada por proporcionar esse compartilhamento de informações!
Abraço.
Maujor, estou precisando fazer uma coisa relacionada com o twitter e preciso de uma ajudinha.
O site aqui da empresa tem um twitter, hj todas as mensagen postadas no twitter são mostradas no site, mas o pessoal quer que apenas os post que não sejam da empresa apareçam, ou seja, os posts da empresa não podem aparecer.
Tem uma idéia de como faço isso?
Agradeço a atenção e fico no aguardo.
Abraço
Olá, Maujor, tudo bem ? Primeiramente muito obrigado pelo código, me ajudou bastante a integrar o twitter nos sites que desenvolvo. Contudo, estou desenvolvendo um site em Html5 e não está validando, imagina o que possa ser ? Quando mudei o head para html normal, ele conseguiu validar.
Agradeço …
Gostaria de saber se tem como postar uma mensagem em meu site e ela ir direto para o twuitter?
Bom dia.
Uma pergunta meio tosca, mas não sei onde coloco a Função getTwitters()..
Onde vai isso??
Olá Maujor! Legal o tutorial, mas pela minha pouco experiencia nesse assunto, gostaria de saber se tem um jeito simples que colocar , por exemplo, as 6 ultimas (twitadas que postei) no canto direito da minha webpage. pergunto isso, pois uso o Twitter para disparar algumas informacoes tecnicas (grafistas) do mercado acionario. gostaria q aparecesse na minha pagina tb, automaticamente. É muito dificil?
Obrigado de ante-mao!
Alysson
Vládia,
esse exemplo do Maujor é super customizável, basta você verificar o CSS (do template) e definir o visual como quiser.
Lincoln,
a variável ‘user_profile_image_url’ é que define a foto ser exibida ou não! No caso, teria que verificar as modificações de modo que cada ‘user’ busque seu próprio avatar no twitter.
oi, você sabe me dizer se existe a possibilidade de criar um twitter coletivo em que se veja na timeline a imagem de quem enviou a twitada? eu experimentei um aplicativo corporativo, dá pra postar mais de uma pessoa, mas a imagem é única para todo mundo. então não dá pra saber quem enviou. entende? obrigada.
também tô procurando um gadget com letras pequenas, um formato mais limpo e customizável em suas cores para colocar as minhas twitadas no blog, se souber de algum assim me avisa. eu já experimentei vários, mas tá difícil adaptar ao layout que é muito minimalista. obrigada
As vezes quando não consegue carregar abre uma janelinha do windows. Tem como mudar o texto informativo desta janelinha??
utilizei seu script no site http://www.batukere.com.br show!
Adorei a matéria! Obrigada
Olá!
Como eu faço para enviar mensagens do meu site para o twitter?
Ex.: ao cadastrar um usuário, no meu site, seja enviado uma mensagem para minha conta no twitter dizendo: usuário “fulano de tal” foi cadastrado!
fico no aguardo!
perfeito.. Exatamente o que eu estava procurando. Obrigado !
So funciona no firefox! Assim não serve….
Muito obrigado! Shooooooowww!!!
Só esta funcionando no firefox?!?! safari, chrome nenhum outro…
Olá, excelente tutorial
Ate +
ola será que nao tem algo contrario tipo ja vi alguns sites que quando o cara posta uma materia ja cai no twitter será que tem alguma dica de como fazer isso tipo eu tenho meu site quando eu postar uma nova noticia ele cai no meu twitter.. grato
muito bom entre logo
Olá Maujor! Muito obrigado pelo tutorial!
Gostaria de saber se é possível abrir o link de um Twitt em uma nova janela / tab do browser.
Valeu!
Olá, excelente tutorial, porém estou com uma dúvida.
Quando eu dou um update no twitter usando @FULANO, este update é simplesmente ignorado pelo meu site.
Ele não mostra nenhuma twittada com @reply.
Alguma sugestão?
Obrigado.
Valeu a dica com essa informação fica mais facil usar os recursos do wp.
Caro Maujor, antes de mais nada, muito obrigado pelo post.
Assim como o comentário 13, tenho a mesma dúvida. Gostaria de exibir também os twitts enviados em mentions para mim. Existe esta possibilidade?
Desde já, muito grato pela atenção.
Quando coloco a variavel created_at, o formato do texto fica assim Fri Jan 22 14:04:45 +0000 2010, tem alguma forma de manipular esse formato para por exemplo – 22 Jan 2010 14:04:45
ate mais
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!!
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!!!
Maujor, ja resolvi o “problema” portanto venho aqui agradecer pela bela explicacao para integrar o twitter ao website.
Felippe
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
Parabéns pela explicação. Mais uma vez aprendi o que precisava lendo o seu blog.
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!
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
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.
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
Grande Maujor !!
Excelente tutorial !
Parabéns !
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
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.
Digo
Declare nas CSS:
#tweet-container ul {
list-style: none;
}
#tweet-container é o nome do ID que você escolheu para o container.
Alguém sabe onde remover o “bolinha” do que insiste em aparecer? n encontro de jeito algum (se é que é culpa do li)
Grande Post Cara!!! Ficou muito bom!! e ajuda bastante!! =D
muito bom a dica
Muito boa a dica, aquele widget disponibilizado pelo twitter, é cheio de bugs. Vou estudar este, e tentar inserir. Valeu!
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!!!
[…] super didático, confira. […]
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.
gostei, principalmente das possibilidades de uso.
você citou o wordpress, mas tem alguma ligação? dá pra utilizá-lo em sites não-wp?