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
Rafael Wendel Pinheiro
É 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.
e como ajudou!! vlw geral
ótimo post! muito muito bom!
mt bom, valeus
Perfeito…obrigado…
Cara, valeu mesmo, muito útil, grato por compartilhar. Forte abraço.
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
Cara só não entendi a parte do importar widget
Rafael, recentemente essa barra não está funcionando. Houve alguma alteração ?
Ficou perfeito aqui no meu navegador. Obrigado desde já.
Esse foi o único site que ensinou realmente como funciona esse grande recurso. Gosto muito dos seus tutoriais. Sempre visito o seu blog. parabéns e sucesso sempre meu amigo Rafael Wendel.
Valeu André. Forte abraço!!!