Criando um botão de compartilhamento do Pinterest

Por
| 

Nesta postagem, mostrarei como criar um botão para compartilhar páginas da internet no Pinterest.

Botão de compartilhamento do 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.

Exemplo de Pin
Exemplo de Pin

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]:

Ícone do Pinterest do Iconfinder
Ícone do Pinterest do Iconfinder

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


Siga o blog

Redes sociais: Facebook, Twitter, YouTube, Pinterest, Instagram, Telegram

Receba notificações de novas postagens e novidades do blog por e-mail.

Importante: utilize o bom senso na hora de comentar. Acesse a política de privacidade para maiores informações sobre comentários.

6 comentários:

  1. 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/

    Obrigada desde já!

    ResponderExcluir
    Respostas
    1. Boa noite, Neila.

      Eu 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.

      Excluir
    2. 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:
      esseé 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á!

      Excluir
    3. Entendi. Neste caso, o problema não é o botão.

      O 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.

      Excluir
    4. Exatamente isso... Te agradeço imensamente a gentileza e disponibilidade de tirar esse tempo para me ajudar. Te desejo muito sucesso.

      Muito obrigada!

      Excluir