Como Colocar Botão Pin it do Pinterest no Blogger ou Wordpress

Coloque um botão (botão Pin It) no Blogger ou Wordpress para compartilhar as imagens do seu blog no Pinterest que é uma rede social especializada em compartilhar fotos e imagens que está crescendo muito rápido e pode ajudar na divulgação do seu blog através das imagens que você publica em seus posts e claro conseguirem mais visitas através das imagens que utiliza no seu blog (veja também: Aparecer na Pesquisa de imagens Google). Portanto divulgar as imagens do seu blog nesta nova rede social pode ajudar a conseguir muitas visitas e mais lucros dependendo do tipo de conteúdo e interesse das pessoas que visitam suas paginas.

botão Pinterest no blogger

E para os blogueiros que utilizam o Blogger você só precisa de um código para colocar o botão Pin It da rede social de imagens (Pinterest) no seu blog. Entre na pagina editar HTML, sugerimos que faça um backup do seu template por segurança depois clique em editar HTML, marque a opção expandir modelo de widgets, procure por post.body (use o ctrl F) e cole esse código logo abaixo do post.body:

<b:if cond='data:blog.pageType == "item"'>
<a href='javascript:void(run_pinmarklet1())'><img src="http://2.bp.blogspot.com/-lRae8bdMpuA/TzuLrnycXaI/AAAAAAAACQE/YVYUjfs7dm8/s1600/pinmask2.png" style='margin:0; padding:0; border:none;'/></a>
<script type='text/javascript'>
function run_pinmarklet1() {
var e=document.createElement('script');
e.setAttribute('type','text/javascript');
e.setAttribute('charset','UTF-8');
e.setAttribute('src','http://assets.pinterest.com/js/pinmarklet.js?r='+Math.random()*99999999);
document.body.appendChild(e);
}
</script></b:if>


achar trecho post.body no html do blogger

Isso faz o botão para compartilhar imagens aparecer somente nas paginas individuais das postagens do blogger, mas se quiser poderá utilizar o código em um gadget e deixar aparecer em todas as paginas do seu blog, então para fazer isso entre na pagina layout, adicionar gadget, html/javascript e cole esse código:

<a href='javascript:void(run_pinmarklet1())'><img src="http://2.bp.blogspot.com/-lRae8bdMpuA/TzuLrnycXaI/AAAAAAAACQE/YVYUjfs7dm8/s1600/pinmask2.png" style='margin:0; padding:0; border:none;'/></a>
<script type='text/javascript'>
function run_pinmarklet1() {
var e=document.createElement('script');
e.setAttribute('type','text/javascript');
e.setAttribute('charset','UTF-8');
e.setAttribute('src','http://assets.pinterest.com/js/pinmarklet.js?r='+Math.random()*99999999);
document.body.appendChild(e);
}
</script>

Agora é só escolher um bom posicionamento para o gadget na sua pagina. Podendo inclusive deixar o botão fixo no canto da pagina como mostramos em nosso tutorial: , neste caso é só trocar o código do addthis que está no tutorial do link por esse que acabamos de mostrar.

