Share web page like a native app

Adding a share button on the website is easy. You can use free tools, plugins like AddThis, ShareThis, and more. But, free means extra cost. How?

Share Buttons

Whenever your visitor browses your website, the web page is download on a browser with all these supported files of AddThis (or similar plugin) like


<!-- Go to www.addthis.com/dashboard to customize your tools -->  <script type="text/javascript" src="//s7.addthis.com/js/300/addthis_widget.js#pubid=example"></script>

This causes extra load time of the web page. These plugins seem okay when your visitor comes from desktop. But, on mobile these take space and native sharing is already in the android, ios browsers. So, no need to use plugins like AddThis and ShareThis if your visitors come only from mobile.

Share buttons on Mobile (to open native apps)

Here i am going to tell you how you can use both

HTML


<div id='fornative' style="display:none">
<a href='#' onClick="return shareme()" class="btn btn-primary">Share</a>
</div>
             
<!-- Go to www.addthis.com/dashboard to customize your tools -->
<div id='foraddthis' class="addthis_inline_share_toolbox" data-title="title" data-description="description" ></div>

I am using two div block in my webpage, 1st is for the native share button and 2nd for AddThis sharing buttons. You can see that 1st div name ‘fornative’ is hidden by default.

SCRIPT


if(navigator.share) 
{
    $('#fornative').show();
    $('#foraddthis').hide();    
} else {
    $('#fornative').hide();
    $('#foraddthis').show();
    var script = document.createElement("script");
        script.type = "text/javascript";
        script.src = "//s7.addthis.com/js/300/addthis_widget.js#pubid=example";
        document.getElementsByTagName("head")[0].appendChild(script);
}

Herewith the help of Web Share API, check native share is supported by the browser, if supported then our native share button will be visible, if not only then dynamically script required for sharing buttons is downloaded.

With the help of below code i can share the content on native apps


const shareData = {
            title: 'Title',
            text: 'description',
            url: 'url to share',
        }

function shareme()
{
    if (navigator.share) {
                navigator.share(shareData);    
        } 
    return false;
}

If you like this, you can leave comment and suggestion about sharing buttons