Colocar botão "Pin it" do Pinterest sobre as Imagens do Blog

Veja como adicionar um botão Pin it sobre todas as imagens das postagens do seu blog para incentivar o compartilhamento das suas imagens na rede social Pinterest pode ajudar a conseguir mais visitas e links para suas paginas. Embora a rede de compartilhamento de imagens não seja tão utilizada quanto o Facebook ou Twitter nós achamos que dependendo do tipo de conteúdo do blog esse botão para compartilhar imagens pode ser muito util.

Como Adicionar o Botão "Pin it" do Pinterest no Blogger


Esse é um procedimento muito simples, mas como vamos mexer no código HTML do blogger recomendamos que faça um backup do seu template antes de começar. Entre na pagina modelo > Editar HTML e procure e coloque esse código antes de </body>.
<script>
//<![CDATA[
var bs_pinButtonURL = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhqXssddlxk9o_MEmjJEoBVPsODtk27P9MPu88oF9WEDCjh1bGo_ek7GWVhexfFdC4BSGA3tL-wlwH-7clBKmTe7s7y9qzZwbuVriiztcgBIGGz_h-hjAbIFH3Kq3NT_fdceVe3BdqZ_HON/s1600/pinterestx1_72.png";
var bs_pinButtonPos = "center";
//]]>
</script>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js' type='text/javascript'/>
<script src='http://greenlava-code.googlecode.com/svn/trunk/publicscripts/bs_pinOnHoverv1_min.js' type='text/javascript'/>
<!-- please do not alter or remove the following code -->
<div id='bs_pinOnHover'><a href="http://www.bloggersentral.com/2012/11/pinterest-pin-it-button-on-image-hover.html">Pin It button on image hover</a></div>

O código está com o botão de compartilhamento posicionado no meio da imagem, mas se você não quiser usar o botão centralizado existem outras opções modificando a linha: var bs_pinButtonPos = "center";

Troque a palavra center por uma das opções abaixo:
topleft - Lado esquerdo na parte superior da imagem
topright - Lado direito na parte superior da imagem
bottomleft - Lado esquerdo na parte inferior da imagem
bottomright - Lado direito na parte inferior da imagem

Veja também:
Colocar botão "Pin it" do Pinterest sobre as Imagens do Blog
4 Passos para Criar Banners ou Imagens para Usar em Blogs e Sites

Nos testes que fizemos o posicionamento que funcionou melhor foi o centralizado (center). Os outros apresentaram algumas diferenças entre os navegadores.

Dicas de Botões para Compartilhar as Postagens do Blog


Colocar Botões de Compartilhamento em Forma de Coração no Blog
Adicionar e Personalizar Botão Curtir/Enviar do Facebook no Blogger
7 Opções de Botões de compartilhamento para Divulgar Blog
Estatísticas Botões de Compartilhamento - Curtir, Retweet, +1 e Outros

Achamos esse código interessante porque adiciona o botão para compartilhar imagens em todas as imagens das postagens de uma vez só, ou seja, de maneira muito simples de instalar e retirar caso você ache que não teve bons resultados quando foi analisar as visitas do blog. Então faça seus testes e nos diga o que achou desta dica para compartilhar imagens em redes sociais.

Marcadores: , , , ,