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:

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.

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;}

É 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.

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!