Ícone flutuante Follow Me Twitter no seu Blog.

Siga o Ferramentas Blog: Canal no Youtube | Facebook | Twitter | Google+
Acesse AGORA: https://blogueiro.pro e se torne um Blogueiro de Elite.

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.

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:

 

Já pensou em ser um(a) Blogueiro(a) mais Profissional?

Está cansado(a) de ser um blogueiro mediano(a) e que não tem resultados com seu Blog, não ganha dinheiro e não recebe as visitas que gostaria?

Você chegou aqui procurando como aprofundar seus conhecimentos em Blog, como Ganhar Dinheiro com seu Blog, aplicar as melhores técnicas de SEO, divulgar seu Blog e fidelizar seu público alvo. E posso te ajudar com essas coisas e muito mais, elevando o nível de qualidade do seu projeto.

Desenvolvi um curso completo, totalmente online, cobrindo tudo o que é necessário para um Blog atingir seu potencial máximo, detalhe por detalhe, que vão te tornar um Blogueiro de Elite:
  • Técnicas de produção de conteúdo
  • Fidelização do Público alvo
  • Divulgação e Técnicas de SEO
  • Métodos e técnicas de Monetização
Acesse AGORA: https://blogueiro.pro e se torne um Blogueiro de Elite.

Esta é sua chance de ser mais profissional e ter um blog eficiente, completo e que pode ser sua fonte de renda permanente. Sou Blogueiro desde 2007 e condensei todo este conhecimento dentro do curso Blogueiro de Elite para entregar a você.

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.