Insert Whatsapp Share Button into HTML pages

Asked

Viewed 29,561 times

8

How to insert a Share Button into Whatsapp in HTML projects?

  • 9

    Welcome to [en.so]. Could you explain your question better? What should this command do? What have you done so far? Enjoy and check out the guide [Ask].

  • Use this site. It generates for you. http://whatsapp-sharing.com/

  • 3

    @Gisele, if it is an APP, are you developed 100% in HTML? Do you use Phonegap? Which framework are you using? Put the technologies and languages (framework) you use and some codes you already have in the project and we can help better.

1 answer

6

You can use the URL schema whatsapp://send?text= in the attribute href of a hyperlink followed by the message that will be shared. For example:

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

If the user has the application installed, it will be initialized allowing to choose a contact next to a text field that allows to edit the message before sending.

As it is not yet possible to access Whatsapp by browser in the same way as it is done on mobile devices - no desktop this URL scheme is unknown - maybe it is interesting to hide this link and display it only on smaller screens:

/**
 * 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;
  }
}

Some links in the application FAQ that cites the use of this custom url scheme:

  • Hi, this type of link that opens an external application has some specific name? Where can I find more information about?

  • Is called Custom URI scheme

Browser other questions tagged

You are not signed in. Login or sign up in order to post.