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://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!
20 comentários
Ótimo tutorial! Vou salvá-lo para incorporar em meu novo layout!
ResponderExcluirwww.cerejablack.com
Pois eh colega, eu amei, ja estava buscando isso a tempos... e enfim conseguir colocar aqui no meu layout tbm <3
ExcluirBjus Gessy
Tutorial super útil, adorei!
ResponderExcluirJá vou salvar aqui nos meu favoritos pra colocar no meu blog depois.
Menina Vanilla
Que bom que gostou Tali <3
ExcluirBjus amoura!
Obrigada linda!
ResponderExcluirQuerida não estou conseguindo aplicar :(
ResponderExcluirCopio e colo o código mas não altera nada.
Consegui fazer direitinho! Simples e prático! Adoreeeeei!
ResponderExcluirVocê é 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
ResponderExcluirAriana, 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♥ ♥♥
ExcluirMuitooooooo obrigada, seus posts estão me ajudando dmsssss <3
ResponderExcluirLegal! Parabéns pelo tutorial...gostei, mas ja tinha colocado outro codigo no meu blog
ResponderExcluirNão sei o que aconteceu, mas no meu blog, o código não foi encontrado :(
ResponderExcluirFaz um post de como usar esses botões que você usa
ResponderExcluirDiva no meu Blog o código não foi encontrado, que faço? o.O kkkk
ResponderExcluirOlá Renata vc é um anjo para nós blogueiras iniciantes vou tentar colocar estou a tempo estava procurando isso,bjs
ResponderExcluirExcelente tutorial, parabéns pelo trabalho!
ResponderExcluirOi 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?
ResponderExcluirMano do ceu vc me ajudou mto, mto msm mto PBG
ResponderExcluirMuito obrigado, deu certo.
ResponderExcluirMande seu comentário, criticas, elogios ou sugestões.
Responderei o mais rápido possível.
Um forte abraço.