How to add whatsapp share button on a website ?

Situatie

WhatsApp is the most popular messaging app. This article describes how you can add WhatsApp share button in your website. Note: This will work only when website is open in mobile with WhatsApp installed.

Solutie

Pasi de urmat

Design a simple webpage with a hyperlink on it. Sharing will be done when user click on this link.

<!DOCTYPE html>

<html>

<head>

content=”text/html;charset=utf-8″ />

<title>

How to add WhatsApp share

button on website?

</title>

</head>

<body>

<h3>Whatsapp sharing</h3>

<a>Share to whatsapp</a>

</body>

</html>

This will not work on desktop\laptop so let’s add CSS to hide it on large screens. To do so CSS @media query is used.

<style type="text/css">
    @media screen and (min-width: 500px) {
        a {
            display: none
        }
    }
</style>

Save this file and open in mobile phone:

Tip solutie

Permanent

Follow Us