Streaming live at 10am (PST)

Dynamic Page Sharing on Whatsapp


#1

Following @sabanna 's article on dynamic social media share buttons, I looked around for a way to add dynamic page sharing on WhatsApp. Hope this article will be of help to someone.

1. CREATE AND STYLE THE SHARE BUTTON

Drag a div, link or button from elements tab in the designer, place it on the page(s) you want to share and give it a class e.g. whatsapp

2. ADD CUSTOM CODE SNIPPET TO HEAD AREA

First, we need to include a specific version of jQuery here. It does not seem to be working with the one included in Webflow. Add this to the head area of the custom code tab in the dashboard.

i.e. Paste this in Site Settings > Custom Code > Head Code

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>

Next, add the following script. Make sure the class .whatsapp referenced below is substituted for the class you used to name your button

<script>
  $(document).ready(function() {
     $('.whatsapp').on("click", function(e) {
        if(/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
            var article = $(this).attr("data-text");
            var weburl = $(this).attr("data-link");
            var whats_app_message = encodeURIComponent(document.URL);
            var whatsapp_url = "whatsapp://send?text="+whats_app_message;
            window.location.href= whatsapp_url;
        }else{
             alert('You Are Not On A Mobile Device. Please Use This Button To Share On Mobile');
        }
     });
  });
</script>

That's it. Basically, what we are telling the browser here is to listen for a click on the whatsapp button and if on a mobile device, then it will share the page URL which WhatsApp in turn parses in to a readable link complete with page title, description and image if provided in page settings in the designer.

A good practice would be to hide this button on desktop and show it on tablet and mobile. I hope you find this helpful.

Happy sharing.


#2

how can we add image too with text


#3

Hey @Fazal_Sandhi . Please explain some more.


#4

im using this code to share blogs all meta properti are working fine on facebook share
but when i share blog on whatsapp it does not show image preview
look here is the example:

http://www.firesafeasia.com/index.php?option=blogdetail&id=30


#5

Kindly read this https://stackoverflow.com/q/19778620/584192


#6

i have alredy visited this page but didnt work:pensive:


#7

UPDATE:

There are some reports that this method does not work consitently with higher versions of Android and IOS. We can format the link using the initial method by @sabanna but direct the share to whatsapp this way;

<a href="whatsapp://send?text=" title="Share On Whatsapp" onclick="window.open('whatsapp://send?text=%20Take%20a%20look%20at%20this%20awesome%20page%20-%20' + encodeURIComponent(document.URL)); return false;"></a>

This will take care of pulling all dynamic titles and meta content, including the page's meta image if set in the designer.


#8

This is a good share. Thanks.


#9

thanks, that is perfect!