Colocar botão "Pin it" do Pinterest sobre as Imagens do Blog

Veja como adicionar um botão Pin it sobre todas as imagens das postagens do seu blog para incentivar o compartilhamento das suas imagens na rede social Pinterest pode ajudar a conseguir mais visitas e links para suas paginas. Embora a rede de compartilhamento de imagens não seja tão utilizada quanto o Facebook ou Twitter nós achamos que dependendo do tipo de conteúdo do blog esse botão para compartilhar imagens pode ser muito util.

Como Adicionar o Botão "Pin it" do Pinterest no Blogger


Esse é um procedimento muito simples, mas como vamos mexer no código HTML do blogger recomendamos que faça um backup do seu template antes de começar. Entre na pagina modelo > Editar HTML e procure e coloque esse código antes de </body>.
<script>
//<![CDATA[
var bs_pinButtonURL = "http://3.bp.blogspot.com/-y3xzTGiGzH0/UK4XOaUpdaI/AAAAAAAADw8/Z1MH4Jr4Efo/s1600/pinterestx1_72.png";
var bs_pinButtonPos = "center";
//]]>
</script>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js' type='text/javascript'/>
<script src='http://greenlava-code.googlecode.com/svn/trunk/publicscripts/bs_pinOnHoverv1_min.js' type='text/javascript'/>
<!-- please do not alter or remove the following code -->
<div id='bs_pinOnHover'><a href="http://www.bloggersentral.com/2012/11/pinterest-pin-it-button-on-image-hover.html">Pin It button on image hover</a></div>

O código está com o botão de compartilhamento posicionado no meio da imagem, mas se você não quiser usar o botão centralizado existem outras opções modificando a linha: var bs_pinButtonPos = "center";

Troque a palavra center por uma das opções abaixo:
topleft - Lado esquerdo na parte superior da imagem
topright - Lado direito na parte superior da imagem
bottomleft - Lado esquerdo na parte inferior da imagem
bottomright - Lado direito na parte inferior da imagem

Veja também:
Colocar botão "Pin it" do Pinterest sobre as Imagens do Blog
4 Passos para Criar Banners ou Imagens para Usar em Blogs e Sites

Nos testes que fizemos o posicionamento que funcionou melhor foi o centralizado (center). Os outros apresentaram algumas diferenças entre os navegadores.

Dicas de Botões para Compartilhar as Postagens do Blog


Colocar Botões de Compartilhamento em Forma de Coração no Blog
Adicionar e Personalizar Botão Curtir/Enviar do Facebook no Blogger
7 Opções de Botões de compartilhamento para Divulgar Blog
Estatísticas Botões de Compartilhamento - Curtir, Retweet, +1 e Outros

Achamos esse código interessante porque adiciona o botão para compartilhar imagens em todas as imagens das postagens de uma vez só, ou seja, de maneira muito simples de instalar e retirar caso você ache que não teve bons resultados quando foi analisar as visitas do blog. Então faça seus testes e nos diga o que achou desta dica para compartilhar imagens em redes sociais.

