Como inserir um botão de Compartilhar 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!