Streaming live at 10am (PST)

Dynamic Page Sharing on Whatsapp

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.

4 Likes

how can we add image too with text

Hey @Fazal_Sandhi . Please explain some more.

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

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

1 Like

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

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.

2 Likes

This is a good share. Thanks.

1 Like

thanks, that is perfect!

1 Like

But If Message have some emoji ,then how we can share this on whatsapp.

i have a div means message with emojies …i copy the div element content and store in a variable and letter pass that variable as message text ,butt it content emoji with message
we didnt able to send emojies

It is ok with content of website but i have image which i have to share as thumbnail for this article so how can i share this

Update to the Whatsapp share link.
Please note: I am using an icon from the Awesome Fonts service in a div inside the tag.

<a class="w-inline-block social-share-btn fb" href="whatsapp://send?text=" title="Share on Whatsapp" target="_blank" onclick="window.open('https://api.whatsapp.com/send?text=' + encodeURIComponent(document.URL) + '&t=' + encodeURIComponent(document.URL)); return false;">
<div><i class="fab fa-whatsapp"></i></div>
1 Like

but how to use it with your code and i want all data dyanamic like image text and video in every link how it can be possible help me plz

I have been trying to share text content of DIV on whatsapp. But, no success yet. I do not want to share the whole document. I just want to share a part of it. Please help!

Hi @Parag_Agarwal!

Here’s a solution I could adapt:

Paste this in Inside < head > tag of the page:

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

Paste this in Before < /body > tag

<script type="text/javascript">
(function clickMe() {
  const button = document.getElementById("button");
  var divblock = $('.divblock').text();
  button.addEventListener("click", event => {
    // Whatsapp Message on Button Click
    window.open("https://api.whatsapp.com/send?phone=9999999999999&text=Show div text: " + divblock)
  });
})();
</script>

You have to make sure:
• Your div class is the same as it is in here: var divblock = $(’.divblock’).text();
div

• Your button ID is the same as it is in here: const button = document.getElementById(“button”);
button

This is how the website looks like:
print1

And this is the result from Whatsapp API:

Hope it solves your problem!

Hi @vkoetz,
Wow! I wasn’t expecting a reply so soon. Thank you for helping me out. I will surely try your code. However, I just have one request. Can you please check the preview once again? The button is not throwing any output. I tried on desktop as well as on my mobile. Thanks once again!

1 Like

Dear @vkoetz,
It works like a charm. Thanks a ton! Really appreciate your help.

1 Like