Social Media Sharing in HTML

A 0 to infinity lesson on adding WhatsApp, Facebook, X, LinkedIn, Telegram, email, copy-link, and native mobile sharing options to a web page.

1. What is social sharing?

Social sharing means giving visitors buttons so that they can share your page on platforms like WhatsApp, Facebook, X, LinkedIn, Telegram, or email.

A share button is usually just an HTML link with a special URL. When the user clicks the link, the selected platform opens with your page link already filled in.

Example

<a href="https://wa.me/?text=Read this lesson: https://example.com">
  Share on WhatsApp
</a>

The link above opens WhatsApp and sends the text: Read this lesson: https://example.com

2. The simplest sharing link

Let us first create a normal link that shares the current page URL. 

<a href="https://wa.me/?text=https://example.com">
  Share this page
</a>

Demo

Notice the use of target="_blank". It opens the sharing page in a new tab.

3. Share links for different platforms

Each platform has its own sharing URL format.

Platform Sharing URL Format
WhatsApp https://wa.me/?text=YOUR_TEXT
Facebook https://www.facebook.com/sharer/sharer.php?u=YOUR_URL
X / Twitter https://twitter.com/intent/tweet?text=YOUR_TEXT&url=YOUR_URL
LinkedIn https://www.linkedin.com/sharing/share-offsite/?url=YOUR_URL
Telegram https://t.me/share/url?url=YOUR_URL&text=YOUR_TEXT
Email mailto:?subject=SUBJECT&body=BODY_TEXT

Example with buttons

<a class="share-btn whatsapp"
   href="https://wa.me/?text=Read this lesson https://example.com"
   target="_blank">
  WhatsApp
</a>

<a class="share-btn facebook"
   href="https://www.facebook.com/sharer/sharer.php?u=https://example.com"
   target="_blank">
  Facebook
</a>

Live Demo Buttons

4. Making sharing links dynamic with JavaScript

Instead of writing the URL again and again, JavaScript can read the current page URL automatically. 

const pageUrl = encodeURIComponent(window.location.href);
const pageTitle = encodeURIComponent(document.title);

document.getElementById("whatsappShare").href =
  `https://wa.me/?text=${pageTitle}%20${pageUrl}`;
encodeURIComponent() safely converts spaces and special characters so that the URL works correctly.

Dynamic sharing demo

5. Native mobile sharing with Web Share API

The Web Share API allows the browser or mobile phone to open the device's own share menu. 

async function nativeShare() {
  if (navigator.share) {
    await navigator.share({
      title: document.title,
      text: "Read this lesson",
      url: window.location.href
    });
  } else {
    alert("Web Share API is not supported in this browser.");
  }
}

Native Share Demo

On mobile phones, native sharing feels very natural because it opens the phone's own sharing menu.

6. Very important: Open Graph tags

Sharing buttons only send the link. But the preview image, title, and description are controlled by metadata in the <head> section. 

<meta property="og:title" content="Social Media Sharing in HTML" />

<meta property="og:description"
      content="Learn how to add social sharing buttons to HTML pages." />

<meta property="og:type" content="article" />

<meta property="og:url"
      content="https://example.com/social-sharing-lesson.html" />

<meta property="og:image"
      content="https://example.com/social-sharing-og-image.jpg" />

Why Open Graph is needed

Without Open Graph

Social media may show a poor preview, wrong image, or missing title.

With Open Graph

Social media can show a proper title, description, and image.

Best image size

A common Open Graph image size is 1200 × 630 pixels.

7. Full mini project: Share this article

Here is a complete article card with all sharing options.

Learn HTML Social Sharing

This article teaches how to add social sharing buttons to a web page using HTML and JavaScript.

Code used in the mini project

function setupShareButtons(prefix) {
  const pageUrl = encodeURIComponent(window.location.href);
  const pageTitle = encodeURIComponent(document.title);
  const message = encodeURIComponent("Read this lesson:");

  document.getElementById(prefix + "Whatsapp").href =
    `https://wa.me/?text=${message}%20${pageTitle}%20${pageUrl}`;

  document.getElementById(prefix + "Facebook").href =
    `https://www.facebook.com/sharer/sharer.php?u=${pageUrl}`;

  document.getElementById(prefix + "X").href =
    `https://twitter.com/intent/tweet?text=${pageTitle}&url=${pageUrl}`;

  document.getElementById(prefix + "LinkedIn").href =
    `https://www.linkedin.com/sharing/share-offsite/?url=${pageUrl}`;

  document.getElementById(prefix + "Telegram").href =
    `https://t.me/share/url?url=${pageUrl}&text=${pageTitle}`;

  document.getElementById(prefix + "Email").href =
    `mailto:?subject=${pageTitle}&body=${message}%20${pageUrl}`;
}

8. Important security and quality points

Use encoded URLs

Use encodeURIComponent() when building share links with JavaScript.

Use real URLs

Social platforms need public URLs. Local files like file:///C:/page.html will not share properly.

Add Open Graph tags

These tags control the title, description, and image shown in social previews.

Test on mobile

WhatsApp and native sharing are especially important on mobile phones.

9. Practice tasks

  1. Create a page with only a WhatsApp share button.
  2. Add Facebook and LinkedIn share buttons.
  3. Add a copy-link button.
  4. Add Open Graph title, description, URL, and image.
  5. Create a blog card with share buttons under it.
  6. Use JavaScript to generate all share links automatically.
  7. Add a native share button using the Web Share API.
Challenge: Create a reusable function called createShareLinks(title, url) that returns all sharing URLs.

10. Embedded HTML editor

Use the editor below to practise making your own social media sharing page.