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 por e-mail

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.

Nenhum comentário:

Postar um comentário