Adicionar botões do Pinterest com contador no Blogger: Pin it


Inscreva-se no nosso Canal no Youtube.

Por ser uma rede social emergente e que está conquistando milhares de seguidores, o Pinterest, dediquei um tempo aprendendo a usá-la e percebo que os blogueiros vão precisar investir nela. Uma ajuda são os botões de compartilhamento incorporados ao Blog. Já ensinei um pouco sobre isso e agora vou mostrar como adicionar o botão padrão do Pinterest com contador de cliques no Blogger.

Não está feliz com seu Blog?
Descubra como SALVAR seu Blog em 40 dias - http://www.salvarblog.com
Curso "Técnicas de SEO para Blogs": http://seo.blogueiro.pro

Já ensinamos aqui como colocar um botão do Pinterest em seu blog (Blogger), mas sem o contador. No tutorial tem um plugin para WordPress.org que tem contador de cliques:

Se você ainda não conhece ou não usa o Pinterest, recomendo que leia nosso tutorial que ensina passo a passo como criar um conta e usar essa nova rede social:

Como adicionar botões “Pin it” com contador no Blogger

Quando alguém compartilhar algum conteúdo do seu blog no Pinterest, o retorno pode ser em visibilidade, mas é bom exibir para os visitantes quanto de seu blog já teve divulgação, incentivando outros a fazer o mesmo. Os botões de “Pin it” do Pinterest com contador podem dar essa visibilidade necessária.

Modelo de Botões de Pin it do Pinterest no Blogger

O exemplo de código que vou mostrar pode ser colado em qualquer parte do seu blog dentro do código fonte. Mas vou mostrar como adicionar o contador do Pinterest no roda-pé dos posts. Para isso abra o painel do Blogger, entre 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 e procure pelo seguinte trecho de código:

<data:post.body/>

Imediatamente ABAIXO disso, cole o seguinte trecho.

<b:if cond='data:blog.pageType == "item"'>
<a class='pin-it-button' count-layout='vertical' expr:href='&quot;http://pinterest.com/pin/create/button/?url=&quot; + data:post.url'>Pin It now!</a>
<a href='javascript:void(run_pinmarklet())' style='margin-left:-46px; width:43px; height:20px; display:inline-block;'/>
<script src='http://assets.pinterest.com/js/pinit.js' type='text/javascript'/>
<script type='text/javascript'>
function run_pinmarklet() {
var e=document.createElement(&#39;script&#39;); e.setAttribute(&#39;type&#39;,&#39;text/javascript&#39;);
e.setAttribute(&#39;charset&#39;,&#39;UTF-8&#39;);
e.setAttribute(&#39;src&#39;,&#39;http://assets.pinterest.com/js/pinmarklet.js?r=&#39; + Math.random()*99999999);
document.body.appendChild(e);
}
</script>
</b:if>

A única modificação a fazer nesse código é alterar o formato do botão onde está indicado de vermelho. “Vertical” para o modelo menor do contador ou “horizontal” para o segundo modelo maior.

Outros locais para adicionar o botão “Pin it” fica a critério do seu layout, de preferência próximo de outros botões de outras redes sociais.

Curso SEO para blogs
Quero Salvar meu Blog

Quero Salvar meu Blog

15 Comentários

  1. Oi Marcos, boa tarde. Eu tentei colocar o botão “Pin it” nos meus blogs… mas não deu certo. Vi que o código , abaixo do qual devemos colocar o código html do pinterest, existe em dois lugares no código-fonte.
    De todo modo, agradeço por tanto nos ensinar a melhor manejar nossos blogs.
    Abraço.

    Responder

  2. Legal Marcos! Essa é uma nova Rede Social que está conquistando muitos usuários e para os blogueiros se torna uma ferramenta de divulgação de grande valor. Lançaram uma outra Rede Social chamada de Pinspire que é uma cópia do Pinterest exceto pelo fato de ser possível utilizá-la em português. Abraços e boa sorte!

    Responder

  3. Olá Marcos! O meu eu coloquei no post footer. Visualmente fica ótimo, mas na hora de acionar o botão ele não reconhece o post, só reconhece o espaço do footer e então não “pina” nada… Acho que só funciona se colocar o botão no corpo do post né?

    abraços

    Responder

  4. No meu blog (Blogger) também não funciona. Já tentei sua postagem anterior, sem o contador, e esta agora. Tentei várias vezes e não consigo adicionar o link para o Pinterest. Tem certeza que seu código está correto? Obrigado!

    Responder

Deixe um comentário

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