PROMOÇÃO - Magazine Luiza - NÃO PERCA!

Encontre no blog...

04/10/2015

Crie widgets para o seu blog e mostre tudo o que rola no Twitter

Crie widgets para o seu blog e mostre tudo o que rola no Twitter - Visual Dicas

Widgets oficiais para blogs

Escrito originalmente em 07/01/2014 | Atualizado em 04/10/2015

Neste post vamos apresentar alguns widgets bem bacanas (para saber mais sobre widgets, leia: Widget, o que é e para que serve?) para você mostrar aos seus leitores tudo o que rola no seu Twitter: atualizações mais recentes, resultados de busca em tempo real, tweets favoritos e tweets de amigos que estão incluídos nas suas listas…

Crie widgets para o seu blog e mostre tudo o que rola no Twitter - Visual Dicas

Escolha o seu Widget

  Acesse o twitter.com e entre com o celular, e-mail ou nome do usuário e senha da sua conta...

(Se não tiver conta ainda, clique no botão [Inscreva-se]. Depois preencha o cadastro e siga as instruções do twitter.)

Crie widgets para o seu blog e mostre tudo o que rola no Twitter - Visual Dicas

No menu superior clique no botão que mostra a imagem do seu perfil - botão [Perfil e Configurações].

Crie widgets para o seu blog e mostre tudo o que rola no Twitter - Visual Dicas

Selecione [Configurações].

Crie widgets para o seu blog e mostre tudo o que rola no Twitter - Visual DicasCrie widgets para o seu blog e mostre tudo o que rola no Twitter - Visual Dicas

No menu lateral, selecione [Widgets] e clique no botão [Criar novo].

Crie widgets para o seu blog e mostre tudo o que rola no Twitter - Visual Dicas

No menu, escolha o tipo de widget que você desejar: Histórico do Usuário, Curtiu (favoritos), Lista ou Buscar

Crie widgets para o seu blog e mostre tudo o que rola no Twitter - Visual Dicas

Widget Histórico do Usuário

Este widget exibe os tweets mais recentes do seu perfil ou de algum usuário do Twitter que pode ser colocado em qualquer página web , como blogs, sites ou até mesmo em redes sociais. Para criar o seu widget, siga os passos abaixo:

1) Defina o Nome de Usuário. (mantenha o seu nome de usuário ou digite o nome de qualquer outro perfil cadastrado no Twitter).

Crie widgets para o seu blog e mostre tudo o que rola no Twitter - Visual Dicas

No exemplo abaixo, digitamos o nome de usuário: @pele (o nome do usuário aparece sempre depois do símbolo @). O widget então mostrará todas as atualizações do perfil digitado.

Crie widgets para o seu blog e mostre tudo o que rola no Twitter - Visual Dicas

2) Defina as opções Excluir respostas (se marcado, não aparecerá as respostas para os tweets mais recentes) e Expandir fotos automaticamente (se marcado, as fotos ficam expandidas na dimensão máxima do widget).

Mantenha a Altura padrão (no passo 6 mostraremos como alterar a Altura e a Largura padrão do widget – 600px altura por 520px largura).

Em Tema defina se Claro (para sites com tons claros) ou Dark (sites com fundo escuro) e finalmente escolha a cor do link (o padrão é azul).

3) Após definir todas as configurações, clique no botão [Criar widget].

Crie widgets para o seu blog e mostre tudo o que rola no Twitter - Visual Dicas

4) Copie o código que aparece abaixo da Visualização.

image

No nosso exemplo, veja o código HTML que foi criado.

<a class="twitter-timeline"  href="https://twitter.com/visualdicas" data-widget-id="650808948132552705">Tweets de @visualdicas</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+"://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>                   

Após copiar o código, não esqueça de salvar o widget criado. Clique no botão [Salvar alterações].

ATENÇÃO: Para que o widget apareça no seu site ou blog é obrigatório você salvar as alterações.

Crie widgets para o seu blog e mostre tudo o que rola no Twitter - Visual Dicas

5) Agora é só colar o código do widget no seu site ou blog …

accept

Se tiver dúvidas como inserir ou editar o código no blog, leia: (Como instalar um Widget no seu Blog -(Blogger) e Como inserir Widgets no Wordpress sem a instalação de plugins) e para centralizar os seu widgets, leia: Como centralizar um widget no seu blog

6) Como alterar dimensões do Widget: Para alterar as dimensões padrão do widget que é de 520px de largura por 600px de altura, basta acrescentar no código HTML os comandos width=”xxx” (para definir a largura desejada em px) e height=”xxx” (para definir a altura desejada em px).

No exemplo abaixo, mostramos o nosso código HTML com as dimensões alteradas para 530px de largura e 400px de altura:

<a class="twitter-timeline" width="530" height="400" href="https://twitter.com/visualdicas" data-widget-id="650808948132552705">Tweets de @visualdicas</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+"://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>                   

Código HTML definido, vamos ver abaixo como ficou o nosso widget Histórico do Usuário com 530px de largura e 400px de altura:

Widget Curtiu

