8

Como inserir um Botão compartilhar no Whatsapp em projetos HTML?

3
  • 9
    Bem vinda ao Stack Overflow em Português. Poderia explicar melhor a sua dúvida? O que esse comando deve fazer? O que você já tem feito até agora? Aproveite e confira o guia Como perguntar.
    – Math
    22/06/2015 às 14:54
  • Usa esse site. Ele gera para você. whatsapp-sharing.com 22/06/2015 às 14:55
  • 3
    @Gisele, se sera um APP, você o esta desenvolvido 100% em HTML? Utiliza Phonegap? Qual framework esta utilizando? Coloque as tecnologias e linguagens (framework) que utiliza e alguns códigos que você ja tenha no projeto e poderemos ajudar melhor. 22/06/2015 às 15:28

1 Resposta 1

6

Você pode utilizar o esquema de URL whatsapp://send?text= no atributo href de um hyperlink seguido da mensagem que será compartilhada. Por exemplo:

<a href='whatsapp://send?text=StackOverflow'>compartilhar</a>

Se o usuário tiver o aplicativo instalado, ele será inicializado permitindo que seja escolhido um contato junto a um campo de texto que permite editar a mensagem antes do envio.

Como ainda não é possível acessar o Whatsapp pelo navegador da mesma forma como é feita em dispositivos móveis — no desktop esse esquema de URL é desconhecido — talvez seja interessante esconder esse link e exibi-lo somente em telas menores:

/**
 * Tamanho somente para ilustrar! Tenha em mente que
 * a instalação do aplicativo não é restrita a smartphones.
 */
@media screen and (min-width: 860px){
  .compartilhar-whatsapp {
    display: none;
  }
}

Alguns links nas perguntas frequentes do aplicativo que cita o uso desse esquema de url customizado:

2
  • Oi, este tipo de link que abre um aplicativo externo tem algum nome específico? Onde posso encontrar mais informações sobre?
    – mrlucasrib
    10/08/2015 às 1:18
  • Se chama Custom URI scheme
    – Tony
    31/08/2019 às 20:35

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .