• Kushal Jayswal is a frontend developer from India. His expertise includes HTML5, CSS3, Sass, LESS, Responsive Web Design, JavaScript, jQuery, Twitter Bootstrap, Material Design, AngularJS, NodeJS, WordPress and Liferay Theming. He has founded TeckStack.com in 2011 to share his frontend knowledge with the community. His core interests focus on frontend, blogging, UI, UX and many others. He loves to talk on trending frontend technologies and successful blogging.

WhatsApp Share - New Way to Social Engagement

WhatsApp Share Button

I am not a big fan of WhatsApp. But while I came to know that WhatsApp has crossed 700 million users. And is is the most popular application, I changed my mind and in curiosity. I started searching on it. And what I find was all wonderful. It's all wonderful but as a developer, we should think on the other side too and today we will discuss on it.

See Demo or Fork on Github.

A Small Story

Social sharing is a key to success for any blog and I noticed, almost all blogs with social sharing buttons. Facebook & Twitter are the most preferred options, comparing to others like Google+, Pinterest, LinkedIn, etc. But yet I couldn't see even a single blog having WhatsApp sharing button.

Further mobile and tablet users are increasing day-by-day and lets keep in mind, the demand for responsive web design (more than native apps), adding one more button - WhatsApp Share - to your collection of social sharing widget wouldn't be that difficult! Agree? Moreover this article pushed me even more to this direction.

The Mindset

From above story, requirement seems pretty simple to add a social share button which shares your article's link directly to WhatsApp application. If you write, read or develop blogs then getting this need is not new. This will be similar to what you do while integrate Facebook or Twitter share button for a blog.

Another need is to show this button only for portable devices (i.e.: iPhone, Android, Tablet, etc.). We need to manipulate through jQuery. And I have written plugin code with some configurable options.

Here is a site provides code snippet to integrate WhatsApp sharing button which will be visible in devices. They have been written pure JavaScript code and as jQuery has larger community, I will follow jQuery. Lets start coding...

Initial Code

(function ($) { 
    $('.wa_btn').on("click", function(e) {
        if(devices) ) {
            //do something
        }else{
            alert("This button will work only in mobile device.");
        }
    });
}( jQuery ));

As you can see in above code, we have two blocks - IF and ELSE. We are trying to integrate WhatsApp share button for portable devices only. And in the ELSE block we try to throw alert to user possibly. All will be happened on click of element having class - .wa_btn. But as discussed, I have taken approach for a plugin. So forget about static class and follow below code now.

Full Plugin Code Fork on Github

(function ( $ ) {
     $.fn.wsBtn = function(options) {

        // Configuration
        var settings = $.extend({
            // These are the defaults.
            message         : "This button fires only in devices.",
            bgColor         : "#090",
            container       : ".post",
            target          : "h2"
        }, options );
        
        this.each(function(){
            // Variables
            var el          = $(this);
            var box         = el.find(settings.container);
            var targetTo    = box.find(settings.target);
            var aTag        = targetTo.find('a');
            var devices     = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
            
            if(aTag && devices){
                // appending WhatsApp Sharing button to container
                box.append("");
            }
            /*else{
                boxes.on("click",".wa_btn", function() {
                    alert(settings.message);    
                });
            }*/
            box.on('click','.wa_btn',function(){
                var url     = $(this).parent(box).find(aTag).attr('href');
                var txt     = $(this).parent(box).find(targetTo).text();
                var wmsg    = encodeURIComponent(txt)+" - "+encodeURIComponent(url);
                var wurl    = 'whatsapp://send?text='+wmsg;
                
                $(this).attr('href',wurl);
                $(this).attr('data-href',url);
                $(this).attr('data-text',txt);
                
            });
            
        });
    };
 
}( jQuery ));

We are done with the script now. If you are familiar with Skype URIs then var wurl = "whatsapp://send?text="+wmsg; won't hesitate you. But let me know in comment if you are not getting anything or have better idea.

Sample HTML

<div class="posts">
    <div class="post">
        <h2><a href="http://teckstack.com/how-to-configure-sass-for-html-projects">How to Configure SASS for HTML Projects</a></h2>

        <p>SASS is booming the world with giving super powers to CSS and if you don’t know about it, you must gain your knowledge as a front end developer. The configuration for SASS is so simple but I observed that people avoids it or leave it to core developers. As I opine, when we can do more in less time, we should definitely go for it!</p>

    </div>
</div>

As you can notice in above code, there is nothing for WhatsApp button as that will be appended dynamically.

See Demo or Fork on Github.

Conclusion

If you are a blogger, you should integrate WhatsApp share button. This would give you extra traffic which will be converted revenue for you. Also this will be displayed for portable devices for now, so if you want to suggest your blog to any friend through WhatsApp, you don't need to go to browser address bar to do so. Just share on a single click.

 

Please add comments to show your reaction to this post.

Image Artist: Kinjal Jayswal (Mehta)
  • kurian

    hi,
    is it possible to share image on whatsapp in this fashion?

    • Yes. It is.

      • webloop

        Hi,
        Can you show us
        How to Share image on whatsapp from html page

        • Hello @webloop,

          Yes it's possible. I've considered yours and @kurian's request and update you guys once update the code on this.

          Thanks.