Botão Do Twitter E Do Facebook Sem JavaScript Nem IFrame

por em: , , , ,

Botões para redes sociais.

O CSS é realmente uma ferramenta muito poderosa quando usada com sabedoria. Uma de suas principais vantagens é ser muito mais leve que seu concorrente, o javascript. Com apenas algumas linhas de códigos podemos criar um bonito menu de imagens deslizante, por exemplo. Assim nossas páginas irão abrir muito mais rapidamente. Fazendo uso dessa metodologia, iremos aprender a criar dois botões, um do Twitter e outro do Facebook, usando somente uma imagem.

A interação com mídias sociais é fundamental para qualquer site, por isso adicionar seus plugins de compartilhamento é muito importante, mas será que são leves? Eu fiz um simples teste, inseri os botões Curtir e Tweetar em uma página vazia. Essa página teve um peso de 92KB e foram carregados nada mais e nada menos que 12 objetos entre imagens, scripts e códigos.

Clique Aqui Para Curtir Este ArtigoClique Aqui Para Tweetar Este ArtigoO nosso botão, muito mais leve, ficará assim.

Eu acho muito pesado para uma coisa tão simples, ainda mais se somarmos a estes, o botão do google +1 e outros tantos gadgets de compartilhamento que existem por ai. Para eliminar esse empecilho, vamos aprender a construir ícones que tenham as mesmas funcionalidades destes gadgets, só que para faze-lo usaremos apenas uma uma imagem de 1KB… nada de JavaScript nem dos arcaicos iFrames.

O Segredo São Os Links De Compartilhamento

Tanto o Facebbok quanto o Tweeter possuem links de compartilhamento que podem ser ancorados em qualquer objeto HTML. Com isso ao invés de adicionarmos os grandes, pesados e ultrapassados iFrames, poderemos criar algo como isto:

Leia+  Backup Na Nuvem, Online E Grátis Com O OneDrive

Clique Aqui Para Curtir Este Artigo
Clique Aqui Para Tweetar Este Artigo

Legal né? As páginas que esses links abrem são oficiais, portanto não tenha receio de que sejam gambiarras. Mas fique atento, a implementação em cada plataforma pode ser levemente diferente. Portanto vamos aprender o funcionamento da sintaxe padrão:

http://www.facebook.com/sharer/sharer.php?u=URL
http://twitter.com/intent/tweet?text=TITULO&url=ENDEREÇO&via=USUARIO&related=USUARIO

Substitua o URL, no modelo do facebook, pelo endereço de uma página qualquer, e cole no navegador. Já deu pra entender né? O do twitter funciona de maneira muito similar, apesar de ter mais variáveis para serem substituídas.

Em USUARIO deve-se colocar o seu nome de usuário do Twitter, sendo que a parte do &via= irá adicionar um via @seu nome as Twitadas, e o código &related= sugere que adicionem o seu perfil ao deles, no fim do processo.

Modificando Os Links Para O Padrão Do Blogger

Cada plataforma tem seu próprio código para mostrar o URL e o título da página. No blogger a tag que mostra a URL é essa: data:blog.url, e a que mostra o título é essa: data:blog.pageName. Entenda que o WordPress, o Joomla e outros sistemas CMS usam palavras diferentes, mas a ideia é a mesma. Vejamos então como ficam os links depois de substituídas as variáveis, no blogger:


	Curtir


	Tweetar

No link relativo ao twiiter basta substituir o nome gadarf pelo seu próprio nome de usuário, o restante deve ficar como está. Vale ressaltar que para implementar em outras plataformas você terá alterar o código corretamente, ou procurar no tiu guugol e copiar.

Leia+  Dicas Para Escolher Uma Hospedagem De Sites Grátis

Inserindo Uma Imagem E Dando Um Aspecto De Botão

Vamos usar uma técnica bem legal aqui, ela se chama rollover e vai deixar nosso simplório link de texto igualzinho ao botão do widget original. Perceba que para não sobrecarregar suas páginas com tantos Requests, teremos apenas uma imagem na jogada. Ela irá conter todos os botões, tanto no estado normal, quanto no estado em que acende ao passar o mouse em cima.

Veja como ficou o CSS que irá desenhar o botão do facebook:

