Native sharing from mobile web

Native sharing from mobile web

Sharing it extremely important to increase the virility of your content, and mobile is no exception. However in order to convince your users to share, it is important to make the task as easy as possible.

We want our users to share our content with their friends on all possible channels; social media, email, and on the mobile using  native apps such as WhatsApp. As you understand the main difference from Desktop Apps is the ability and need to enable sharing with Native Apps, so we will focus in the post on this channel.

So how do we share our content using native apps? the trick is to use links with specific URI scheme. Remember mailto URI scheme used also on the desktop for composing emails directly from web content, the exact same method is used to invoke native apps from mobile web.

Let’s remember how the mailto scheme is working (from Wikipedia):

Using “mailto” within a HTML document to generate a link for sending email:

<a href="mailto:someone@example.com">Send email</a>

It is also possible to specify initial values for headers (e.g. subject, cc, etc.) and message body in the URL. Blanks, carriage returns, and linefeeds cannot be embedded but must be percent-encoded.

<a href="mailto:someone@example.com?subject=This%20is%20the%20subject&cc=someone_else@example.com&body=This%20is%20the%20body">Send email</a>

 

Multiple addresses can also be specified:[5]

<a href="mailto:someone@example.com,someoneelse@example.com">Send email</a>

 

The address can also be omitted:

<a href="mailto:?to=&subject=mailto%20with%20examples&body=http://en.wikipedia.org/wiki/Mailto">Share this knowledge...</a>

 

 

Now let’s say we would like to implement a similar share option for WhatsApp, how can we do that? On the mobile, similar to the deskstop, apps can register proprietary schemes to enable the app invocation directly from web pages, however the exact scheme name and parameters depends solely on the app itself, and of course the app must be installed on the end user device.  Recently WhatsApp added the option to send messages directly from web pages using whatsapp URI scheme, so far our tests showed that this is functioning only on iOS devices (June 14 2014), probably Android support will come soon.

Now to the code, which is very simple but effective:

<a href="whatsapp://send?text=Zuznow%2C+http%3A%2F%2Fwww.zuznow.com">Share with WhatsApp</a>

 

Of course this is a static share button, if we want to make it dynamic and share the current page, we can add some script to accomplish the task

<a href="javascript:window.location='whatsapp://send?text='+encodeURIComponent(location.href);">Share with WhatsApp</a>

 

How can I implement native sharing using Zuznow:

  1. In the post responsive tab, add the native share button in the desired location. It is better to add it hidden so we could show it later only on supported platforms. For example:
    <a class="whatsapp_share" href="javascript:window.location='whatsapp://send?text='+encodeURIComponent(location.href);">Share with WhatsApp</a>
  2. In the Body tab add code to selectively enable the share buttons, in this case only oniOS
    <script>
    if (navigator.userAgent.match(/(iPad|iPhone|iPod)/g)){
        MOB_jQuery('.whatsapp_share').show();
    }
    </script>
Conclusion:

Native sharing will dramatically increase the virality of your content on mobile, and it is easy to implement.

If you have question or more to add to the topic, please share it with us.

Tags: