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'>Três dados serão processado nesse script:
//<![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+"&media="+src+"&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>
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.
Ciudad Blogger
0 comentários en:
"Saiba como adicionar o botão Pinterest nas imagens"
Postar um comentário
Si tu blog contiene material protegido por derechos de autor habilita tu perfil y deja únicamente el nombre de tu blog, no dejes la dirección del mismo, de lo contrario el comentario será eliminado.