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

04:05

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://4.bp.blogspot.com/-yIDyaygEu5A/V8QMQhsRXoI/AAAAAAAAF_4/t0gtl1T6IQIuuOCs_GAHi5koY6jhKMB9wCLcB/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://2.bp.blogspot.com/-mT8X_O71RRE/V8QMPQflf8I/AAAAAAAAF_w/dcej0QCCv_wCWseRKKpOeWCjKuSaDrT-wCLcB/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://1.bp.blogspot.com/-Uk0KzZPzJ98/V8QMPVmxZUI/AAAAAAAAF_s/dJfG2Pgb_pgctQV4aXGEqdpHQkuIv3DlACLcB/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://1.bp.blogspot.com/-srhfDk8TZG8/V8QMPYDV2UI/AAAAAAAAF_o/tdIZsNvFsLAFHmAxfrRaeYjvcxCiwTdwACLcB/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://3.bp.blogspot.com/-4MeTuck7SxU/V8QMPiCkmXI/AAAAAAAAF_0/ac7bCEy6CPQbgQet99v_2YKtUSLpRbiFwCLcB/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!

Você pode gostar também

11 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

Mande seu comentário, criticas, elogios ou sugestões.
Responderei o mais rápido possivel.
Um forte abraço a todos vocês!

Contrate o Blog

Meu blog faz parte do Modatrade


Renata Massa
Renata Massa
Modatrade | A vitrine dos blogs de moda
Modatrade | A vitrine dos blogs de moda