Share Article/Link To Social Media Using Pure JavaScript

You don't need to download any packages, instead, you can create your function for sharing a link to social media. In this post, we will focus on the 3 of the most popular social media. Facebook, Twitter, and Facebook.

First, we have to identify or need to know the link to be used for sharing:

1. Facebook

   https://www.facebook.com/sharer/sharer.php?u={url}

2. Twitter

   https://twitter.com/intent/tweet?text={url}

3. LinkedIn

   https://www.linkedin.com/sharing/share-offsite/?url={url}

Now that we identified the share link for this social media, we then create a function something like this:

function share(social) {
    let url = "https://brojenuel.com";
    if (social == "facebook") {
        const navUrl = "https://www.facebook.com/sharer/sharer.php?u=" + url;
        window.open(navUrl, "_blank");
        return;
    }

    if (social == "twitter") {
        const navUrl = "https://twitter.com/intent/tweet?text=" + url;
        window.open(navUrl, "_blank");
        return;
    }

    if (social == "linkedin") {
        const navUrl = "https://www.linkedin.com/sharing/share-offsite/?url=" + url;
        window.open(navUrl, "_blank");
        return;
    }

    if (social == "copy") {
        navigator.clipboard.writeText(url).then(() => {
            alert("Link Copied.");
        });
        return;
    }

    alert("social name does not exist.");
}

The code above accepts a string argument called social. And we can pass facebook, twitter, or linkedin. This is a simple function, and you can modify it any way you like. The return is used to avoid running the code once the social media is found. So it will open a new tab, showing the share page of the social media selected. the url variable is the URL we are going to share. If social media is found it will run the alert() method. (NOTE: the link you are sharing should have the basic SEO meta tags, especially the OG meta tags. Search it in google if you are not sure what are those.)

Then you can create a button for each social media something like this:

<button onclick="share('facebook')">Facebook Share</button>
<button onclick="share('twitter')">Twitter Share</button>
<button onclick="share('linkedin')">LinkedIN Share</button>
<button onclick="share('copy')">Copy Link</button>

Also created a CodePen for this example Check it Here: https://codepen.io/misterjenuel/pen/WNgygoB

If you like you can create your own simple package, you just have to share every social media share link and you can just create those function methods by yourself.

That's it! short read. Hope it helps! Bookmark my website for more post. Later 👋😎👍