Outro detalhe interessante deste código para o botão do Pinterest é que você pode trocar a imagem do botão por qualquer outra que desejar apenas alterando o endereço (http://2.bp.blogspot.com/-lRae8bdMpuA/TzuLrnycXaI/AAAAAAAACQE/YVYUjfs7dm8/s1600/pinmask2.png) da imagem neste trecho:

<img src="http://2.bp.blogspot.com/-lRae8bdMpuA/TzuLrnycXaI/AAAAAAAACQE/YVYUjfs7dm8/s1600/pinmask2.png" style='margin:0; padding:0; border:none;'/>

Você pode encontrar uma imagem pronto ou se quiser fazer uma imagem veja alguns Sites para Fazer Imagens Online e tenha cuidado com erros no endereço da imagem por isso se tiver duvidas leia sobre: Imagem não aparece no Blog ou Site.

Para colocar o botão do Pin It no Wordpress é muito simples existe um plugin do Pinterest para Wordpress que você pode encontrar no diretório de Plugins para Wordpress: Plugin Pin It.

botão do Pinterest para blogs

A imagem compartilhada no exemplo está na postagem:Pensamentos e Frases Filosóficas sobre a Vida e o Amor

Veja algumas informações sobre a rede social Pinterest, ela já é a terceira rede social mais popular nos Estados Unidos. No mês de fevereiro o Pinterest conseguiu 104 milhões de visitas, atrás apenas do Facebook (7 bilhões de visitas) e do Twitter (182 milhões) e na frente do LinkedIn (86 mi) e Google+ (61 mi). Então aproveite também e veja como colocar botões dessas redes sociais no seu blog:
Como Colocar Botão Linkedin no Blog
Colocar Gadgets no Blog para Google Plus: Botão +1 e Seguir Pagina
Botão Curtir e Enviar do Facebook Juntos
Twitter button no seu blog - botão retweet

Esperamos que gostem de mais essa dica para divulgar seu blog em redes sociais, mas é claro que sabemos que cada tipo de blog pode ter mais ou menos vantagens em cada rede por isso vale à pena testar e descobrir o quanto as imagens que usa no seu site podem ajudar a conseguir mais visitas.

Related Posts with Thumbnails
Como Colocar Botão Pin it do Pinterest no Blogger ou Wordpress
4/ 5
Oleh

19 Comentários

16 de abril de 2012 17:40 delete

Comecei a usar suas dicas e meu blog começou a receber bastante visitas
Vlw equipe do dicas para blog

Reply
17 de abril de 2012 11:52 delete

Gostei muito e agradeço. Tenho seguido suas dicas e meu blog teve uma vertiginosa subida nas visitas. Estou muito feliz pelos resultados das estatísticas. É... a coisa funciona mesmo. Meus dois blog - um sobre o Cerrado brasileiro e outro sobre Artes tem recebido bastante visitas para pesquisas (que é o meu objetivo) e não está vinculado ao interesse pela relação com a "blogosfera", mas fico muito feliz quando recebo alguns comentários, a maioria em agradecimento as minhas matérias para pesquisas.
Obrigada por seu trabalho que muito tem auxiliado os blogueiros do Brasil.

Um grande abraço.

Reply
17 de abril de 2012 11:58 delete

Olá Fabiano,na edição do HTML eu encontro duas linhas de "post.body",em qual delas devo colocar o código? Tentei colocar numa,penso que na 1ª, e deu erro.Podes ajudar?
Abraço

Reply
17 de abril de 2012 11:59 delete

Olá Fabiano,na edição do HTML eu encontro duas linhas de "post.body",em qual delas devo colocar o código? Tentei colocar numa,penso que na 1ª, e deu erro.Podes ajudar?
Abraço

Reply
17 de abril de 2012 17:03 delete

tem 2 vezes o post.body por causa do resumo da postagem, então tem que fazer o teste para ver em qual funciona.

mas é aquela que está depois do < / b:if > infelizemente isso varia muito dependendo de como fez para colocar o resumo da postagem no seu blog


outro detalhe pode ser o código da primeira, então em vez de usar:
<b:if cond='data:blog.pageType == "item"'>

coloque desse jeito:
<b:if cond='data:blog.pageType == &quot;item&quot;'>


se funcionar bem vou trocar isso no tutorial, mas nos testes que fiz funcionou das duas maneiras

Reply
18 de abril de 2012 11:34 delete

Como eu faço com que o botão Tweettar do Twitter, só tweet o post e não o título?

Reply
18 de abril de 2012 17:10 delete

acho que não tem como evitar que o botão "pegue" o titulo do post

Reply
19 de abril de 2012 06:11 delete

Olá Fabiano,obrigado pela dica e resposta,mas entretanto coloquei na 1ª,(fui persistente) e resultou.Abraço

Reply
19 de abril de 2012 16:02 delete

Ola,parabéns pelo blog !
veja meu blog blog-teen-17.blogspot.com o que eu posso melhorar nele? deus de ja obrigado

Reply
19 de abril de 2012 16:04 delete

Vc ajuda muito.. nois que tem blog

Reply
19 de abril de 2012 16:33 delete

blog-teen-17 Mais importante que a minha opinião sobre um blog é a das pessoas que visitam o blog.

minha sugestão é fazer testes troque gadgets de lugar ou adicione novos e retire antigos. Depois veja se faz diferença nas visitas do seu blog.

outra coisa util é olhar as estatisticas para ver quais postagens tem mais visitas e comentários assim pode saber quais os temas que mais fizeram sucesso com seus leitores.

Reply
21 de abril de 2012 09:56 delete

Tem como fazer um botão adicionar o botão "tweet personalizado, curtir e o +1" pra que eles eles apareçam em todas as postagens sem utilizar o do addthis?

Reply
21 de abril de 2012 23:30 delete

você pode pegar o código do botão do twitter e qualquer outro que desejar e colocar na pagina editar html depois de post.body

Reply
22 de abril de 2012 11:58 delete

Mas não dá... diz que as tags não estão fechadas...

Reply
22 de abril de 2012 11:59 delete

Mas não dá... diz que as tags não estão fechadas...

Reply
22 de abril de 2012 14:06 delete

Marcos Vinicius
veja nos códigos do botão do twitter e outros se usa aspas no código se tiver troque por '

o blogger raramente aceita códigos com aspas.

tente usar nossa pesquisa para achar os códigos desses botões já publicamos sobre todos eles

Reply
22 de fevereiro de 2013 19:36 delete

Eu coloquei os códigos HTML no local indicado, por duas vezes, e não apareceu nada.

Reply
22 de fevereiro de 2013 19:45 delete

se colocou o código certo e não apagou nada por acidente então talvez seu blog tenha algum outro código que está gerando conflito e não deixando esse funcionar

Reply
2 de setembro de 2013 16:40 delete

adorei!!!!deu certo .....obrigada

Reply