Como Adicionar o Botão “Pin It” do Pinterest no WordPress (4 Maneiras)

Incentivar as pessoas a compartilhar seu conteúdo nas redes sociais é uma ótima maneira de aumentar seu público e deixar as pessoas animadas com seu negócio.

Mas a realidade é que as pessoas só compartilharão seu conteúdo se você facilitar para elas.

Usamos botões de compartilhamento social no blog WPBeginner para que nossos leitores possam compartilhar nosso conteúdo com um simples clique, então sabemos do que estamos falando. 🤓

Em nossa experiência, o Pinterest é uma plataforma fantástica para gerar tráfego para seu site WordPress, especialmente se você publica conteúdo visual como fotos, infográficos e arte digital.

Adicionar um botão 'Pin It' ao seu site WordPress permite que seus visitantes compartilhem rapidamente imagens ou outro conteúdo visual em seus quadros do Pinterest. Além disso, pode ter muitas vantagens! Pense: mais visitantes, mais comentários e mais vendas. 💥

Neste artigo, mostraremos como adicionar o botão 'Pin It' do Pinterest ao WordPress.

Como Adicionar o Botão "Pin It" do Pinterest no WordPress

Por que Adicionar o Botão 'Pin It' do Pinterest no WordPress?

O Pinterest é uma popular plataforma de mídia social que permite aos usuários coletar links de sites e outro conteúdo visual criando quadros.

Quando os usuários adicionam seu conteúdo ao quadro do Pinterest, isso ajuda outras pessoas a descobrir seu site. O Pinterest é uma fonte de tráfego particularmente importante se você estiver executando um site de fotografia, um blog de moda ou qualquer outro tipo de blog que tenha muitas imagens e vídeos.

Adicionar um botão 'Pin It' ao seu site pode incentivar os visitantes a compartilhar seu conteúdo no Pinterest.

Um exemplo de botão de compartilhamento do Pinterest 'Pin It'

Observação: O Pinterest mudou oficialmente o nome do botão 'Pin It' para 'Salvar' em 2016. No entanto, muitos guias e plugins do WordPress ainda usam 'Pin It', e é por isso que usamos o nome original neste guia. Além disso, soa mais cativante!

Dito isso, vamos ver como você pode adicionar um botão 'Pin It' do Pinterest no WordPress. Simplesmente use os links rápidos abaixo para pular direto para o método que você deseja usar:

Método 1: Adicionar o botão 'Pin It' do Pinterest às postagens (maneira fácil)

A maneira mais fácil de adicionar um botão do Pinterest ao seu site WordPress é usando o Novashare. Na nossa opinião, é um dos melhores plugins de mídia social para WordPress.

Ele permite que você adicione facilmente um botão do Pinterest ao seu site, juntamente com botões para todas as outras principais redes sociais. Testamos o Novashare para diversos casos de uso e realmente gostamos de como ele é fácil de usar. Para mais informações sobre o plugin, veja nossa análise completa do Novashare.

Para começar, você precisa visitar o site Novashare e escolher um plano. Em seguida, você terá que instalar e ativar o plugin. Se precisar de ajuda, consulte nosso guia sobre como instalar um plugin do WordPress.

Preços e planos do Novashare

Após a ativação, você deve navegar até a página Configurações » Novashare no seu painel do WordPress para ativar sua licença.

Simplesmente clique na aba ‘Licença’, cole a chave de licença que você recebeu ao comprar o plugin e, em seguida, clique no botão ‘Salvar Licença’.

Ative sua licença Novashare

Depois de ativar sua licença, você pode adicionar um ícone do Pinterest ao seu site e quaisquer outros ícones de compartilhamento social que desejar. Você pode adicionar esses ícones em linha com seu conteúdo ou como uma barra flutuante.

Usaremos a primeira opção aqui (mas continue lendo para mais informações sobre barras flutuantes).

Simplesmente navegue até a aba ‘Conteúdo Inline’ no Novashare e ative o interruptor ‘Ativar Conteúdo Inline’. Em seguida, clique no botão do Pinterest para que ele fique vermelho.

