Fui perguntado algumas vezes sobre qual plugin do WordPress eu uso para gerar a lista "Feed do Twitter" no rodapé do meu site. Na verdade, eu não uso nenhum plugin, é um trecho de Javascript do Twitter que exibe uma lista dos meus tweets recentes que eu estilizei com CSS. Neste tutorial, eu mostrarei a você:
- O código HTML e Javascript necessário para buscar os tweets mais recentes
- Uma visão geral do markup HTML e dos seletores CSS associados
- Dois exemplos de widgets personalizados do Twitter que eu mesmo usei
Continue lendo para ver o resto do tutorial...
O HTML e o Javascript
O Twitter costumava fornecer este código em seu site, mas por algum motivo o removeu em favor destes widgets muito menos flexíveis. Você precisará de dois trechos de código.
Primeiro, coloque o seguinte código onde você quer que a lista apareça:
<ul id="twitter_update_list"><li>Twitter feed loading</li></ul>Observação: O <li>Twitter feed loading</li> não faz parte do código original fornecido pelo Twitter, mas é necessário para que o HTML seja válido. Ele também pode fornecer uma mensagem útil enquanto o feed está carregando, pois pode levar alguns segundos em um dia lento.
Segundo, você precisará colocar as seguintes linhas de Javascript o mais perto possível da tag </body>.
<script type="text/javascript" src="http://twitter.com/javascripts/blogger.js"></script>
<script type="text/javascript" src="http://twitter.com/statuses/user_timeline/USERNAME.json?callback=twitterCallback2&count=3"></script>Atualmente, eu o tenho logo acima do meu código do Google Analytics. Você deve manter essas linhas de Javascript o mais baixo possível na página, pois, caso o Twitter não carregue, tudo abaixo desse código ficará pendurado (o que não é um grande problema se já estiver no final).
Visão Geral do Markup HTML e Seletores CSS
Agora você não pode ver o markup HTML que o widget do Twitter gera sem usar algo como a Barra de Ferramentas do Desenvolvedor Web. Sorte sua, eu fiz isso por você. Aqui está uma lista de exemplo com apenas um tweet como exemplo.
<ul id="twitter_update_list">
<li><span>RT @<a href="http://twitter.com/Screenr">Screenr</a>: Cool Screenr update: Now your screencasts publish twice as fast. <a href="http://screenr.com/aDp">http://screenr.com/aDp</a></span> <a style="font-size: 85%;" href="http://twitter.com/themelab/statuses/14229492866">46 minutes ago</a></li>
</ul>#twitter_update_list– Seleciona a lista inteira#twitter_update_list li– Seleciona itens individuais da lista#twitter_update_list li span– Seleciona a parte do “tweet” do item da lista, não o link de tempo atrás#twitter_update_list li span a– Seleciona o link dentro da parte do “tweet” do item da lista#twitter_update_list a[style="font-size: 85%;"]– Seleciona o link de “tempo atrás”, de uma forma um tanto improvisada (veja a nota abaixo).
Nota: Como há um estilo inline no link de tempo atrás que define o tamanho da fonte em 85%, torna-se um pouco difícil de substituir sem um código improvisado. Eu já usei isso antes para redefinir o tamanho da fonte para o mesmo do resto da lista:
#twitter_update_list a[style="font-size: 85%;"] { font-size: 1em !important; }Isso provavelmente não funciona em versões antigas do IE por causa da parte “!important”. Você também pode usar display: block; para mover esse link para a próxima linha.
Exemplo ao Vivo
Para um exemplo ao vivo, confira o rodapé do Theme Lab. Ou, se você estiver lendo isso em seu leitor de feed ou em um site de scraping não autorizado, confira a captura de tela abaixo.
Aqui está o código que uso para a lista:
#twitter_update_list {
font-size: 13px;
line-height: 21px;
list-style: none;
}
#twitter_update_list li {
background: url('images/twitter-divider.gif') bottom left repeat-x;
padding-bottom: 7px;
margin-bottom: 9px;
}
#twitter_update_list span, #twitter_update_list span a {
color: #ababab;
text-decoration: none;
}
#twitter_update_list a {
color: #6f7276;
}- A primeira linha seleciona a lista inteira. Ela define o tamanho da fonte, a altura da linha e garante que nenhum marcador apareça.
- A segunda linha faz uma pequena imagem de 2×1 repetir abaixo de cada item da lista como uma espécie de divisor. O preenchimento define o espaço entre o tweet e a borda superior do divisor. A margem define o espaço entre a borda inferior do divisor e o próximo tweet.
- A terceira linha define a cor do tweet, incluindo links, e garante que nenhuma linha apareça abaixo dos links.
- A última linha define a cor do link de “tempo atrás”.
E é isso! Se eu tivesse que mudar uma coisa, eu diferenciaria os links dentro do tweet de alguma forma, e talvez adicionaria efeitos de hover nos links também.
Isso Pode Ser Usado em Qualquer Site
Ao contrário de todos os outros posts de como fazer XYZ sem um plugin por aí, nenhum código real do WordPress é usado neste tutorial.
Como este não usa nenhum código do WordPress, ele não está arquivado na coleção Tutoriais do WordPress. Ele pode ser usado em praticamente qualquer tipo de site, assumindo que você possa editar o código-fonte HTML e CSS.
Se você quiser usá-lo dentro do WordPress, sugiro editar manualmente os arquivos do seu tema para inserir as duas linhas de Javascript no rodapé do seu site, ou até mesmo conectá-lo ao seu hook wp_footer().
Quanto ao widget em si, você pode colar o código dentro de um widget de texto ou codificá-lo manualmente na sua barra lateral (ou onde quer que seja).
Conclusão
Espero que todos tenham gostado do tutorial, adoraria ouvir suas opiniões nos comentários. Se você tiver algum pedido de dicas rápidas de WordPress ou CSS, sinta-se à vontade para me informar. Pode ser apresentado em um futuro post da Terça-feira de Tutoriais no Theme Lab!
Tutorial brilhante. Obrigado.
Você pode me dizer como fazer o link 'há X tempo' ficar no canto inferior direito, longe do texto, como você tem no seu site?
Muito obrigado
Se houver alguém interessado na tradução para outros idiomas do link "há X tempo", digo que acabei de baixar o blogger.js, modifiquei e funcionou.
Você só precisa traduzir as legendas, não mexa no código, aqui está um exemplo.
if (delta < 60) { return 'há menos de um minuto'; } else if(delta < 120) { return 'há aproximadamente um minuto'; } else if(delta < (60*60)) { return 'há ' + (parseInt(delta / 60)).toString() + ' minutos'; } else if(delta < (120*60)) { return 'há aproximadamente uma hora'; } else if(delta < (24*60*60)) { return 'há ' + (parseInt(delta / 3600)).toString() + ' horas'; } else if(delta < (48*60*60)) { return 'há um dia'; } else { return 'há ' + (parseInt(delta / 86400)).toString() + ' dias'; }
A propósito, muito obrigado pelo tutorial, me ajudou bastante.
Olá Leland,
Obrigado pelo seu script! Quase consegui fazer funcionar como eu quero... Há alguma chance de corrigir o tamanho da lista? Quero gerar a lista dentro de uma célula, mas quando os tweets excedem a célula, a célula explode!
Fantástico, mas não estou obtendo um resultado (.js novato). Meu site (callumflack.com) apenas renderiza "twitter feed loading" sem realmente puxar o feed do twitter. Verifiquei tudo neste post, mas sem sucesso. O que eu perdi? Sua ajuda é muito apreciada.
obrigado por isso 🙂 você pode alterar os links dentro dos tweets usando '#twitter_update list span', depois o tempo dos tweets usando '#twitter_update list span a'. além disso, usar last-child remove a linha horizontal abaixo do último tweet. veja abaixo meu código.
#twitter_update_list { font-size: 10px; line-height: 15px; list-style: none; }
#twitter_update_list li { background: url(‘images/1px-grey.gif’) bottom left repeat-x; padding-bottom: 10px; margin-bottom: 10px; }
#twitter_update_list li:last-child { background: none; }
#twitter_update_list span { color: #856f6a; text-decoration: none; display: inline; }
#twitter_update_list span a { color: #fb3898; display: inline; }
#twitter_update_list a { color: #b3a39f; display: block; }
Não se preocupe, eu descobri. É isto:
http://api.twitter.com/1/favorites.json?screen_name=USERNAME&callback=twitterCallback2&count=5
Obrigado por isto. Para aqueles que perguntaram...
Você pode mudar isto para uma lista mudando a primeira parte da URL no segundo script de:
http://twitter.com/statuses/user_timeline/USERNAME.json?
para
http://api.twitter.com/1/USERNAME/lists/LISTNAME/statuses.json?
Olá,
Bom tutorial. No entanto, meu site começou mostrando 3 tweets, agora é muito esporádico e às vezes decide mostrar 2 ou 1.
Estou sendo burro aqui?
Rob
Essa é uma boa pergunta. Notei que quando você retuíta (como no retweet oficial do Twitter) algo, isso não aparece, e em vez disso, apenas mostra um tweet a menos.
Eu detesto muito a aparência dos feeds oficiais do Twitter, então fiquei feliz em encontrar seu site. O tutorial foi muito informativo e fácil de seguir, e mal posso esperar para incorporar isso na reformulação do meu site.
Ótimo artigo.
Tive que alterar o & top & para que o HTML fosse validado.
Bom trabalho!
Sei que isso foi postado há um tempo, mas existe uma maneira de separar o tweet mais recente dos tweets anteriores para que você possa colocar um rótulo neles como "Último Tweet" e "Tweets Antigos"?
Adorei isso! Existe uma maneira de forçar os links dentro de cada tweet a abrir em uma nova janela?
Não tenho certeza onde cada pedaço de código vai dentro do meu site wp – você pode confirmar…
1ª parte – onde eu quero o feed (ex: widget de texto)?
2ª parte – folha de estilo?
3ª parte – ?
4ª parte – ?
5ª parte – ?
Agradeço desde já
Me sinto burro… Mas… Onde você escreve o nome de usuário??? Eu não entendo… Se eu copiar/colar não funciona…
Este é um pequeno widget legal. Uma observação – se você adicionasse um “position: relative;” ao elemento HTML que tem o “overflow: auto;” nele, você corrigiria um bug que estava acontecendo no IE7 (basicamente a caixa de rolagem não estava funcionando).
Tutorial muito bom, o único problema com isso é (a menos que eu tenha feito algo errado), ele só mostra seus tweets pessoais, não, por exemplo, se você retuita algo. O que é uma pena :/
Apenas mude o
count=3paracount=6no trecho de Javascript.Olá,
Eu acho que se você mudar seu Javascript para incluir “&include_rts=1” logo após seu nome de usuário, por exemplo: http://api.twitter.com/1/statuses/user_timeline.json?screen_name=thelibzter&include_rts=1&callback=twitterCallback2&count=6.
Aqui está um post que escrevi sobre como incluir retweets no feed personalizado do Twitter – http://icode4you.net/including-retweets-in-your-custom-twitter-feeds.
Olá,
Obrigado pelo seu ótimo compartilhamento e trabalho. Estou usando seu método do Twitter na minha página inicial e adorei.
No momento, ele exibe 3 tweets. Posso dobrar para 6?
Obrigado antecipadamente!
parabéns
Xavier
Obrigado por isso, é EXATAMENTE o que eu preciso para o meu site — funcionou perfeitamente!
existe uma maneira de usar este código com vários feeds do Twitter? digamos que eu quisesse colocar o feed de outra pessoa logo abaixo do primeiro na mesma página, como eu faria isso?
obrigado.
Essa é uma pergunta muito boa, mas não tenho certeza se é possível com este método, já que o feed está diretamente ligado a um único nome de usuário.
Tenho a sensação de que, se você adicionasse várias linhas de
<script type="text/javascript" src="http://twitter.com/statuses/user_timeline/USERNAME.json?callback=twitterCallback2&count=3"></script>com nomes de usuário diferentes, ele ficaria confuso de alguma forma.Ótimo tutorial. Eu estava procurando algo exatamente como isso.
Uma pergunta, é possível com este código mudar o feed de um usuário específico para uma lista específica do Twitter?
Boa pergunta, embora, até onde sei, este código só funciona com usuários específicos.
Tutorial verdadeiramente excelente, especialmente o truque do "há quanto tempo". Muito obrigado por postar!
Exatamente o que eu preciso para meu redesenho. Obrigado por isso.
Muito obrigado por este conselho simples! Funcionou em um site que desabilitou o javascript por algum motivo. Não mostra gráficos, mas funciona! E links (como twitpic & bit.ly) também funcionam!
Ótimo trabalho, cara!
Fantasticamente útil, obrigado. Interessante que http://twitter.com/javascripts/blogger.js e similares ainda estejam lá, sem links óbvios de twitter.com.
Bem, espero que eles continuem a dar suporte para fins de legado por algum tempo, muitas pessoas ainda o utilizam.
Não sei por que o Twitter removeu esses widgets do site deles, mas antes, quando eu o usava no meu site Blogger, funcionava muito bem.
Acho que eles o removeram em favor de seus widgets mais "de marca", embora o código que eles costumavam ter (o mesmo código que estou usando) ainda funcione.