Ícone flutuante Follow Me Twitter no seu Blog.

Se você notou, tem um ícone flutuante no lado esquerdo da tela indicando meu perfil no Twitter. É uma imagem flutuante super simples de adicionar em seu blog e que vou mostrar como sugestão aqui. São duas formas de se fazer e fica a seu critério escolher qual a mais adequada ao seu blog. Como o Twitter está na moda, é uma boa maneira de se conseguir mais seguidores e dar destaque às suas atividades por lá. O que vamos mostrar funciona no WordPress e no Blogger.

Com a ajuda e sugestão do César Sá (@cesarsa), do Pega o Rato, que descobriu essa aplicação e elaborou as imagens do modelo de ícone que estamos usando nesse gadget, passamos algum tempo via Twitter preparando isso. A mim coube os códigos e o tutorial.

Originalmente descobrimos um site que faz todo o serviço. Ficamos entusiasmados e eu fiz vários testes, tanto para blogs no Blogger, quanto para blogs no WordPress. É bem simples e prático, você configura tudo na página deles e é gerado um código que você pode colar até em um gadget para HTML/JavaScript.

O site é o Go2Web2.0 – http://www.go2web20.net/twitterFollowBadge/.

Você pode entrar e testar, mas tem uma ressalva: não funciona no Internet Explorer. Dá conflito para blogs do Blogger. Pode parecer sem importância, mas atrapalha o funcionamento dos gadgets que ficam adicionados depois desse. É um código feito em Java e não consegui descobrir como resolver o problema.

A solução foi criar um modelo próprio e personalizável também e o código é super simples de modificar e adaptar para o que você precisar. Veja abaixo e como usar:

<a style="display:scroll;position:fixed;top:130px;left:0px;" href="URL_do_Perfil_Twitter" title="Siga-me no Twitter" target="_blank">
<img src="URL_da_IMAGEM"/>
</a>

Onde está marcado de vermelho, coloque o link do seu perfil no Twitter, por exemplo: http://twitter.com/hordones – como é o do meu perfil.

E onde está marcado de rosa, você colocará a URL da imagem que você escolher como ícone flutuante.

Cole esse código num gadget do tipo “HTML/Javascript” para o caso de quem usa o Blogger (não sabe como fazer? leia: Onde colar código HTML). E para o WordPress, cole o código no widget “Texto”. Não importa onde você vai colocar o elemento de página, pois não ocupará espaço na sua barra lateral.

ERRATA: à pedido do Celso no comentário.

A linha que faz as configurações de flutuação é – fixed;top:130px;left:0px – onde, você pode trocar “top” por “bottom” para que a imagem seja mandada para parte inferior da página.
O primeiro números (130) representa a distância da margem superior se usando “top”; ou da margem inferior se usando “bottom”.
Onde está escrito “left”, basta trocar por “right” par que a imagem flutue à direita da tela.
Por fim, o último número, onde no exemplo está “0” (zero), é a distância com a margem lateral.

Abaixo tem algumas sugestões de imagens criadas pelo César Sá, todas com fundo transparente e você pode editá-las como achar melhor também.

Clique com o botão direito sobre a imagem que você quiser usar para salvar ou se desejar mudar as cores do terceiro ícone, baixe o modelo e alta definição para fazer as modificações que desejar: Download da Imagem. O crédito das imagens é do César Sá, não se esqueça.

Mais 4 modelos de imagens para editar no PhotoShop e personalizar o seu ícone:

• Imagem 1 (em PSD máximo)
• Imagem 2 (em PSD médio)
• Imagem 3 (em PSD mínimo)
• Imagem 4 (em PNG)

Faça bom proveito e leia também os seguintes artigos para usar o Twitter ou imagens em seu blog.

Twitter:

• Atualizações do Twitter na Sidebar do Blog
• Contador de Seguidores do Twitter no Blog
• Twitter Feed – Divulgue seus artigos no Twitter

Imagens no seu blog:

• ImageSharing – URL de imagens Automaticamente
• Usando Imagens no Blog Blogger
• Armazenar Imagens na Internet – Picasa Web
• Imagem flutuante – Modelo que usei para esse artigo.