Como criar Botão Compartilhar no Whatsapp com imagem no Blog?

olá pessoal, sempre quis trazer um post assim para o blog , eu pesquisava achava mais nao funcionava muito bem, agora sim consegui depois de muito tempo somar uma coisa aqui outra ali e saiu essa maravilha aqui pra vcs. jamais duvidem do seu potencial
                                    
            aparecerá assim :                             


                                         

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.

vamos la!!!

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/AVvXsEh7yr3YTBmbXmYH40E5KqKDFEitcAfZdmqLwlxCk7FA0d2dQcY5rhNoplXNcEOveGimU3ToDebjYgfOBPQDFYwJmb_e2ocoZ-7xpVpicW8GFPhlnzQHCLZJmoNzBThXFmUCtp7I-otu8ETD/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/AVvXsEi1mIONeFNn6lXW1GchXRqNElNSRODILjm0uuFlCiR3cCziDBP0nB2O9G1hJVNSuF4FnJm18pM7llCqDzOWcvhA98dhdmZ8I-3ZGIDTcQoI6hdOW0Oo2TcS4Srad5sEnQ7zB_XiNkbCADSu/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/AVvXsEhkykWF34kQppCaT08x1duc5lXC8Plslqo_UXBIdOtq_7d_EEb5ZNPZDWCHCLvPBrNnQeF9E_y-TiUOU4hyi8p2RiskEvU9W83umPzWtrMAuLCN_pGO-rW7_MRZ-mHrBeO2214IqDHDo3xp/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/AVvXsEhjr8pLHGxz53h81blyLOmrZGFqXQNSfRaYusMVdh7Pi-odenI0BXPXTsRIGBU2eKmLR787KkIVoXQGJvPYrT6Sz7V9dEq08jAuXlfgdHOuN0WS7e6ilMOkEfAlcWuOxBZvKXBXZsGTd2ju/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/AVvXsEhcb6Th9aSXYzEWlBLJ5v0iEJhfomEFe9P0Nznoi5EEs71ZgHt4Rh9RWl2apQdGNfme0oJtTziQDy2i95IhXnZYv6g9gGe2IRpxxoh0yMeKShw33QLnyqTCcMpD-9U22XMp6bgIyZ56cQKA/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