Logo do siteSilhueta da face do Maujor seguida do texto Maujor o dinossauro das CSS

Menu hamburger Três barras horizontais na cor laranja destinadas a ser clicada para abrir o menu menu do site

Você está no BLOG do Maujor. IR PARA O SITE

Inserir twitter no site/blog (desatualizado)

Publicado em: 2009-10-22 — 62.415 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 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.

  1. Para exibir uma variável do template coloque-a entre sinais de porcentagem. Por exemplo: %user_screen_name%.
  2. 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).

Livros do Maujor

Desenvolvimento com Padrões Web? Adquira os livros do Maujor
Clique a "capinha" para visitar o site do livro.

capa livro Grid Layout   capa livro html5   capa livro css3   capa livro HTML5 e CSS3   capa livro RWD   capa livro jQuery   capa livro Bootstrap3   capa livro ajaxjQuery   capa livro css   capa livro html   capa livro javascript   capa livro jQuery Mobile   capa livro jQuery UI   capa livro SVG   capa livro foundation   capa livro Sass e Compass

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.

62 comentários na matéria: “Inserir twitter no site/blog (desatualizado)”

  1. MarioNo Gravatar disse:

    Demorei pra encontrar, mas achei obrigado Maujor

  2. JoaoNo Gravatar disse:

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

  3. victeiNo Gravatar disse:

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

    Abraços!

  4. Como integrar o twitter ao seu blog WordPress | ZanTutos disse:

    […] 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. […]

  5. MauricioNo Gravatar disse:

    Muito bom …. parabéns!

  6. RafaelitoNo Gravatar disse:

    Gostaria de listar somente os mentions tem como?

  7. ValentimNo Gravatar disse:

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

  8. BrunoNo Gravatar disse:

    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???

  9. SamuelNo Gravatar disse:

    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.

  10. Fabricio SoaresNo Gravatar disse:

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

  11. marcioNo Gravatar disse:

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

  12. eDMARNo Gravatar disse:

    tem como adicionar um auto auto_refresh?

  13. MauricioNo Gravatar disse:

    Muito bom….parabéns

  14. Mathias ZalesNo Gravatar disse:

    Mayour, você é o kara.
    Muito bom o script, o uso do Css ficou muito bom ainda pq dá para personalizar como eu quero.
    grato

  15. nolienotrueNo Gravatar disse:

    Esse scprit serve apenas apra blogs na plataforma wordpress?
    Uso a plataforma do blog sapo.

    Se responder, grato

  16. RafaelNo Gravatar disse:

    Maujor testei aqui e me ajudou bastante.
    Obrigado.

  17. Rodrigo BrandãoNo Gravatar disse:

    Bem legal o script! Tem como fazer o mesmo mas puxando os dados de uma lista do twitter?

  18. Isabel Stumpf MitchellNo Gravatar disse:

    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.

  19. RobertNo Gravatar disse:

    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

  20. Thiago dos AnjosNo Gravatar disse:

    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 …

  21. VanessaNo Gravatar disse:

    Gostaria de saber se tem como postar uma mensagem em meu site e ela ir direto para o twuitter?

  22. felipeNo Gravatar disse:

    Bom dia.

    Uma pergunta meio tosca, mas não sei onde coloco a Função getTwitters()..

    Onde vai isso??

  23. AlyssonNo Gravatar disse:

    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

  24. Anderson ButilheiroNo Gravatar disse:

    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.

  25. Vládia QueirozNo Gravatar disse:

    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

  26. LincolnNo Gravatar disse:

    As vezes quando não consegue carregar abre uma janelinha do windows. Tem como mudar o texto informativo desta janelinha??

  27. GetulioNo Gravatar disse:

    utilizei seu script no site http://www.batukere.com.br show!

  28. AnaNo Gravatar disse:

    Adorei a matéria! Obrigada

  29. Otávio NogueiraNo Gravatar disse:

    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!

  30. ViniciusNo Gravatar disse:

    perfeito.. Exatamente o que eu estava procurando. Obrigado !

  31. EduardoNo Gravatar disse:

    So funciona no firefox! Assim não serve….

  32. Diego DuarteNo Gravatar disse:

    Muito obrigado! Shooooooowww!!!

  33. DigoNo Gravatar disse:

    Só esta funcionando no firefox?!?! safari, chrome nenhum outro…

  34. BoxNo Gravatar disse:

    Olá, excelente tutorial
    Ate +

  35. dhuanklesNo Gravatar disse:

    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

  36. ailton tavares pontesNo Gravatar disse:

    muito bom entre logo

  37. Rodrigo LelesNo Gravatar disse:

    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!

  38. MoisesNo Gravatar disse:

    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.

  39. marcelo portoesNo Gravatar disse:

    Valeu a dica com essa informação fica mais facil usar os recursos do wp.

  40. Guilherme NeryNo Gravatar disse:

    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.

  41. evertonNo Gravatar disse:

    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

  42. RenataNo Gravatar disse:

    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!!

  43. GelsonNo Gravatar disse:

    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!!!

  44. FelippeNo Gravatar disse:

    Maujor, ja resolvi o “problema” portanto venho aqui agradecer pela bela explicacao para integrar o twitter ao website.

    Felippe

  45. FelippeNo Gravatar disse:

    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

  46. Maicon SobczakNo Gravatar disse:

    Parabéns pela explicação. Mais uma vez aprendi o que precisava lendo o seu blog.

  47. DavidNo Gravatar disse:

    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!

  48. Daubert GonçalvesNo Gravatar disse:

    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

  49. LeanderNo Gravatar disse:

    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.

  50. Rodrigo GonçalvesNo Gravatar disse:

    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

  51. EdmundoNo Gravatar disse:

    Grande Maujor !!

    Excelente tutorial !
    Parabéns !

  52. AntonioNo Gravatar disse:

    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

  53. Alexandre Tavares SergioNo Gravatar disse:

    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.

  54. MaujorNo Gravatar disse:

    Digo
    Declare nas CSS:
    #tweet-container ul {
    list-style: none;
    }

    #tweet-container é o nome do ID que você escolheu para o container.

  55. DigoNo Gravatar disse:

    Alguém sabe onde remover o “bolinha” do que insiste em aparecer? n encontro de jeito algum (se é que é culpa do li)

  56. PotterNo Gravatar disse:

    Grande Post Cara!!! Ficou muito bom!! e ajuda bastante!! =D

  57. andersonNo Gravatar disse:

    muito bom a dica

  58. LuizNo Gravatar disse:

    Muito boa a dica, aquele widget disponibilizado pelo twitter, é cheio de bugs. Vou estudar este, e tentar inserir. Valeu!

  59. Luiz AquinoNo Gravatar disse:

    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!!!

  60. No blog do Maujor: Inserir twitter no site/blog | Leo Balter disse:

    […] super didático, confira. […]

  61. MaujorNo Gravatar disse:

    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.

  62. HazNo Gravatar disse:

    gostei, principalmente das possibilidades de uso.
    você citou o wordpress, mas tem alguma ligação? dá pra utilizá-lo em sites não-wp?

Comentário:





Teclar "Enter" cria um novo parágrafo. Teclar "Shift + Enter" causa uma quebra de linha.

Subscribe without commenting

topo