Neste ponto, você também pode habilitar quaisquer outras redes sociais que desejar adicionar à barra de botões de compartilhamento social.

Adicionando um botão inline do Pinterest usando Novashare

Depois disso, você pode rolar para baixo e usar as opções disponíveis para configurar a barra de botões.

Existem configurações para exibir a barra de botões em posts, páginas e muito mais. Você também pode personalizar a cor e o design dos botões.

Você pode até adicionar rótulos aos botões e mostrar uma contagem de quantas vezes o post atual foi compartilhado nas redes sociais.

Cobrimos todas essas opções e barras flutuantes em detalhes em nosso guia sobre como adicionar botões de compartilhamento social no WordPress.

Quando terminar de personalizar seu botão 'Pin It', role até o final da página. Aqui, clique no botão 'Salvar Alterações' para armazenar as novas configurações.

Agora você pode visitar seu site WordPress para ver o botão Pinterest em ação.

Botão do Pinterest adicionado à postagem do WordPress

Método 2: Adicionar Botão 'Pin It' do Pinterest a Imagens (Maneira Fácil)

Você tem um blog de moda, fotografia ou culinária? Então, você pode querer adicionar um botão do Pinterest sobre essas imagens. Isso permite que os visitantes compartilhem seu conteúdo simplesmente passando o mouse sobre a imagem que desejam fixar.

O plugin Novashare que usamos no Método 1 também pode adicionar um botão 'Pin' do Pinterest quando você passa o mouse sobre qualquer imagem em seu site.

Depois de comprar uma licença e instalar o plugin, como explicamos no Método 1 acima, vá para Configurações » Novashare e clique na aba 'Pinterest'.

Agora, ative a opção ‘Enable Image Pins’ e selecione os ‘Post Types’ onde você deseja exibir o botão.

Habilitando Pins de Imagem no Novashare

Em seguida, você pode personalizar a posição, o formato e a cor do botão. As outras configurações padrão funcionarão bem para a maioria dos sites.

Se preferir, você pode exibir o botão do Pinterest sobre as imagens o tempo todo, não apenas quando você passa o mouse sobre uma imagem. Para fazer isso, você precisará ativar a opção ‘Always Show’.

Personalizando o Botão do Pinterest no Novashare

Alguns proprietários de sites têm algumas imagens que não desejam compartilhar. Nesse caso, você pode digitar os nomes dos arquivos no campo ‘Excluded Images’.

Quando estiver satisfeito com as configurações, certifique-se de clicar no botão ‘Save Changes’. Em seguida, o Novashare começará a exibir o botão Pin nas imagens.

Exemplo de Botão Pin do Pinterest com Novashare

Método 3: Adicionar o botão ‘Pin It’ do Pinterest usando um Shortcode Personalizado

Às vezes, você pode querer controlar exatamente onde o botão ‘Pin It’ aparece em seu site. Por exemplo, você pode querer mostrar o botão do Pinterest em uma landing page de anúncios específica ou dentro do conteúdo do post.

Nesse caso, uma opção é criar o botão usando código e, em seguida, colocá-lo em cada página ou post usando um shortcode personalizado. Isso lhe dá a liberdade de mostrar o botão ‘Pin It’ em diferentes locais, mas você precisará adicioná-lo a cada página ou post manualmente.

A maneira mais fácil de adicionar código personalizado ao WordPress é usando WPCode. Ele permite que você adicione PHP, CSS, JavaScript personalizado e muito mais ao seu site.

Várias de nossas marcas parceiras usam este plugin para gerenciar trechos de código em seus sites, e todas elas nos relataram o quanto o adoram. Para mais informações, veja nossa análise completa do WPCode.

Você também pode usar o WPCode para criar shortcodes personalizados, então ele é perfeito para adicionar um botão 'Pin It' ao seu site.

Primeiro, você precisará instalar e ativar o plugin gratuito WPCode. Para mais informações, veja nosso guia passo a passo sobre como instalar um plugin do WordPress.

Assim que o plugin for ativado, vá para Snippets de Código » Adicionar Snippet.

Como adicionar um trecho de código usando WPCode

