Creating Social Media Share Buttons

4 min readAug 5, 2023

In this tutorial, we will make buttons capable of sharing a content on social media platforms such as Facebook and Twitter, including instant messaging native apps like Whatsapp and Viber.

Prerequisite

The tutorial assumes that you have basic knowledge of HTML and Javascript.

Let’s code

To get started, we will create an HTML5 file with contents as in the snippet below:

<!DOCTYPE html>
<html>
<head>
    <title>Social Media Share Buttons</title>
</head>
<body>
    <button onclick="shareOnFacebook()">Share on Facebook</button>
    <button onclick="shareOnTwitter()">Share on Twitter</button>
    <button onclick="shareOnWhatsApp()">Share on WhatsApp</button>
    <button onclick="shareOnViber()">Share on Viber</button>
</body>
</html>

We have now created four buttons and specified click event handlers on each of them, however these functions are yet to exist. In order to create them, we need to write some Javascript and we will do so inside of our HTML file right beneath the closing </body> tag:

<script>
    const link = "https://medium.com/@olurebidavid";
    const text = "Check out this web share tutorial";
    function shareOnFacebook() {
        const facebookIntentURL = "https://www.facebook.com/sharer/sharer.php"…

Creating Social Media Share Buttons

Prerequisite

Let’s code

Written by David Olurebi