Adicionar Botão do Pinterest "Pin It" ao Passar o Mouse nas Imagens do Blog

Adicione uma nova opção de personalização e de compartilhamento para aumentar a visibilidade das postagens através das imagens.

As imagens tiveram sempre um papel fundamental na Blogosfera para atrair visitantes através de motores de busca (Google, Bing, etc.). Através delas também, as postagens se tornam mais atraentes, interativas e, muitas vezes, fazem com que algo seja rapidamente compreendido, coisa que as vezes textos imensos não chegariam ao mesmo resultado.

Quando o Pinterest entrou no meio das redes sociais tornou ainda mais evidenciado a necessidade de utilizarimagens nas publicações, pois, permite que os proprietários dos blogs coloquem um “Botão Pin” nas imagens do conteúdo dos mesmos. Contudo, os visitantes que gostarem das imagens podem clicar no botão do Pinterest, adicionando-as imediatamente à sua conta, fazendo com que esteja sempre visível em seu painel e possibilitando o compartilhamento imediato. E, o melhor de tudo, é que as imagens conterão o link e o título que direcionarão para sua postagem.

Portanto, adicionar um botão do Pinterest irá ajudá-lo a obter um bom tráfego para seu blog proveniente do compartilhamento de vários usuários que possuem conta nesse serviço.

 Recomendamos que antes de qualquer alteração no código faça um backup do template. Caso não saiba como proceder, acesse o artigo Como Fazer Backup do Blog.

Colocar Botão do Pinterest nas Imagens do Blog

>> Acesse seu Blogger, vá em "Modelo" e depois "Editar HTML".

>> Clique no código do template, pressione "CTRL+F" e pesquise por </body>

>> Logo ACIMA da tag encontrada, cole o seguinte código:

<script>
//<![CDATA[
var custom_pinit_button = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj8d5PWsHJt9EUtE6ln3ZsBsotBp5_jaStaM8hmrMGkdyiaKgA8rbw2iENGVbM-vUUFNCeh2smTxEXwfOoH56B32NkB7vdAObuRR4QLkurRruQbyxJvc2nGM5qeDcabEJrJY6NJzJKd-_Ml/s1600/pinit-button.png";
var pinit_button_position = "center";
var pinit_button_before = "";
var pinit_button_after = "";
//]]>
</script>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js' type='text/javascript'></script>
<script id='pinit-img-button' src='http://yourjavascript.com/33188461084/pinterest-button.js' type='text/javascript'>
// Visit helplogger.blogspot.com for more widgets and tricks.
</script>

Configuração:

* O trecho destacado em AMARELO é a imagem do botão, altere para outra caso desejar.

* O trecho destacado em LARANJA é o posicionamento do botão Pin it dentro da imagem da postagem. Caso desejar um outro, troque o center por um dos seguintes valores:

topleft 

topright 

BottomLeft 

bottomright

>> Clique em "Salvar Modelo", vá em seu blog e veja como ficou.

Ocultar o "Botão Pin it" em uma imagem específica

Há também a possibilidade de você escolher algumas imagens para que não apareçam o "botão Pin it". Para isso, ao publicar uma postagem e preferir que determinada imagem não tenha essa possibilidade, basta que adicioneclass="nopin" antes do fechamento da tag de imagem indo na edição de html da postagem. Como exemplo veja a imagem a seguir:

Lembrando que esse processo faz com que sejam "capturados" automaticamente os títulos dos posts em questão. Isso pode ser até um ponto "negativo", já que a imagem em questão pode não mostrar exatamente o contexto da postagem.  É até meio óbvio, porém é sempre pertinente falar que para um bom "entendimento" e adequação ao contexto, procure ao máximo colocar imagens relevantes aos títulos na hora em que for postar algo.  

Deixe seu comentário, pois ele é a motivação para nosso trabalho.