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

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.

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.

.

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