Como inserir um botão de Compartilhar com ícone do Whatsapp?
04:05Como 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/AVvXsEhMo0SZA37HzgqSkXyc0tyYJZnfWjNeaPBToadtjRWkrCLEk8NCevxsJ5Ei-NRXs4QapUM68yPZXu0UvfdXB4iP9cnzlj5Sb6aNouij7wJ8ms0mxqUiWUhK9BytW0BooEQuWpvxCSD92l7l/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/AVvXsEicUTmQ9Zsu-3I6VJsZI9cMmQrc9Jhq73RL0rcpm066QrUO8lALSJxiiffkuZmadPufJyPkHNhrRSTvY-CSA7k_1i57Dnv3y6M5_qjiYvGyqg5iohnzGTKoNcfHUZo9_VfgEvMWvWV0qNOb/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/AVvXsEhPFwKOcakQcIGxHEpb3dkVXo1lYOpyV4P8mzAAnCRyCXT5zrpb6f-wqtAdsqLaY7CjBAQ_uxqeVSCRHu5JefOsyMLtAKalrklHFYHWh-a01wl3OrDvWGXLVF3gJ1H-QUfZW8rgZs54xRer/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/AVvXsEj0sI5t_vR9BpU0Dm6pXtXGC-cawFSO9JerjDZNNOMRW-cOOvStG-4pNeYsHNEVVamaNcPcZtinhJFdxI2djD7DeKlgVWbmppy4EyhkgNtuiZPimWlRdzneL9AfBak0SZ7fTHxGNXku8xlC/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/AVvXsEgNicQSRmVRmxjXFJcuvt5YGS3gYbFMAiBvyvESltgciHyaoKr9SUzSyPq5Eno9TdBYiWYX7WfOtcfupmmneFh4YXMaWNYYcFKkb4-Zn8lcoYe6rsuTuxcpvktE0dNQYyjSc5MENI72S-hE/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!
18 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
Que bom que gostou Tali <3
ResponderExcluirBjus 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
ResponderExcluir