Este Widget mostra em tempo real os tweets mais recentes que você curtiu no Twitter.

Clique em

Crie widgets para o seu blog e mostre tudo o que rola no Twitter - Visual Dicas

Ou como no exemplo anterior, clique no botão com a imagem do perfil e selecione [Configurações]. No menu lateral escolha [Widgets]. Clique em [Criar novo].

Crie widgets para o seu blog e mostre tudo o que rola no Twitter - Visual Dicas

Para criar o seu widget siga os passos a seguir:

1) No menu superior, clique na aba [curtiu].

Crie widgets para o seu blog e mostre tudo o que rola no Twitter - Visual Dicas

2) Como no exemplo anterior, defina o Nome de usuário,  as opções Excluir respostas  e Expandir fotos automaticamente. Mantenha a Altura padrão e defina se Claro ou Dark para Tema. Defina também a cor do link, se desejar alterar a cor padrão.

3) Após definir todas as configurações, clique no botão [Criar widget].

4) Copie o código que aparece abaixo da Visualização e cole o código HTML no seu site ou blog.

Não esqueça de salvar o widget que você criou. Clique no botão [Salvar alterações].

Crie widgets para o seu blog e mostre tudo o que rola no Twitter - Visual Dicas

5) Se desejar, altere as dimensões do widget incluindo os comandos width=”xxx” e height=”xxx” no código HTML, como mostramos no exemplo anterior (passo 6).

Abaixo veja como ficou o nosso widget com as dimensões de 530px de largura e 400px de altura:

Widget Lista

Este widget permite mostrar os tweets favoritos das suas listas. Ótimo para ver o que rola nos perfis dos seus amigos…

Como nos demais exemplos anteriores, crie um novo widget e selecione a aba [Lista].

Crie widgets para o seu blog e mostre tudo o que rola no Twitter - Visual Dicas

Defina a Lista de amigos (clique no botão de seleção e escolha a lista desejada). Como nos exemplos anteriores, defina as suas preferências. Clique no botão [Criar widget]. Copie e cole o código no HTML do seu site ou blog. Não esqueça de clicar no botão [Salvar alterações].

Crie widgets para o seu blog e mostre tudo o que rola no Twitter - Visual Dicas

Veja abaixo nosso widget Lista em ação:

Widget Busca

Este widget exibe resultados de busca em tempo real! Ideal para eventos ao vivo, transmissões, conferências, programas de TV, ou apenas para manter-se atualizado com notícias. Também pode ser usado com hashtags (leia: O que é Hashtag? Como usá-los no Twitter?)

Para criar o widget, faça como os exemplos anteriores.  Em Widget, clique no botão [Criar novo] e selecione a aba [Busca].

Primeiro defina qual o termo ou o hashtag que você quer buscar. Digite-o em Consulta de Busca. No nosso exemplo vamos utilizar o hashtag #love.

Crie widgets para o seu blog e mostre tudo o que rola no Twitter - Visual Dicas

Depois configure as demais opções, como nos exemplos anteriores e clique no botão [Criar widget].

Copie o código HTML e cole no seu site. Não se esqueça de clicar no botão [Salvar alterações]. Para mudar as dimensões do widget, altere o código como mostramos no primeiro widget, passo 6.

Crie widgets para o seu blog e mostre tudo o que rola no Twitter - Visual Dicas

Veja abaixo o widget funcionando…

Editando seus widgets

Para fazer alterações nos seus widgets postados, basta você entrar na página de configurações do Twitter, acessar o widget desejado e fazer as modificações. O legal disto é que depois de salvar as alterações realizadas você não precisará alterar os códigos inseridos nos seus blogs. Bem fácil, não é?

ATENÇÂO: Se você optou por inserir no código HTML os atributos width e height para dimensionar o widget, você será obrigado a entrar diretamente no código colado no seu blog para fazer as alterações dimensionais.

Então como dissemos, em Configurações selecione [Widgets]. Escolha o widget desejado e clique no botão [Editar]. Nosso exemplo vamos escolher o

Crie widgets para o seu blog e mostre tudo o que rola no Twitter - Visual Dicas

Faça as alterações que desejar e depois clique no botão [Salvar alterações]. Você poderá fazer alterações na Lista, Opções, Tema, Cor do Link. As modificações da Altura não terão efeito se você dimensionou o seu widget acrescentando os atributos width e height no código HTML.

Crie widgets para o seu blog e mostre tudo o que rola no Twitter - Visual Dicas

Você observará então que o widget foi alterado automaticamente.

Crie widgets para o seu blog e mostre tudo o que rola no Twitter - Visual Dicas

Leia também:

Coloque o Fan Box Twitter no seu blog (caixa de fãs do Twitter)

byALF

1 comentários:

Unknown disse...

Muito bom

Postar um comentário

Gostou do Post? Então espalhe!

Quem está curtindo...

Encontre no blog...

Fique mais.... Leia os nossos artigos!!!

Gostou? Então espalhe!

Twitter Delicious Facebook Digg Stumbleupon Favorites More

 
Web Analytics