Como colocar botão “Compartilhar no WhatsApp” para Blogs

Blogger, Plugins para WordPress, Redes sociais, WordPress
84
Siga o Ferramentas Blog: Canal no Youtube | Facebook | Twitter | Google+
Acesse AGORA: https://blogueiro.pro e se torne um Blogueiro de Elite.

A grande rede social do momento é o WhatsApp. A velocidade com que as informações se multiplicam por lá é mais eficiente que no Facebook ou Twitter, em muitos casos. Então vamos mostrar como adicionar um botão de compartilhar conteúdo do seu blog no WhatsApp quando o leitor do seu blog estiver em um celular.

✅ Canal no Youtube | Inscreva-se AGORA ✅

Hoje em dia, com o uso crescente dos aparelhos móveis (smartphones), seu blog precisa ser acessível para as telas menores. Seja com um layout responsivo ou com um layout próprio para celulares, seu blog tem que abrir de maneira amigável para esse público que navega mais no celular do que no computador.

As pessoas têm compartilhado muito conteúdo e informações pelo WhatsApp e você pode incentivar isso, adicionando um botão que envia o link de seu conteúdo para o WhatsApp e facilita o compartilhamento desse conteúdo pelo visitante.. Com toda certeza seu blog receberá mais visitas assim.

Já adicionei um dos modelos de botões que vou ensinar aqui. Se você abrir este artigo em seu celular, depois clicar no ícone do WhatsApp que aparece no início e no final do artigo, junto de outros botões de redes sociais, poderá ver como funciona exatamente. E a pessoa que recebe a mensagem, poderá ver o título do conteúdo e o link para clicar, como no exemplo da imagem abaixo.

Agora veja como adicionar esse botão em seu blog. Vou ensinar para Blogger e para WordPress.

Esse tutorial é uma adaptação do artigo Botón compartir en WhatsApp para Blogger (em espanhol), onde você pode ver mais detalhes para Blogger.

WhatsApp para WordPress

Aqueles que usam o WordPress.ORG terão mais facilidades para adicionar essa função, já que existem plugins que fazem o serviço por nós. Aqui vou indicar três muito bons, onde dois são gratuitos e um precisa comprar a extensão para funcionar com o WhatsApp.

Ao escolher um plugin para seu blog, recomendo que faça testes e backups de seu blog para evitar possíveis conflitos. Nem tudo funciona perfeitamente em qualquer layout, portanto, se puder verificar com o criador de seu layout como proceder nesses casos é recomendável.

WhatsApp para Blogger

Se você tem um blog no Blogger (BlogSpot) vou mostrar uma maneira de adicionar o botão de compartilhar no WhatsApp. O código precisa ser adicionado dentro do código fonte do seu Template para funcionar corretamente. Para isso entre no menu “Modelo” e depois clique no botão “Editar HTML”.

Agora procure pela seguinte expressão “post-footer” – que se refere ao rodapé de todos os seus artigos.

Se você não sabe como procurar códigos no Blogger, veja esse tutorial: Como encontrar e editar códigos de Templates no Blogger [Vídeo].

Então o que verá será algo assim, mas sem o que está marcado dentro do quadro vermelho:

Procure por uma linha bem parecida com o que está indicado pela seta. Depois cole o seguinte trecho de código imediatamente ABAIXO:

<a alt='Compartilhar no WhatsApp' data-action='share/whatsapp/share' expr:href='&quot;whatsapp://send?text=&quot; + data:post.title + &quot;-&quot; + data:post.url' title='Compartilhar no WhatsApp'>Compartilhar no WhatsApp</a>

Perceba que está marcado de vermelho “Compartilhar no WhatsApp”. Se você deixar assim, será exibido um texto no rodapé dos artigos, quando a pessoa acessar seu conteúdo pelo celular. Você pode trocar isso por outro texto ou mesmo por uma imagem. Como preferir.

IMPORTANTE: Você só verá o link de compartilhar no WhatsApp se acessar o blog pelo celular.

Ainda no menu “Modelo” clique no botão com ícone de roda dentada que aparece abaixo de “Celular”. Escolha o modelo para celular “Personalizado”, pois só assim o código vai funcionar.

Agora é só abrir o seu blog pelo navegador do celular e ver o resultado. Entre em algum artigo e role a página até o rodapé para ver onde foi adicionada a opção do WhatsApp.

Se o seu público gosta de ler o seu blog pelo celular, esta é sua chance de gerar mais visitas e incentivar as pessoas a compartilhar com os amigos por todas as opções de redes sociais.

.

