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='"http://www.facebook.com/share.php?u=" + 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='"http://twitter.com/share?url=" + 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='"https://plus.google.com/share?url=" + 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='"whatsapp://send?text=" + 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 (
Um forte abraço a todos vcs e até o próximo post se Deus quiser!