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

Publicidade:

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:

Roberto Gui disse...

Muito bom

Postar um comentário

Gostou do Post? Então espalhe!

Quem está curtindo...

Encontre no blog...

Gostou? Então espalhe!

Twitter Delicious Facebook Digg Stumbleupon Favorites More