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:




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.

COMENTÁRIOS

BLOGGER: 2
Loading...
Nome

Básicos,3,Blogger,43,Botões,2,buscadores,3,Comentários,5,Css3,9,Design,3,Dominio,3,Downloads,2,Efeito,13,Facebook,3,Feed,1,Festividades,1,GooglePlus,6,Hacks,7,HTML,8,Imagens,8,Menu,3,Recursos,3,Seo,8,Truque,24,Twitter,2,Widget - Gadget,16,
ltr
item
Bloggermin: Saiba como adicionar o botão Pinterest nas imagens
Saiba como adicionar o botão Pinterest nas imagens
Aprenda anexar o botão Pinterest nas imagens
http://3.bp.blogspot.com/-cf9JSa7TImA/UAOhnylYLcI/AAAAAAAAAf4/UWLXpGpEt9c/s1600/pinit2.png
http://3.bp.blogspot.com/-cf9JSa7TImA/UAOhnylYLcI/AAAAAAAAAf4/UWLXpGpEt9c/s72-c/pinit2.png
Bloggermin
https://www.bloggermin.cashmore.com.br/2012/07/adicionar-botao-pinterest-nas-imagens.html
https://www.bloggermin.cashmore.com.br/
https://www.bloggermin.cashmore.com.br/
https://www.bloggermin.cashmore.com.br/2012/07/adicionar-botao-pinterest-nas-imagens.html
true
3085171147808187471
UTF-8
Carregado Todas os Posts. Não foi encontrado nenhum post. VER TUDO Leia mais Responder Cancelar resposta Excluir Por Home PÁGINAS POSTAGENS Ver tudo RECOMENDADO PARA VOCÊ ETIQUETA ARQUIVO PESQUISAR TODAS AS PUBLICAÇÕES Não foi encontrado qualquer correspondência postal com o seu pedido Voltar a Home Domingo Segunda-feira Terça-feira Quarta-feira Quinta-feira Sexta-feira Sábado Dom Seg Ter Qua Qui Sex Sáb Janeiro Fevereiro Março Abril Maio Junho Julho Agosto Setembro Outubro Novembro Dezembro Jan Fev Mar Abr Maio Jun Jul Ago Set Out Nov Dez agora mesmo 1 minuto atrás $$1$$ minutes ago 1 hora atrás $$1$$ hours ago Ontem $$1$$ days ago $$1$$ weeks ago mais de 5 semanas atrás Seguidores Seguir O CONTEÚDO É PREMIUM Por favor, compartilhe para desbloquear Copiar Todo o Código Selecionar Todo o Código Todos os códigos foram copiados para a área de transferência Não é possível copiar os códigos / textos, por favor pressione [CTRL] + [C] (ou CMD + C com Mac) para copiar