Nesta postagem, mostrarei como criar um botão para compartilhar páginas da internet no Pinterest.
Link de compartilhamento do Pinterest
O Pinterest é uma rede social onde as ideias são compartilhadas através dos Pins, que são compostos por uma imagem, uma URL e uma descrição do conteúdo que foi compartilhado.
O link do Pinterest para compartilhamento é [1]
https://www.pinterest.com/pin/create/button/?url=[URL]&media=[IMAGEM]&description=[DESCRIÇÃO]
url
é o link da página que será compartilhada;media
é o link da imagem que será utilizada no Pin. Se esse parâmetro não for passado, o Pinterest irá exibir uma lista de imagens da página compartilhada para que o usuário possa escolher a imagem do Pin;description
é a descrição do Pin (você pode colocar o título da página ou o conteúdo da meta tag description, por exemplo).
Os parâmetros devem estar codificados para URL (faremos isso com a função encodeURIComponent()
do JavaScript).
Neste artigo, vamos utilizar apenas os parâmetros url
(obtido através da propriedade window.location.href
) e description
. Esse último parâmetro será o conteúdo da meta tag description
. Se a tag não existir, tentaremos a meta tag og:description
, que é bastante utilizada atualmente. Em último caso, colocaremos o título da página.
Não vamos utilizar o parâmetro media
, pois a imagem dependerá da estrutura do site e o meu objetivo é criar um botão genérico. Inicialmente, vamos utilizar o seguinte código HTML
<a href="" id="pinterest-share-btt" rel="nofollow" target="_blank" class="pinterest-share-button"></a>
O script a seguir cria a URL de compartilhamento e a atribui ao link do HTML anterior.
//Constrói a URL depois que o DOM estiver pronto document.addEventListener("DOMContentLoaded", function() { var url = encodeURIComponent(window.location.href); //tenta obter o conteúdo da meta tag description var desc = document.querySelector("meta[name='description']"); desc = (!!desc)? desc.getAttribute("content") : null; //se a meta tag description estiver ausente... if(!desc){ //...tenta obter o conteúdo da meta tag og:description desc = document.querySelector("meta[property='og:description']"); desc = (!!desc)? desc.getAttribute("content") : null; } //metas tags description e og:description ausentes if(!desc){ //obtém title desc = document.title; } //altera a URL do botão document.getElementById("pinterest-share-btt").href = "https://www.pinterest.com/pin/create/button/?url="+url+"&description="+encodeURIComponent(desc); }, false);
Esse método não funciona em páginas AMP, pois este tipo de página impede o uso de scripts que não façam parte do projeto AMP. Além disso, o botão também não funcionará se usuário bloquear os scripts do navegador.
Observação: você não precisa utilizar o evento DOMContentLoaded
se o script for colocado abaixo do código HTML do botão.
Personalização do botão
Utilizarei a seguinte imagem para ser o ícone do botão [2]:
Você pode utilizar a imagem que quiser. A única recomendação é que ela seja quadrada. O código em CSS é dado a seguir
.pinterest-share-button{ display: inline-block; width: 40px; height: 40px; margin: 5px; background-size: 100% 100%; /* ou 'contain' */ background-image: url("[URL-DO-ICONE]"); background-repeat: no-repeat; background-position: center; }
Em [URL-DO-ICONE]
, você deve colocar o link da imagem escolhida. Se preferir, utilize uma URL de dados em Base 64. Normalmente, sites de ícones, como o Iconfinder, disponibilizam uma opção para criar a URL em Base 64 de seus ícones. A principal vantagem dessa opção é que fica tudo embutido no código da página, isto é, você não depende de arquivos externos.
Se a imagem que você escolher não for quadrada, utilize o valor contain
na propriedade background-size
para que não haja distorções.
Você pode testar o botão a seguir:
Nesse exemplo, utilizei um ícone em Base 64.
Download dos códigos
A versão final desse botão pode ser obtida nos links abaixo
Considerações finais
Além dos Pins comuns, o Pinterest também possui os Rich Pins, que são Pins especiais que utilizam informações da página para agregar mais conteúdo ao Pin. Essas informações são obtidas pelo Pinterest através da marcação Microdata Schema.org e/ou pelas meta tags Open Graph, portanto basta utilizar pelo menos uma das duas opções para que o Pin compartilhado se torne um Rich Pin. Consulte a documentação do Pinterest (link nas referências) para mais informações [3].
Leia também
Mais botões de compartilhamento:
Referências
- [1] Pinterest: Save button. Acesso em 28 de maio de 2018.
- [2] IconFinder: Pinterest Icon by Xinh Studio. Acesso em 28 de maio de 2018.
- [3] Rich Pins: Getting started. Acesso em 28 de maio de 2018.
Olá, encontrei o seu post depois de muto procurar um solução para o meu problema... Acontece que quando compartilho uma imagem do meu post no Pinterest a descrição dele simplesmente não aparece. Pelo que li aqui essa seria uma provável solução, mas eu não imagino onde devo inserir esses códigos. Será que você poderia me ajudar quanto a isso? Esse é o link de um pin: https://br.pinterest.com/pin/291678513365473540/
ResponderExcluirObrigada desde já!
Boa noite, Neila.
ExcluirEu acessei o seu blog e testei o botão. Todos os parâmetros (url, media e description) estão implementados corretamente.
Também fiz testes (num computador e num celular) compartilhando um post do seu blog e a descrição apareceu para mim sem problemas. Acredito que você conseguiu solucionar o problema.
Aliás, perdoe-me pela demora para responder, pois eu estava sem computador.
Oi, Henrique! Imagina, não precisa se desculpar. Fiz o teste aqui e não aparece mesmo, inclusive em em outros aparelhos. Vou te mandar os prints pra vc ver:
Excluiresseé um pin com a descrição do post, nome do autor e data: https://www.facebook.com/photo.php?fbid=247388662806844&set=pcb.247388719473505&type=3&theater
Esse é o meu onde isso não aparece: https://www.facebook.com/photo.php?fbid=247388672806843&set=pcb.247388719473505&type=3&theater
Se puder olhar, eu te agradeço! Obrigada desde já!
Entendi. Neste caso, o problema não é o botão.
ExcluirO Pinterest obtém as informações destacadas na foto a partir do código HTML dos seus posts. É um recurso chamado de Rich Pin (no caso, Article Rich Pin já que é um artigo de blog).
Essas informações ficam em tags especiais chamadas Open Graph e/ou em Microdata Scheme.org. Eu testei um dos seus artigos numa ferramenta do Pinterest e é informado que está tudo implementado corretamente (imagem com o teste).
Eu também verifiquei manualmente os códigos das suas páginas e todas as tags estão corretamente implementadas.
Acredito que seja algum tipo de erro no Pinterest, pois eu tentei compartilhar o mesmo post do teste e essas informações não apareceram.
Exatamente isso... Te agradeço imensamente a gentileza e disponibilidade de tirar esse tempo para me ajudar. Te desejo muito sucesso.
ExcluirMuito obrigada!
Obrigado!
Excluir