31 comentários :

  1. parece interessante, adoro pinterest :3
    mas o botão só aparece em hover ou fica direto na imagem?

    ResponderExcluir
  2. Bia o botão só aparece quando passa o mouse sobre a imagem

    ResponderExcluir
  3. Excelente o artigo! Bem explicado. Obrigado por compartilhar.

    ResponderExcluir
  4. ola Fabiano
    eu queria saber como colocar no blog aqueles pros e contras (em caixinha verde e vermelha) e tambem gostaria de saber se vc conhese algum gadget d e "video da semana" (que ja atualize automaticamente com a conta do youtube) isso e tudo obrigado.

    ResponderExcluir
  5. sr.chrono trigger aqui tem um sistema de classificação com estrelas:

    Classificação com estrelas nas postagens

    ResponderExcluir
  6. Fabiano, gostei bastante desse gadget mais estavo me referindo a aquelas caixinhas que aparecem na postagem tipo a desse site: http://www.superdownloads.com.br/download/132/vdownloader/ eu queria botar caixinhas de pros e contras feito essas no meu blog...

    ResponderExcluir
  7. as caixas você poderia fazer com estilos css, por exemplo:

    <div style="border: 2px solid #00C">

    <div style="background:#FC3">Contras</div>

    <div>O programa é muito lento</div>

    </div>

    mas se for utilizar em varias postagens é melhor criar o estilo CSS em vez de configurar diretamente em cada caixa, assim se resolver modificar as cores poderá alterar tudo de uma vez só.

    ResponderExcluir
  8. Gostei, to usando, só mudei a imagem porque achei muito grande. Abraço.

    ResponderExcluir
  9. Fabiano, tem um site de vendas com o mesmo nome do meu blog e eu queria saber se teria algum problema se eu alterasse o nome e o endereço do blog para águia jogos e como fazer isso sem perder visitas.

    ps: esse site ja existia quando eu fiz meu blog.

    ResponderExcluir
  10. alterar o nome do blog vai dar alguma diferença dependendo das palavras que usar, mas isso pode fazer ganhar ou perder visitas depende do novo nome.

    quando a trocar o endereço ai fica mais complicado, veja aqui:
    Como Trocar o Domínio Próprio do meu Blog por Outro Endereço

    mas já que pretende um novo nome e endereço poderia criar esse novo site e manter o atual como está por um tempo mas dando prioridade para o novo e aos poucos pode desativar o antigo.

    ResponderExcluir
  11. Fabiano, como faço pra exibir os anúncios do Adsense de volta... Minha conta no Adsense não exibe mais anúncios, por causa de um tal de anúncios para conteúdo foi cancelado e não exibe mais. O que eu faço??

    ResponderExcluir
  12. Marcos Vinicius tem que ver na pagina do adsense se tem uma explicação do porque não aparece mais os anuncios, se foi alguma punição.

    veja os links abaixo:
    Regras do Adsense: Evite Punições, Cliques Inválidos

    Video Aula sobre o Regulamento dos Anúncios Google Adsense

    ResponderExcluir
  13. não foi punição; diz que é o serviço que disponibiliza os anúncios foi desativado.

    Já até criei outra conta no adsense ( outra conta do google e tal) mas mesmo assim não exibe os anúncios


    Num sei se é o site que eu coloquei no começo da inscrição www.frasesversos.com

    ResponderExcluir
  14. Esse é o email que chegou pra mim( faz tempo, foi em março)

    "Olá,
    Você recebeu este e-mail
    porque está usando o AdSense
    para domínios para gerar
    receita com seus domínios não
    desenvolvidos. Depois de avaliar
    os benefícios de nossa rede de
    parceiros, decidimos desativar
    o produto Domínios
    hospedados no Google AdSense.
    A partir de agora, domínios não
    desenvolvidos só serão
    veiculados através de nossa
    rede de distribuição do AdSense
    para domínios existente.
    Nossos registros mostram que 7
    de seus domínios hospedados
    serão afetados por essa futura
    alteração, que seguirá a
    programação a seguir:
    21 de março: você não
    poderá mais criar novos
    domínios hospedados
    18 de abril: os domínios
    hospedados ficarão inativos,
    e não será mais possível
    gerar receita com eles
    27 de junho: os domínios
    hospedados não estarão
    mais disponíveis em contas
    do Google AdSense
    Para continuar gerando receita
    com seus domínios não
    desenvolvidos, você poderá
    migrar seu portfólio de
    domínios para um novo
    provedor de domínio reservado
    de sua preferência"



    O que quer dizer?

    ResponderExcluir
  15. Marcos Vinicius você configurou esse dominio no adsense para dominios?

    deve retirar essa configuração e deixar somente os anuncios do adsense

    ResponderExcluir
  16. eu nunca usei essa configuração do adsense.

    fui procurar e não encontrei como desativar, sugiro que crie um topico no forum de ajuda do adsense lá tem muita gente que conhece bem as configuração do adsense além de funcionários do google que respondem perguntas e ajudam a resolver problemas

    ResponderExcluir
  17. Amei essa ideia já tinha visto em vários sites e me apaixonei dai hoje procurando finalmente encontrei o tutorial vou testar depois coloco no blog, bjoO!

    ResponderExcluir
  18. tem como trocar este ícone por um do facebook?

    ResponderExcluir
  19. vou tentar adaptar esse código para o facebook e assim que possivel publicar um tutorial

    ResponderExcluir
  20. Tem como por um ícone do facebook ou twitter ao invés deste ?

    ResponderExcluir
  21. Coloquei no meu blog e está funcionando muito bem, obrigado Fabiano

    ResponderExcluir
  22. Tentei várias vezes mas não funciona de jeito nenhum

    ResponderExcluir
  23. alguns códigos aparesentaram falhas depois da mudança na pagina editar html do blogger... se for esse o caso por enquanto não tem o que fazer.

    mas temos outras opções de botões sobre as imagens veja aqui:
    Colocar Botões de Compartilhamento nas Imagens

    ResponderExcluir
  24. Oi gostaria de usar o mesmo recurso para facebook, compartilhar só imagem no facebook e g+
    Tem como?
    Obrigado

    ResponderExcluir
  25. Nina não tenho código pronto para fazer do jeito que você falou, mas veja esse link:
    Mostrar Botão Compartilhar em Imagens e ao Selecionar Texto

    ResponderExcluir
  26. olá. Não sei o que estou fazendo de errado, mas não dá certo.
    Coloquei o código e nada...

    ResponderExcluir
  27. Sorry... estava colocando antes do "body" errado. deu certo. Obrigada. Elisabeth

    ResponderExcluir
  28. colocar códigos no blog é meio complicado mesmo...

    se apagar ou colocar qualquer letra ou sinal faltando ou sobrando o código não funciona.

    ResponderExcluir