.botaocurtir { 
	text-indent:-5000px; 
	overflow:hidden; 
	display: block; 
	width: 55px; 
	height: 20px; 
	background-image:url(https://lh6.googleusercontent.com/-ECJHE9SmWbk/TrIv09BEWpI/AAAAAAAAEqg/FeTUbFIUmpM/s800/Bot%2525C3%2525B5es.png); 
	background-repeat:no-repeat; 
	background-position:  0px -40px; 
} 
.botaocurtir:hover {background-position: 0px -60px;}

Plano de fundo usado nos botões. É evidente que no link do facebook você deverá incluir a tag: class=’botaocurtir’. Feito isto,  esta folha de estilo irá funcionar do seguinte modo: o text-indent e o overflow irão jogar o texto do link para longe e esconde-lo. O display, o width e o height irão fazer o link se tornar uma caixa com uma largura e altura pré-determinada. As tags background-image e background-repeat irão colocar nossa imagem como sendo o plano de fundo.

O coração da coisa toda é o background-position, inicialmente ele é setado em 0px -40px, que se refere as coordenadas do nosso botão do facebook em seu estado normal, dentro do plano de fundo. Quando o camarada passa o mouse em cima do link, o comando botãocurtir:hover altera essas coordenadas para 0px -60px, que corresponde ao botão do facebook em seu estado aceso. Agora vejamos a codificação para o compartilhador do twitter:

.botaotwitter { 
	text-indent:-5000px; 
	overflow:hidden; 
	display: block; 
	width: 55px; 
	height: 20px; 
	background-image: url(https://lh6.googleusercontent.com/-ECJHE9SmWbk/TrIv09BEWpI/AAAAAAAAEqg/FeTUbFIUmpM/s800/Bot%2525C3%2525B5es.png); 
	background-repeat: no-repeat; 
	background-position: 0px 0px; 
} 
.botaotwitter:hover {background-position: 0px -20px;}

Incluindo Outras Redes Sociais Sem Sobrecarregar Suas Páginas

E é assim que trocamos um plugin enorme por algo minúsculo, mas com a mesma funcionalidade. Apesar de não ficar exatamente igual, o ganho em velocidade para suas páginas vai valer a pena, fora que aquele  contador de votos não não irá lhe fazer falta alguma.

Leia+  Blog E Hospedagem Grátis Com Parceria No XPG

Repare que está solução pode ser usada em muitos casos, não apenas no Twitter e no Facebook. Para tanto basta que a rede social disponibilize aqueles links de compartilhamento. O google +1 até tem o seu, mas no momento em que este tutorial foi escrito ele não estava funcionando, no entanto creio que não demorem muito para arruma-lo.

Página De Exemplo Com Um Código Completo

Abaixo temos uma página de exemplo com o código base, com ele será possível fazer as alterações e adições que achar conveniente.

 

 Curtir   Tweetar 

Uma outra vantagem é que você poderá usar sua criatividade e mudar o esquema a seu bel prazer. Crie  quantos botões quiser, use a imagem que desejar e os efeitos que achar mais bonitos. Uma ideia legal é fazer um script que abra a janela como se fosse um pop-up, ficaria bem bacana.

Enfim, com este guia, você e seu layout nunca mais ficarão presos aos pequenos, feios e pesados botões de compartilhamento. É isso!

Minecraft Pirata

! 13 comentários até o momento

Escreva O Seu Comentário!

Ficou com alguma dúvida?
Tem uma crítica construitiva ou uma sugestão maneira?
Escreva ai embaixo, mas não maltrate o português, por favor!

  1. gilvancn comentou: responder

    Ola amigo parabens pelo post muito bom. Eu queria fazer algo parecido com isso porem sem imagem e chamar o link em uma determinada palavra direto na criação do post, será que tem como??

  2. gadarf comentou: responder

    Você está usando o botão curtir oficial do facebook, pelo que percebo, e não o personalizado deste tutorial.

    Tentar procurar no google por “botão curtir em URLs dinâmicas”.

  3. Danilo Freitas comentou: responder

    Ola

    Amigo Estou Tendo um Problema Com Meu Site, e o Seguinte, Eu Add Uma Botao De Curtir e Um Botao Do Twitter No Meu Site, Para a Cada Post Que Fizer a Galera Curti Cada Pagina, e o Que Acontece e Que Nao Funciona
    EX: Era Para Quando Eu Curti, Aparecer Assim

    Mais o Mesmo So Aparece
    Sem o noticia&id=140, Eu Ja Nao Sei o Que Faço Mais.

    Peço Que Me Ajude Com Esse Problema.

    Sem Mais

    Danilo Freitas

  4. gadarf comentou: responder

    Com css não é possível, somente com algum tipo de script.

  5. ROBSON M. comentou: responder

    Opa Gadarf td bem?! Ótima dica essa sua, gostaria de saber se há um jeito de fazer com que esses botões contabilizem quantas pessoas curtiram o link também, assim como acontece no i-frame do botão curtir do facebook?

    Grato
    Robson M.

  6. Hot Dorgas comentou: responder

    Queria saber como colocar os botões curtir e tweetar lado a lado

  7. gadarf comentou: responder

    Sim, folha de estilo, usa o float: left; que resolve.

  8. Anonymous comentou: responder

    O código funciona blz, mas gostaria de colocar os botões do curtir e twitter um do lado do outro na mesma linha, mas não estou conseguindo.

    Alguma sugestão??

  9. benfiquista comentou: responder

    Era mesmo isto que eu procurava, estes ícones contadores carregam muita coisa. E numa altura em que o Google utiliza a velocidade de carregamento como padrão de qualidade, é bom ter em atenção a todos os extras

  10. Joana comentou: responder

    eu achei legal, funciona direitinho e é realmente bem mais leve

  11. gadarf comentou: responder

    Sim, e está bem claro que esta técnica não deixa exatamente igual ao botão curtir.

    Vai ficar com pequenas diferenças, mas terá as suas vantagens, como detalhado no artigo.

    Obrigado pelo comentário.

  12. Anonymous comentou: responder

    Amigo, curtir e compartilhar são duas coisas bem diferentes.