Ícone flutuante Follow Me Twitter no seu Blog.

Siga o Ferramentas Blog: Canal no Youtube | Facebook | Twitter | Google+

twitter-follow-me-post 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.

Fazer download do e-book Como Ganhar Dinheiro com Blog

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.

follow-me-twitter follow-me-twitter2 follow-me-twitter3

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:

Imagens no seu blog:

 

22 Comentários

  1. Olá Marcos,
    Muito interessante este código, mas será que existe a possibilidade de alinhar ele para a direita?
    Eu tentei aqui, mas sem sucesso (sou pessímo em programação).

    Abraço!

    Responder

  2. CelsoLemes,

    Para alinha a direita, basta nesse mesmo código fornecido pelo Marcos, no lugar de 'left:0px', você colocar 'right:0px'

    Abs

    Responder

  3. Muito bom!é bem insistente rs, assim dá pra conseguir mais followers com certeza r. esse codigo que vc passou é bem melhor do que o do site. Assim não precisava ficar esperando para redirecionar ^^

    Responder

  4. Desde já agradeço a sua ajuda com a publicação destes post pois têm me ajudado muito; queria deixar o meu comentário sobre esta publicação: de facto o icon do follow me é genial muito mais apelativo que o do go2web20, mas encontrei um problema o icon funciona muito bem se a imagem de fundo for branca ou preta, agora se por exemplo tiver a cor azul nota-se os contornos da imagem

    Responder

  5. ::: Ótima dica, Marcos, e muito fácil de aplicar. Já estou usando no meu blog. Fiz adaptações na imagem para seguir as cores.

    Responder

  6. NOssa, muito bom tutorial mesmo. Sou bem inexperiente ainda nesssa coisa de ter blog e é a primeira vez que sigo um tutorial para inserir widget e consigo fazer com sucesso \o/. Parabéns pelo blog.

    Responder

  7. Marcos e amigos idealizadores,
    Hj tentei usar o html de seguidores no wordPress, nainda nào deu certo, daí vim aki ver esse do twitter flutuante e bingo!
    Muito bom!
    Usei no blogger também.
    Valeu demais!

    Responder

  8. Olá Marcos! Ótima dica, obrigado! Parabéns pela ajuda que da a nos blogueiro.
    Abraços do amigo de sempre
    João de Bourbon

    Responder

  9. Cara, muito bom!
    Só eu preciso de uma ajudar para personalizar esse gadget…
    Como eu faço o efeito esconder/revelar nesse gadget?
    Exemplo: Deixar ele 40% escondido e quando passar o mouse fazer com que ele revele os 100% da imagem.
    Por favor, me ajude!

    Responder

Deixe um comentário

Ao comentar você concorda com nossa Política de Comentários.