Saiba como adicionar o botão Pinterest nas imagens

Aprenda anexar o botão Pinterest nas imagens

Dentre as modas desta nova era é o uso de redes sociais, pseudo-sociais e todos os sites onde as coisas são compartilhadas. Algumas são bem sucedidas porque "os usuários as usam" e outras são esquecidas rapidamente; para onde vamos ou qual será o modelo de Internet que teremos em poucos anos, quem sabe, por enquanto continuamos andando, provando e vendo de que se trata todo isso.

Siga o @bloggermin agora e fique por dentro das novidades para o seu blog. E curta nossa página no Facebook.

Um desses serviços que está sendo imposto é o Pinterest, um pequeno botão para compartilhar e já se encontra em muitos sites.

Colocá-lo é simples, feito da mesma forma como qualquer um deles, copiando e colando o código disponível e pronto, sem problemas, porém, para o meu gosto, é muito lento.

Como aplicá-lo ao Blogger pode ser visto em dois artigos escritos por Marcos Lemos explicando em detalhes, seu uso e as variações que podem ser escolhidas: Pinterest: Aprenda como criar, como usar e mexer no Pinterest e Como adicionar o botão “Pin it” do Pinterest no Blog

Agora, para brincar um pouco, comecei a ver se era possível fazer o mesmo, mas de forma mais específica, ou seja, ver se poderia adicionar esse botão para certas coisas e não aos artigos em geral; por exemplo, anexar esse botão apenas em certas imagens que gostaria que fosse compartilhada e por isso, apelo ao jQuery, porque eu não consigo pensar em nada mais fácil.

O resultado será esse:




Ou veja a demonstração:

Botão Pinterest anexado nas imagens

Como identificar que imagem quero compartilhar e qual não? Simplesmente, basta adicionar uma classe para a tag IMG, neste caso, será a class="pin":

<img class="pin" src="URL_IMAGEM" />

Obviamente, a primeira coisa a fazer é colocar o script do serviço que vai ao final do modelo, antes de </ body>:

<script src='//assets.pinterest.com/js/pinit.js' type='text/javascript'/>

E para que funcione e também que, ao clicar no botão, não se abra a página do Pinterest em outra aba, mas em uma janela pop-up, coloque o script abaixo antes de </head> ou antes do script anterior.

<script type='text/javascript'>
//<![CDATA[

// isso evitará que o link se abra em outra aba
$(".pin-it-button").live('click', function(e) {
e.preventDefault();
})

// isso fará que o link se abra em uma janela pop-up
$(".pinimg").live('click', function(e) {
var url = $(this).attr('rel');
window.open(url,"pinshare","toolbar=0,status=0,width=620,height=320");
})

// e quando se carrega a página
$(document).ready(function(){

// buscaremos todas a imagens dos artigos que tenham a class "pin"
$('.post-body img.pin').each(function() {

// com esses dados, vamos construir a url a ser enviado para Pinterest
var post = location.href; // o endereço da página
var src = $(this).attr('src'); // imagem para compartilhar
var texto = document.title; // a descrição é o título da página
if($(this).attr('alt')) {
// e se colocar o atributo alt na imagem, lá podemos mostrar um texto especial, se for o caso, usamos
texto = $(this).attr('alt') + " : via MEUBLOG";
}

// verificar se há imagem flutuante
var cssflotar = $(this).css('float');

// e criamos o botão com esses dados
var boton ="<a count-layout='none' class='pin-it-button' href='#'><img title='Pin It' src='//assets.pinterest.com/images/PinExt.png' class='pinimg' rel='http://pinterest.com/pin/create/button/?url="+post+"&amp;media="+src+"&amp;description="+texto+"' /></a>";
// a tag A tem um href vazio justamente para evitar que se abra
// o dado a enviar está no atributo rel da tag IMG

// cercamos a imagem com SPAN
$(this).wrap('<span class="pinwrap"></span>');
$(this).parent().css('float',cssflotar);
$(this).after(boton);
$(this).css('float','none');
})

})

//]]>
</script>

Três dados serão processado nesse script:

url é o endereço de onde se envia
media é o endereço da imagem
description é um texto alternativo

Um pouco de CSS para que o botão se sobreponha a imagem e possa ser aplicada a qualquer imagem, centralizada ou flutuante.

<style>
.pinwrap {
display: inline-block;
position: relative;
}
.pin-it-button{
bottom: 10px;left: 10px;
position: absolute;
}
</style>

E pronto.