Como inserir um botão de Compartilhar com ícone do Whatsapp?

Como inserir um botão de Compartilhar no Whatsapp com ícone do Whatsapp?

Como criar Botão Compartilhar no Whatsapp 

com imagem no Blog?

É exatamente isso que vim trazer para vocês no post de hoje, uma dica super útil, e que eu sempre quiz aprender, depois de alguns testes trouxe um codigo que funcionou bem no blogspot, lembrando que a funcionalidade do codigo depende muito da codificaçao do seu layout, se voce tiver alguma noçao saberá edita-lo caso dê algum erro... enfim, ja editei com os botoes do FACEBOOK, GOOGLE+, TWITTER e claro o WHATSAPP.

Ficará no final de cada postagem assim: 

ATENÇAO:
Os ícones aparecerão normalmente em qualquer dispositivo, mas a opção de COMPARTILHAR no WHATSAPP funcionará apenas no dispositivo que tem o APLICATIVO instalado.

Veja também: GANHE DINHEIRO COM SEU BLOG 

Vamos começar?

Vá no HTML do seu Blog, dê Ctrl+F e procure por:

  <div class='post-footer-line post-footer-line-2'>

A depender do seu layout, aparecerá duas vezes, é a segunda opçao que estamos procurando. Abaixo dessa linha (antes do fechamento da </div>   Cole o seguinte codigo:


<span class='compartilhamento'><img alt='' class='compartilhe-amor' height='50' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh1EC_PfYFJLSmhzkzBGHTkpS73qnqrw6N_bcRXEt0XlYVSOhS3XXTu0sbwS5yyXGItfxfJcJ_kXkgGNkAAmHyDHHZJV8TdIlFIYZB97KY2w4h2S_JL8YXSZE6Ajiv0Kpqx4L4Z8vm8C5uG/s1600/compartilhe2.png' width='149'/>
<!-- share buttons -->
<a expr:href='&quot;http://www.facebook.com/share.php?u=&quot; + data:post.url' target='_blank'><img class='acende' hspace='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEimPVPQUO1TjdMFjyo7r0mVNxuUp0TSS7HCq_EODBOmxkUxe-1_HpOtbpGUh50_vRtw5I9jq4mVg699B0__qSKuwhyphenhyphenlejnH3AHGuJG2luNclQJ73Mt1Gzma0xwqShnpaJ7Q3uX-twmiST1H/s1600/fb.png' title='Facebook'/></a>
<a expr:href='&quot;http://twitter.com/share?url=&quot; + data:post.url' target='_blank'><img class='acende' hspace='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi2_xkkD9rgsdLNcAS-7QBnFJAY1XgNpBjZdJUERMXqnw2aMgBGXr9pZYRhnxXT2ZNHP0xHG_kRLDmG1FPU_jhsluBqsjB72xI_sf-lLjrzz9sv1bo5MyOWNDl9b9Z4t6R5iCwCS3EGqYLZ/s1600/tw.png' title='Twitter'/></a>
<a expr:href='&quot;https://plus.google.com/share?url=&quot; + data:post.url' target='_blank'><img class='acende' hspace='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg1D3AevumNPOLsaVg9q86u9YF_KVEzi4cRKnuGYbMWrrIcZxGIMuPYdJJm-rdWAmlcuied_F4cMg7IWGYD7-vnVfkLwUDeJ3h6krFuovHX9Yo0Su0V5deS3zokbixM2bO6ESP6PUVslf07/s1600/g%252B.png' title='G+'/></a>

<a expr:href='&quot;whatsapp://send?text=&quot;  + data:post.url' target='_blank'><img class='acende' hspace='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiO4gxloNpHsWilfJ3qbbq-Z-_VMo9zaU4kJgnzD8V_bzVC4Iy9uGgbcpuJUEXKtGo8NjGj7YvkX2BG4x2hdtboQOXbGvCG1QcGCil3skZeqBkHggm3qXjUXjQ6IFRR49XD0KY1NdXS_hUn/s1600/wts.png' title='Whatsapp'/> </a>


<!-- share buttons -->
              </span>

Feito isso, é só salvar!
Os LINKS em VERMELHO são das imagens que  podem ser trocadas, basta hospedar e copiar a URL para substituir.

A imagem COMPARTILHAR tem 150x50 px de dimensão
E os BOTÕES tem 32x32 px

Se esse post foi útil para você me ajude compartilhando, se for reblogar ultilize apenas os codigos (e nao o meu texto no geral) e nao esqueçam de dá os devidos CRÉDITOS  (pois o google tem como identificar plágios).


Um forte abraço a todos vcs e até o próximo post se Deus quiser!

You Might Also Like

20 comentários

  1. Ótimo tutorial! Vou salvá-lo para incorporar em meu novo layout!

    www.cerejablack.com

    ResponderExcluir
    Respostas
    1. Pois eh colega, eu amei, ja estava buscando isso a tempos... e enfim conseguir colocar aqui no meu layout tbm <3
      Bjus Gessy

      Excluir
  2. Tutorial super útil, adorei!
    Já vou salvar aqui nos meu favoritos pra colocar no meu blog depois.

    Menina Vanilla

    ResponderExcluir
  3. Querida não estou conseguindo aplicar :(

    Copio e colo o código mas não altera nada.

    ResponderExcluir
  4. Consegui fazer direitinho! Simples e prático! Adoreeeeei!

    ResponderExcluir
  5. Você é de mais te amo rsrsr anjo da luz das blogueiras do mundo seu blog tem que crescer mais e mais ♥ grande blogueira grande pessoa moro em POrtugal meu blog sempre ta lindo por sua causa ♥ esses seus tutorias sempre salvando que deus te ilumine sempre

    ResponderExcluir
    Respostas
    1. Ariana, sua linda.. fico muito contente com seu comentario!Eu que agradeco, pois sao voces que fazem desse blog o que ele é. Eu moro na Italia (quase) pertinho de vc rs... Bjao minha linda...

      Excluir
  6. Muitooooooo obrigada, seus posts estão me ajudando dmsssss <3

    ResponderExcluir
  7. Legal! Parabéns pelo tutorial...gostei, mas ja tinha colocado outro codigo no meu blog

    ResponderExcluir
  8. Anônimo06 dezembro

    Não sei o que aconteceu, mas no meu blog, o código não foi encontrado :(

    ResponderExcluir
  9. Faz um post de como usar esses botões que você usa

    ResponderExcluir
  10. Diva no meu Blog o código não foi encontrado, que faço? o.O kkkk

    ResponderExcluir
  11. Olá Renata vc é um anjo para nós blogueiras iniciantes vou tentar colocar estou a tempo estava procurando isso,bjs

    ResponderExcluir
  12. Excelente tutorial, parabéns pelo trabalho!

    ResponderExcluir
  13. Oi Renata, eu gostaria de poder adiconar o botão de compartilhar no pinterest também, quero continuar usando esses códigos mas só adicionar o botão do pinterest a mais também. Você pode mandar um código pra fazer isso por favor?

    ResponderExcluir
  14. Mano do ceu vc me ajudou mto, mto msm mto PBG

    ResponderExcluir
  15. Muito obrigado, deu certo.

    ResponderExcluir

Mande seu comentário, criticas, elogios ou sugestões.
Responderei o mais rápido possível.
Um forte abraço.