Aqui, você verá todos os trechos pré-fabricados que o WPCode pode adicionar ao seu site. Isso inclui trechos que permitem adicionar botões de compartilhamento social ao WordPress e exibir seus ícones sociais em uma barra lateral.

Agora, você precisa passar o mouse sobre a opção ‘Adicionar seu código personalizado (Novo trecho)’ e clicar no botão ‘+ Adicionar trecho personalizado’ quando ele aparecer.

Adicionando um snippet personalizado ao WordPress

Em seguida, você vai adicionar PHP ao WordPress, então você precisa selecionar ‘Trecho PHP’ como o tipo de código.

Escolhendo snippet PHP no WPCode

Na próxima tela, digite um título para o trecho de código.

Isso é apenas para sua referência, então você pode usar o que quiser. Para este tutorial, digitaremos ‘Botão Pin It do Pinterest’.

Insira um nome para o trecho e cole o código para o botão pin it

Com isso feito, basta colar o seguinte no editor de código:

function get_pin($atts) {
    global $post;
    if ($post) {
        $pinterestimage = wp_get_attachment_image_src(get_post_thumbnail_id($post->ID), 'full');
        if ($pinterestimage) {
            return '<a href="http://pinterest.com/pin/create/button/?url=' . urlencode(get_permalink($post->ID)) . '&media=' . $pinterestimage[0] . '&description=' . get_the_title() . '" class="pin-it-button" count-layout="vertical">Pin It</a>';
        } else {
            return 'No Pinterest image available.';
        }
    } else {
        return 'No post found.';
    }
}
add_shortcode('pin', 'get_pin');

Depois disso, role a página para baixo até a seção ‘Inserção’. Aqui, você pode manter o método padrão ‘Inserir automaticamente’ para garantir que o código seja executado em todos os lugares.

Se ainda não estiver selecionado, selecione ‘Executar em todos os lugares’

O método de inserção automática padrão no WPCode

Finalmente, role até o topo da tela e clique no controle deslizante ‘Inativo’ para que ele mostre ‘Ativo’.

Em seguida, basta clicar no botão ‘Salvar trecho’ ou ‘Atualizar’ para tornar o trecho de código ativo.

Salvar e ativar o snippet de código WPCode

Agora, você pode adicionar um botão ‘Pin It’ a qualquer página, postagem ou área pronta para widget do WordPress usando o shortcode [pin].

Para instruções passo a passo sobre como colocar o shortcode, consulte nosso guia sobre como adicionar um shortcode no WordPress.

use o shortcode [pin] em suas postagens do WordPress

Após adicionar este código, os visitantes verão um botão ‘Pin It’ em qualquer página ou postagem que tenha uma imagem em destaque.

Se a página não tiver uma imagem em destaque, eles verão uma mensagem de erro ‘Nenhuma imagem do Pinterest disponível’ em vez disso.

Como adicionar o botão ‘Pin It’ do Pinterest usando o editor de site completo

Se você estiver usando um dos temas mais recentes habilitados para blocos habilitados para blocos, então você pode adicionar um botão 'Pin It' em qualquer lugar do seu tema WordPress usando o shortcode personalizado.

Esta é uma maneira fácil de adicionar o botão a todas as páginas e posts. Você também pode adicionar o botão 'Pin It' a áreas que você não pode editar usando o editor de conteúdo padrão do WordPress, como o modelo de página 404 do seu site.

Para começar, basta ir em Temas » Editor no painel do WordPress.

Abrindo o editor de site completo (FSE) do WordPress

Por padrão, o editor de site completo mostrará o modelo inicial do seu tema.

Para adicionar um botão 'Pin It' a uma página diferente, basta selecionar 'Modelo' ou 'Partes do Modelo' no menu esquerdo.

Escolhendo um modelo ou parte de modelo do WordPress no editor de site completo

Agora você pode selecionar o modelo que deseja editar.

Neste exemplo, mostraremos como adicionar um botão 'Pin It' ao modelo de página Única do seu site. No entanto, os passos serão semelhantes, independentemente do modelo que você escolher.

Escolhendo um modelo único habilitado para blocos

O WordPress agora mostrará uma prévia do modelo ou parte do modelo.

Para editar este modelo, vá em frente e clique no pequeno ícone de lápis.

Como editar um modelo único do WordPress usando o editor baseado em blocos

Com isso feito, clique no ícone azul '+' no canto superior esquerdo.

Na barra de pesquisa que aparece, digite 'Shortcode'.

Como adicionar um botão Pin It usando shortcode

Quando o bloco correto aparecer, arraste e solte-o no layout do modelo.

Agora você pode digitar o shortcode Pin no bloco.

Adicionando um botão pin do Pinterest ao seu site usando o editor de site completo (FSE)

Depois disso, basta clicar em 'Salvar' para tornar o novo shortcode ativo.

Agora, se você visitar seu site WordPress, verá o botão 'Pin it' em ação.

Método 4: Adicionar Botão 'Pin It' do Pinterest Usando Código e FTP

Outra maneira de adicionar um botão do Pinterest ao seu site sem um plugin é adicionar código diretamente aos arquivos do seu tema. No entanto, este método é adequado apenas para usuários técnicos.

Editar os arquivos do tema diretamente pode causar muitos erros comuns do WordPress, e você perderá todo o código personalizado ao atualizar o tema do WordPress. Com isso em mente, sempre recomendamos usar o WPCode em vez disso.

No entanto, se você usar este método, precisará começar fazendo um backup completo do WordPress do seu site. Isso ajudará você a restaurar seu site caso algo quebre acidentalmente.

Com isso feito, conecte-se à sua hospedagem WordPress usando um cliente FTP e, em seguida, vá para a pasta /wp-content/themes/.

A partir daqui, você precisa abrir a pasta do seu tema atual e localizar o arquivo footer.php.

Baixando o arquivo footer.php no WordPress

Em seguida, clique com o botão direito do mouse nesse arquivo e selecione ‘Download’ no menu. Isso baixará o arquivo footer.php para o seu computador.

Agora, você precisa abrir o arquivo footer.php usando um editor de texto simples como o Bloco de Notas e colar o seguinte script logo antes da tag </body>.

<script type="text/javascript">
(function() {
    window.PinIt = window.PinIt || { loaded:false };
    if (window.PinIt.loaded) return;
    window.PinIt.loaded = true;
    function async_load(){
        var s = document.createElement("script");
        s.type = "text/javascript";
        s.async = true;
        s.src = "https://assets.pinterest.com/js/pinit.js";
        var x = document.getElementsByTagName("script")[0];
        x.parentNode.insertBefore(s, x);
    }
    if (window.attachEvent)
        window.attachEvent("onload", async_load);
    else
        window.addEventListener("load", async_load, false);
})();
</script>

Depois de fazer isso, você precisa salvar o arquivo e, em seguida, carregá-lo de volta para a pasta do tema atual.

Em seguida, localize o arquivo de modelo no seu tema onde você deseja adicionar o botão. Geralmente, este será o arquivo single.php, mas pode variar dependendo do seu tema WordPress. Se você não tiver certeza, consulte nosso guia para iniciantes da hierarquia de modelos do WordPress.

Para editar o arquivo de modelo, basta baixá-lo da pasta do seu tema e abri-lo para edição.

Você precisará escolher o local onde deseja exibir o botão ‘Pin It’. Muitos sites exibem botões de compartilhamento social diretamente abaixo do título da postagem, mas você pode usar qualquer local que desejar.

Após escolher um local, basta adicionar o seguinte código:

<?php $pinterestimage = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'full' ); ?>
<a href="http://pinterest.com/pin/create/button/?url=<?php echo urlencode(get_permalink($post->ID)); ?>&media=<?php echo $pinterestimage[0]; ?>&description=<?php the_title(); ?>" class="pin-it-button" count-layout="vertical">Pin It</a>

O trecho de código acima adiciona a imagem em destaque da postagem, o título, a descrição e o URL nos parâmetros do URL de compartilhamento.

Este trecho de código também adicionará um botão de compartilhamento vertical a todas as suas postagens. Se você quiser exibir um botão de compartilhamento horizontal em vez disso, basta alterar a seção count-layout="vertical"> para count-layout="horizontal">.

Quando estiver pronto, salve o arquivo e faça o upload de volta para o seu tema diretamente usando FTP.

Bônus: Guias Adicionais Sobre WordPress e Mídias Sociais

Interessado em aprender mais sobre como usar o WordPress com mídias sociais? Confira estes guias para iniciantes:

Se você gostou deste artigo, por favor, inscreva-se em nosso Canal do YouTube para tutoriais em vídeo do WordPress. Você também pode nos encontrar no Twitter e no Facebook.

Aviso: Nosso conteúdo é apoiado pelos leitores. Isso significa que, se você clicar em alguns de nossos links, poderemos ganhar uma comissão. Veja como o WPBeginner é financiado, por que isso importa e como você pode nos apoiar. Aqui está nosso processo editorial.

O Kit de Ferramentas Definitivo para WordPress

Obtenha acesso GRATUITO ao nosso kit de ferramentas - uma coleção de produtos e recursos relacionados ao WordPress que todo profissional deve ter!

Interações do Leitor

65 CommentsLeave a Reply

  1. Obrigado pelo trecho de código PHP.
    Eu copiei e colei o código no arquivo footer.php do meu site, mas o botão não apareceu inicialmente após o upload.
    Percebi que precisava limpar meu cache antes que o novo botão fosse exibido corretamente.

  2. Obrigado pelo snippet de php. Eu o testei em um dos sites e funciona perfeitamente. Você me poupou espaço entre os plugins. Bom trabalho.

  3. Olá. Acabei de adicionar os plugins shared counts e o add-on do Pinterest recentemente. Eles parecem funcionar bem, mas notei que não são atualizados há vários anos nem foram testados com minha versão do Wordpress. Devo procurar um novo plugin ou eles ainda estão ok para usar?

  4. Estou querendo adicionar um pin gráfico individual que eu criei personalizado ao post de viagem ao qual ele pertence (como as melhores coisas para fazer em Jaipur). É isso que este artigo cobre ou é apenas o "Botão" literal do Pinterest que se parece com o logotipo do Pinterest? Desculpe ser tão fixado nessa tecnicalidade, mas uma imagem ou duas tornariam mais claro qual "botão" específico você está se referindo....obrigado antecipadamente...

    • Isso é para o botão de pin do Pinterest, a segunda captura de tela no artigo deve ser o que você está procurando como exemplo.

      Admin

  5. oi wpbeginner, eu sigo seus códigos, posso saber se ainda vou fixar as imagens nos meus painéis do pinterest? ou elas serão fixadas automaticamente lá? ainda sou iniciante nesta plataforma. obrigado

  6. Obrigado pelo código. Acabei de adicioná-lo ao meu site de autor. (Não tenho ideia de como o botão do Pinterest aparece nas minhas imagens no meu site de negócios, mas aparece.)

    Agora meu site de autor está todo configurado!
    Obrigado, Syed.

    P.S. I just followed you on Pinterest. :)

  7. Eu fiz a última opção, adicionando o shortcode ao arquivo functions.php do meu tema. Funcionou, mas não consegui mais salvar meus posts como rascunho. Então removi o código e não está funcionando. Meu site ainda está online, mas não consigo mais fazer login no meu site. A seguinte mensagem aparece:

    Warning: Cannot modify header information – headers already sent by (output started at /home/peque107/public_html/wp-content/themes/himmelen/functions.php:2) in /home/peque107/public_html/wp-includes/pluggable.php on line 1224

    Por favor, ajude!

  8. Isso se aplica apenas a blogs do wordpress.org? Tenho um blog wordpress.com e não tenho certeza se posso adicionar este plugin a ele?

    Obrigado!

  9. Tenho um problema. Segui as instruções e apareceu este erro:

    Erro de análise: erro de sintaxe, '<' inesperado em /home/cmomb/butfirstwehavecoffee.com/wp-content/themes/notepad/functions.php na linha 18

    Agora não consigo me livrar disso. Alguém poderia me aconselhar. Meu site está fora do ar.

    • Abra o arquivo functions.php em um editor de texto como o Bloco de Notas. Vá para a linha 18. Provavelmente você tem a tag <?php lá que você não precisa. Exclua-a e também exclua a tag de fechamento ?>

      Admin

  10. Obrigado por isso primeiramente

    Estou com dificuldades para posicionar o elemento. Ele parece sempre ficar no canto superior esquerdo da div.

    É possível posicioná-lo e também mudar a imagem de fundo para uma personalizada?

    Obrigado

  11. Ótimo tutorial, como sempre. Eu estava me perguntando, no entanto, se havia uma maneira de modificá-lo para usar um botão personalizado em vez do botão de estrela que aparece automaticamente.

    Obrigado,

    Mark

  12. Bom tutorial, eu o coloquei no meu site sem problemas, depois o testei e funcionou, mas ainda diz 0 depois que eu fixei.
    Mark

  13. Tentei tantos plugins... eles não funcionam com rolagem infinita e galeria nextgen.... mas com algumas alterações este script resolveu meu problema.. obrigado

  14. Olá,

    Eu só queria perguntar se eu poderia mudar o tamanho do botão “pin it”? Porque parece que ele ficou um pouco pequeno.

    Atenciosamente,

    Michael

  15. Este código parou de funcionar recentemente. Eu o tinha em meu site e estava funcionando muito bem e recentemente as imagens parecem estar funcionando, mas quando você visualiza o pinboard não há imagem definida. Outras vezes, ao tentar fixar, ocorre um erro 502 que vem do site do Pinterest. Alguma ideia?

  16. Há um bug no código. O href gerado para o botão pin it deve incluir 'url=', atualmente está faltando o sinal de igual.

  17. Para usuários do wordpress.. adicionar o pin it ou qualquer outra mídia social é fácil! Em painel, vá em configurações, clique em compartilhamento e todos aparecem - clique no que você quer adicionar!

    • OBRIGADO! Eu estava procurando como fazer isso por 2 dias e baixei algo que não funcionou, eu estava prestes a desistir e então FELIZMENTE li seu comentário. Agradeço a alguém por tornar isso tão FÁCIL quanto realmente é, como o wordpress não pode fazer isso?

  18. Existe alguma maneira de personalizar isso para que você possa selecionar uma imagem personalizada para o botão pin-it?

  19. Tentei adicionar isso… funcionou, mas quando você clica em "Pin it" e ele abre a janela em um novo navegador e você realmente envia o pin, ele apenas recarrega a janela recém-aberta e o pin não é enviado. Decidi não implementá-lo até que eles consertem seus bugs.

  20. I used the ‘follow me’ code on the Pinterest Goodies page and pasted it into the ‘text’ widget on my WordPress blog. The button now appears right after my mini bio. It works quite well. :)

  21. Para qualquer framework de tema avançado como Thesis, Genesis, Headway etc., você tem que adicionar esses códigos através do arquivo functions.php usando os hooks apropriados do framework. Não podemos cobrir todos os frameworks de temas existentes. A maioria dos blogs de frameworks de temas tem instruções sobre como personalizar os temas.

    Admin

    • @wpbeginner Não é o ideal, mas na verdade não é muito mais do que você tem que fazer para postar a imagem de qualquer maneira. Ainda estou procurando uma ótima opção (plugin idealmente) que a) funcione no meu tema e b) seja fácil. Felizmente, devido à popularidade do Pinterest, tenho certeza de que alguém terá um funcionando em breve!

  22. Funciona, mas exibe o texto “array” antes do botão Pin It. Estou chamando-o através do meu functions.php, assim: “echo $pinterestimag…..<?php;" Isso pode ser o motivo?

Deixar uma resposta

Obrigado por escolher deixar um comentário. Por favor, tenha em mente que todos os comentários são moderados de acordo com nossa política de comentários, e seu endereço de e-mail NÃO será publicado. Por favor, NÃO use palavras-chave no campo do nome. Vamos ter uma conversa pessoal e significativa.