When sharing content on mobile people want to share with their peers over their favourite messaging app. These days that’s Whatsapp and Messenger.

I’ll show you how to create links to Whatsapp and Messenger from your website and how to hide them on desktop where the apps aren’t available.

Both Android and iOS support deep links; the ability to have an app handle a URL request. Apps register themselves as protocol handlers for some protocol (aka. URL scheme), say myproto. Future URL requests for that protocol will get redirected to the app – yes, including the browser. So if you were to visit myproto://helloworld in a mobile browser on a phone where our hypothetical app is installed, the app would handle the request instead of the browser.

Facebook Messenger and Whatsapp each register protocol handlers for fb-messenger and whatsapp respectively.

NOTE: Remember that even though they have a protocol other than http, these are URLs. They need to be encoded properly.

Whatsapp

Whatsapp uses the endpoint send. The body of the message is sent in the text parameter. It additionally needs the data-action attribute set in the a tag.

<a href="whatsapp://send?text=Check out https%3A%2F%2Frocksthinkpoorly.com" data-action="share/whatsapp/share">Whatsapp</a>

Messenger

Messenger uses the endpoint share. It takes two parameters:

  • link: The url to share (ie. your webpage).
  • app_id: A Facebook application ID. You can get one by registering your app (or website)1 at Facebook for Developers.

Example:

<a href="fb-messenger://share/?link=https%3A%2F%2Frocksthinkpoorly.com&app_id=12345">Messenger</a>

Using the custom protocol for mobile works fine. However, users likely don’t have or don’t want Messenger or Whatsapp installed on their desktops. I am also not sure if the desktop apps register themselves properly as protocol handlers. With that said, we need to hide them when a user is on desktop.

We can use the following CSS to accomplish this. See my post on hiding DOM elements by platform for details and a more robust implementation.

@media screen and (min-width: 601px) {
  .mobile-only {
    display: none !important;
  }
}

This assumes that the maximum screen width for a mobile device is 600 pixels.

Now you can add mobile-only to any element to have it only appear on mobile!

Putting It Together

The final links look like this:

<a class="mobile-only" href="whatsapp://send?text=Check out https%3A%2F%2Frocksthinkpoorly.com" data-action="share/whatsapp/share">Whatsapp</a>

<a class="mobile-only" href="fb-messenger://share/?link=https%3A%2F%2Frocksthinkpoorly.com&app_id=12345">Messenger</a>

Make sure to replace the payloads with the text you want to send and to encode the URLs properly.

Happy sharing!

  1. Facebook seems to call everything an “app” in their documentation. Substitute “app” with “website” in your mind while reading the docs if you only have a website. ↩