Como colocar uma barra do twitter em seu site

Depois de algum tempo de ausência, aqui estou novamente com mais um post para o blog.

Hoje ensinarei uma maneira fácil de colocar uma barra do twitter(widget) em seu site. Com essa ferramenta, os seus visitantes poderão acompanhar seus últimos tweets enquanto navega pelas suas páginas. É uma forma de deixar o seu site mais elegante, além de atrair possíveis seguidores para seu perfil  na rede social que não para de crescer.

Então vamos lá. Primeiramente iremos criar um arquivo javascript com o nome de twitter.js .  Será nesse arquivo que colocaremos o código que se comunicará com a API do twitter. Vamos implementar as seguintes linhas:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
new TWTR.Widget({
  version: 2,
  type: 'profile',
  rpp: 2,
  interval: 6000,
  width: 220,
  height: 350,
  theme: {
    shell: {
      background: '#444444',
      color: '#ededed'
    },
    tweets: {
      background: '#ededed',
      color: '#242424',
      links: '#000000'
    }
  },
  features: {
    scrollbar: false,
    loop: false,
    live: false,
    hashtags: true,
    timestamp: true,
    avatars: false,
    behavior: 'all'
  }
}).render().setUser('rafaelwendel').start();

Explicação do código: Na linha 3 definmos o type como profile porque iremos pegar os tweets de um perfil do twitter (Poderia ser os tweets de acordo com hashtags). Nas linhas 6 e 7 colocamos as dimensões(largura e altura) da nossa barra. Das linhas 8 à 18 definimos as cores e da 19 à 27 o layout do widget. Na linha 28 é informado o usuário do twitter que será exibido. No exemplo eu coloquei o meu perfil do twitter (rafaelwendel) mas você irá alterar para o seu nome de usuário.

Com o arquivo javascript criado vamos agora ver exibir a barra em um documento html. Antes de mais nada é importante saber que para o nosso twitter.js funcionar precisamos importar o widget do twitter no endereço http://widgets.twimg.com/j/2/widget.js

Veja:

1
2
3
4
5
6
7
8
9
10
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
   <title>Widget do Twitter em seu Site</title>
   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
   <script src="http://widgets.twimg.com/j/2/widget.js"></script>
</head>
<body>
   <script src="twitter.js"></script>
</body>
</html>

Um arquivo html normal. No cabeçalho dele eu importo o widget do twitter.  Depois no corpo do documento eu apenas defino um script chamando o caminho do arquivo twitter.js que implementamos.

E pronto! Só executar para ver como funciona. Você verá algo semelhante ao da figura à seguir.

Agora é só escolher um espaço em seu site onde esse widget se encaixa melhor.

Espero ter ajudado.

Abs.

Siga-me no twitter: @rafaelwendel

É formado em Sistemas de Informação, pós-graduado em Sistemas de Banco de Dados e mestre em Educação com foco em Tecnologias Sociocomunitárias. Trabalha como professor de ensino técnico e tecnológico no Instituto Federal de Educação, Ciência e Tecnologia de São Paulo ministrando disciplinas nas áreas de programação, banco de dados, desenvolvimento de projetos e engenharia de software.

Posts relacionados

Comentários

  1. valeu mesmo…mas só umas dúvidas:
    tem como deixar a altura fixa? não tá ficando …
    e tem como tirar o topo da barra, formatar ela do jeito que quiser?

    abraço

Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *