Como adicionar o botão “Pin it” do Pinterest no Blog

Siga o Ferramentas Blog: Canal no Youtube | Facebook | Twitter | Google+
Acesse AGORA: https://blogueiro.pro e se torne um Blogueiro de Elite.
Botão Pin it do Pinterest

Uma das redes sociais que mais conquistam usuários é a Pinterest, para compartilhar imagens e vídeos a partir de sua navegação na internet. Para tornar seu blog mais compatível com o Pinterest, é possível adicionar um botão que facilita o envio do conteúdo para o painel. Com um código simples para Gadget do Blogger ou um plugin para WordPress.org, você pode ter mais chances de gerar seguidores ou mais divulgação no Pinterest.

Já ensinar como criar uma conta no Pinterest e como usar essa nova rede social de compartilhamento de conteúdo. Seu sucesso é tão grande que já é a terceira rede social mais usada, depois do Twitter e do Facebook:

Para tornar seu blog mais integrado ao Pinterest, vou ensinar como adicionar os botões de compartilhamento ou de seguidores direto na página de seu blog.

A página oficial dos botões do Pinterest é a http://pinterest.com/about/goodies/. Lá você tem os modelos padrões mais genéricos. É possível fazer algumas customizações e usar mais facilmente. Tanto para o Blogger quanto para o WordPress.org há especificações que tornam os botões melhor integrados.

Para WordPress.org

Se você tem um blog no WordPress.org é bem mais fácil e prático integrar o Pinterest em seu blog e adicionar os botões de compartilhar. Existe um plugin que é bastante usado e muito prático de configurar:

Basta instalar para usar e aparecer integrado ao Blog.

Para Blogger (BlogSpot)

Se você usa o Blogger para desenvolver seus blogs, então temos a opção de adicionar gadgets (elementos de página) para tornar os botões bem incorporados.

Abra o painel do seu blog, clique no menu “Modelo” e em seguida no botão “Editar HTML”.

Marque a opção expandir modelos de widgets” para ver todo o código fonte do seu blog, como no exemplo da imagem abaixo:

Dentro do código fonte, procure pela seguinte linha:

<data:post.body/>

Essa linha marca o início do post. Colando algo imediatamente abaixo dela, aparecer logo no final do post, abaixo do último parágrafo.

Então cole o seguinte trecho para aparecer o botão de “Pin it” do Pinterest abaixo de todos os títulos de todos os posts do seu blog automaticamente:

<b:if cond='data:blog.pageType == "item"'>
<a href='javascript:void((function()%7Bvar%20e=document.createElement(&apos;script&apos;);e.setAttribute(&apos;type&apos;,&apos;text/javascript&apos;);e.setAttribute(&apos;charset&apos;,&apos;UTF-8&apos;);e.setAttribute(&apos;src&apos;,&apos;http://assets.pinterest.com/js/pinmarklet.js?r=&apos;+Math.random()*99999999);document.body.appendChild(e)%7D)());'><img src='https://lh3.googleusercontent.com/-Vh5EBmRrOTI/T4SHj0gPjJI/AAAAAAAAD-c/yl0lJLYxaRk/s49/PinIt.png'/></a>
</b:if>

Salve o modelo e veja o resultado aplicado em seu blog. Esse botão automatiza o compartilhamento das imagens. Sempre que o visitante entrar em seu blog e quiser compartilhar algo no Pinterest, bastará clicar no botão.

Lembrando que o botão só aparece dentro das páginas dos posts.

.

11 Comentários

  1. Eu ia publicar esse método, que estou usando em meus blogs, mas ainda não gostei, porque ele usa o código gerado para navegadores. Infelizmente, o código oficial não funciona porque você precisa de dois links, o da página e o da imagem. O link da página é fácil, é só usar [data:post.url], mas e para a imagem do post? Tem o [data:post.thumbnailUrl], mas esse código é para gerar miniaturas e não funcionou nos testes que fiz.
    O código que você postou infelizmente pega todas as imagens que estão na página, e não do post em si. Mas como uma alternativa, é como aquele ditado, quem não tem cão caça com gato!
    Tomara que a equipe do Blogger inclua esse botão nativo.

    Responder

    • Também achei muito limitado o recurso, especialmente por não funcionar o contador para o Blogger. Penso que logo logo alguém descobre alguma forma de integrar isso melhor.

      Responder

  2. Interessante o post Marcos!

    Realmente parece que aos poucos o Pinterest também está conquistando espaço no Brasil enquanto “lá fora” já está bem popularizado…
    Fiquei espantado ao ver que o Pinterest teve um aumento de pouco mais de 2.700% em usuários únicos.. Sem dúvida alguma, quem implementar deve colher frutos logo logo..
    Abcs

    Responder

  3. Como faço para customizar o botão do pinterest usando seu código marcos?. quero colocar o botão na horizontal com o contador usando seu codigo como faço?

    Responder

  4. Ficou muito bom o post parabéns, engraçado que comecei a usar o Pinterest ontem. Se não for abusar teria como vocês ensinarem a colocar no plugin social do Ferramentas blog ,pois assim ficaria bastante organizado. Sou novo como blogueiro ainda não sei usar código. Obrigado.

    Responder

    • Adilson,
      Nas instruções do plugin social, mostramos como adicionar novos botões.
      Tudo o que tem a fazer é colar o código do novo botão no formulário que há para isso.

      Responder

  5. Olá Marcos. Tenho ouvido falarem muitas coisas boas sobre essa nova rede social também sobre o crescimento instantâneo do número de usuários. Sua dica é perfeita para quem não sabe como o adicionar no blog. Vou adentrar a esta rede também. Muito obrigado!!!

    Responder

  6. Pingback: Adicionar botões do Pinterest com contador no Blogger: Pin it | [ Ferramentas Blog ]

  7. Olá.

    S.O.S: Eu não tenho a opção “expandir modelos de widgets”.

    No lugar existe a seguinte mensagem: “É possível que a edição do modelo combinando HTTP e HTTPS afete a segurança e a experiência do usuário no seu blog quando ele é visto usando HTTPS. Saiba mais. Ocultar aviso”

    O que eu faço?

    Responder

Deixe um comentário

Ao comentar você concorda com nossa Política de Comentários.