84 Comentários

          • Marcos, no momento ele está no modelo “simples”, mas eu tinha testado no modelo personalizado também (e não apareceu nenhuma opção de compartilhar no Whatsapp – aliás, os botões do Sharethis nunca apareceram no celular também, já tentei acertar e nada…).

            Eu voltei posteriormente para o modelo “simples” pois no “personalizado” o fundo e as letras ficam escuras, tornando impossível a visualização…

            Responder

              • Cara, mas o código do MArcos funciona sim. Era o problema do meu modelo. Eu alterei o modelo e funcionou. Posteriormente, inclui um widget do Addthis para mobile e ficou bem interessante. Acesse o meu site pelo celular para dar uma checada, clique em algum post e arraste para o final: http://www.viagemlenta.com.

                Responder

    • Não precisa.
      Basta seguir como está mesmo no tutorial. A imagem é apenas para ilustrar o lugar onde deve ser colado o código.
      Lembrando que o número da linha não é o mesmo para todos os layouts. Então tem que procurar pelo lugar.

      Outro ponto importante é ter habilitado o layout para celular no formato “Personalizado”.

      O link para compartilhar no WhatsApp só aparece no celular. Não aparece no PC.

      Responder

  7. quem segue tutorial a risca prestando atenção e sem mudar nada não tem erro.

    o cara explica direitinho.

    Marcos eu queria colocar ao lado de “Compartilhar no WhatsApp” hospedar uma imagem do ícone do whats e colocar ao lado, tem como? passa dica ae

    vlws

    Responder

  8. Marcos, tenho grande dificuldade com net e com o meu blog mas você tem me ajudado muito! Sou eternamente Grata a tudo que me ensinou! Aqui dei mais um passo! Meu primeiro blog foi no Worpress mas não soube como dar continuidade; achei o blogspot mais fácil…rsrs
    Que o Universo te Ilumine sempre.
    Gení Mafra
    magiadailha.blogspot.com

    Responder

  9. Excelente artigo, o Ferramentas Blog, sempre trazendo grandes novidades para os seus leitores! O WhatsApp cresceu, e tem se tornado uma ótima referência, agora com essa possibilidade de adicionar o botão ” Compartilhar ” ficou ainda melhor, mais um recurso para os blogs, tirarem o maior proveito! Paz e sucessos a todos!

    Responder

  11. Ótima dica, não sabia da existência desse tipo de botão, vou testar no WordPress.org porem eu já usava um plugin para “compartilhar”, e ainda não decidi se vou troca-lo por outro =/

    Responder

  17. A idéia é boa, mas não funcionou aqui em meu blog, o plugin instala mas na pratica não funciona, o chrome leva um tempão carregando e não abre e no firefox ele mostra a mensagem que é necessário um programa para abrir a função.

    Responder

    • Jackson no seu deu certo sim, mas só aparece se acessar o seu site pelo Celular, ok!
      Logo abaixo d apostagem aparece o otão do Whatsapp é só clicar e compartilhar!
      Aparece uma prévia do assunto e o link pra ser compartilhado, tipo no Twitter..vlw
      Só no meu que ainda não consegui!

      Responder

  19. No meu aparece o link de compartilhar pelo WhatsApp, porém quando clico nele aparece uma tela em branco, sem nada escrito, apenas um sinal de erro.

    Responder

  22. Marcos, eu tenho como utilizar este recurso em um site meu em PHP que não seja Blooger, etc.? Eu quero que quando o usuário clique no botão Whatsapp (imagem e numero do meu telefone) ele abra o app do celular do cara e permita que ele troque mensagens (ou agora o novo recurso) ligar para mim, você sabe como? Obrigado!

    Responder

    • Eduardo, estou procurando exatamente o mesmo que voce, quando cliente estiver navegando na versao mobile do meu site, quero que quando ele clique no botao whatsapp de a opcao de ele trocar mensagens com o numero ou ligar pelo proprio app. ate agora nao achei nada. voce conseguiu alguma coisa ?

      Responder

  23. Oi Marcos também não consegui, segui exatamente tudo que falou e e não deu certo, já havia ativado a ferramenta para celular, não sei onde possa estar o erro, abraços

    Responder

  24. Olá amigo fiz tudo direito…mas quando vou visualizar o blog pelo celular não consigo ver o botão do WhatsaApp, VOCÊ PODE ME AJUDAR

    Responder

  25. Boa tarde, Marcos

    Antes de mudar o meu template para um template responsivo, esse codigo funcionou perfeitamente no meu outro template, que também era personalizado. Mas agora, com o template responsivo não consigo inserir esse código, primeiro que não tem a linha post-footer. Até encontrei a linha que corresponde ao rodapé, mas nada funciona e gostaria que meu blog pudesse compartilhar pelo whatsapp, agora que a visualização dele em qualquer tela está maravilhosa. Será que existe um código de compartilhamento para whatsapp para blogs responsivos?

    Responder

  26. Marcos Lemos: No meu ta funcionano como o se no seu site.
    Quando eu clico no ícone do WhatsApp abra uma página em branco carregando a o link da página a ser compartilhada e uma contagem regresiva nao sei de que, daí se eu não clicar em qulaquer canto da página pra contagem não sumir, a página se fecha automaticamente. Porém, não tem como compartilhar nada no Whats.
    A não ser que eu use o modo que conheço, copiar o link que quero compartilhar, abrir a página do Whats no Goggle Chrome ou Firefox e colar direto no grupo ou pro contato que desejar.
    Dá um pouco mais de trab. mas funciona 100%. (Só acho que o WhatApp deveria ter uma função compatilhar com todos, daí selecionaríamos todos os nossos contatos e compartilharíamos a mensagem sem ter que ficar selecionando um a um).

    Enfim Marcos, me ajude a resolver este pequeno proleminha, obg!

    Responder

  27. Agora tem um plugin também para quem usa o jetpack, que acrescenta o ícone do whatsapp aos botões de compartilhamento para quem deseja usar! 😉 🙂 Achei super útil! E como comecei a usar o jetpack graças as suas dicas, resolvi compartilhar com vocês, caso ainda não tivessem conhecimento ( que não sei se é o caso)!
    Link do plugin: https://wordpress.org/plugins/whatsapp-jetpack-button/
    Abraço…

    Responder

    • Aline, eu também estou usando o Jetpack… Acho muito bom! Como vc esta fazendo para usar com o Whatsapp? N quero instalar outro plugins…Gostei da sua dica,mas n tenho ideia de como fazer. Pode me ajudar?Bjs…

      Responder

  30. menino, vim te dizer que deu super certo no meu blog, personalizei e ficou lindo!
    meu layout não é responsivo, mas uso um plugin para mobile e mesmo assim deu super certo nos dois, ficou perfeito no mobile tbm. abçsss 🙂

    Responder

      • Não é plugin, seu template tem que está habilitado pra smartphones, tablets, etc..
        Por isto troquei meu templates, pq não consegui uma template legal.
        Se for do Blogger, no próprio , já existe uns temps bem bacana e abre em celulares de boa…o problema. é que qndo abre no formato de celular, o blog oculta muita coisa…daí vc pode colocar pra versão para web ou versão para celular novamente, mas como eu já disse, seu temp tem que esta habilitado pra isto.
        NOrmalmente no final da página da pra mudar isto.
        Espero ter ajudado, bjundas…xau

        Responder

  32. Amigo primeiro quero parabenizar pela postagem muito esclarecedora. Fiz em blog e deu certo, porém, só não consigo mudar o nome “Compartilhar no WhatsApp”, para uma imagem, ou seja eu queria deixar aparecendo a logomarca do WhatsApp no local de compartilhe, Como faço amigo?????

    Responder

  39. Olá Marcos, fiz tudo como você diz acima. Porém, abri pelo celular e não aparece o link de compartilhar com o whatsapp. E quando eu fiz o procedimento no Blogger, aparece agora a mensagem de aviso: “É possível que a edição do modelo combinando HTTP e HTTPS afete a segurança e a experiência do usuário no seu blog quando ele é visto usando HTTPS. Saiba mais. Ocultar aviso”. E quando eu vou lá “Editra HTML” não encontro mais a linha de comando de outrora e nem muito menos a linha que inseri. ????

    Responder

  40. Oi Marcos, encontrei a linha de comando vendo o seu tutorial mais acima. Até aqui blz. Mas, e esse aviso? E porque não aparece no meu celular a opção de “compartilhar com o whatsapp”? Preciso testar em um celular melhor pra ver?

    Responder

  41. Olá, Marcos. Primeiramente, muito obrigada por compatilhar dicas tão uteis.

    Fiz tudo como vc explica; nos meu caso uso o blogger. Já testei no meu cel Android e funcionou super bem. Meu probelma é quando testo no Iphone.. quando clico sobre “compartilhar no Whatspp” lá no meu blog no Safari, ele ate abre o WhatsApp e me permite escolher uma pessoa, mas abre a conversa e não leva o link a ser compartilhado. Sabe se pode estar faltado algum “pulo do gato”…ou talvez seja um problema do Safari…

    Obrigada
    Natália

    Responder

  43. Marcos Lemos boa tarde, meu amigo faça um tutorial de como colocar uma caixa de Newsletter do whatsapp no blogspot, pois hoje muitos blogs, e sites de noticias estão colocando esse gadget, assim o leitor assina colocando seu numero de whatsapp e recebe as noticias. Se você ja tiver esse post, por favor me avise, ou me mande por email o link para pegar este gadget, desde ja agradeço.

    Responder

  44. Boa noite. Como eu posso fazer isso no wix ? Estou aperriado aqui. Se vc ou alguém aqui puder me ajudar eu agradeço. Obg.

    Responder

  46. Pingback: 5 dicas para criar um post perfeito e atrair visitas ao seu site

Deixe um comentário

Ao comentar você concorda com nossa Política de Comentários.