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

Link desta Pagina

Compartilhe essa Página

19 comentários:

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

    ResponderExcluir
  2. 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.

    ResponderExcluir
  3. 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

    ResponderExcluir
  4. 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

    ResponderExcluir
  5. 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

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

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

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

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

    ResponderExcluir
  10. 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.

    ResponderExcluir
  11. 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?

    ResponderExcluir
  12. 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

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

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

    ResponderExcluir
  15. 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

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

    ResponderExcluir
  17. 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

    ResponderExcluir