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:

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

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:

• Pinterest: Aprenda como criar, como usar e mexer no Pinterest

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.

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.