Social Share

Place the code in an HTML widget or add it through Elementor → Custom Code (before the closing </body> tag) either globally or only on selected pages.

Add Custom CSS

Paste the code through the page or site settings, or add it via Elementor → Custom Code (before </body>) for broader use.

Add Custom Javascript

Paste the script through Elementor → Custom Code (set to load after </body>) for site-wide or page-specific loading.

document.addEventListener("DOMContentLoaded", () => {

  if (document.body.classList.contains("elementor-editor-active")) return;

  const get = (name, instance) =>
    document.querySelector(`[ou-socialshare-element="${name}"][ou-socialshare-instance="${instance}"]`)?.textContent.trim() ||
    document.querySelector(`[ou-socialshare-element="${name}"]:not([ou-socialshare-instance])`)?.textContent.trim() ||
    "";

  const getimage = (name, instance) => {
    const el =
      document.querySelector(`[ou-socialshare-element="${name}"][ou-socialshare-instance="${instance}"]`) ||
      document.querySelector(`[ou-socialshare-element="${name}"]:not([ou-socialshare-instance])`);

    if (!el) return "";
    if (el.tagName === "img") return el.src;
    return el.querySelector("img")?.src || "";
  };

  document.addEventListener("click", e => {

    const element = e.target.closest("[ou-socialshare-element]");
    if (!element) return;

    const type = element.getAttribute("ou-socialshare-element");
    const instance = element.getAttribute("ou-socialshare-instance") || "";

    const data = {
      url: encodeURIComponent(get("url", instance) || location.href),
      text: encodeURIComponent(get("content", instance) || document.title),
      twitteruser: get("twitter-username", instance),
      twittertag: get("twitter-hashtag", instance).replace(/[^a-z0-9_,]/gi, ''),
      facebooktag: get("facebook-hashtag", instance).replace(/[^a-z0-9_]/gi, ''),
      pinterestimage: encodeURIComponent(getimage("pinterest-image", instance)),
      pinterestdesc: encodeURIComponent(get("pinterest-description", instance) || get("content", instance) || document.title),
      subject: encodeURIComponent(get("email-subject", instance) || get("content", instance) || document.title)
    };

    const width = element.getAttribute("ou-socialshare-width") || 600;
    const height = element.getAttribute("ou-socialshare-height") || 600;

    if (type === "email") {
      location.href = `mailto:?subject=${data.subject}&body=${data.text}%20${data.url}`;
      return;
    }

    const share = {
      facebook: `https://www.facebook.com/sharer/sharer.php?u=${data.url}${data.facebooktag ? `&hashtag=%23${data.facebooktag}` : ""}`,
      x: `https://twitter.com/intent/tweet?url=${data.url}&text=${data.text}${data.twitteruser ? `&via=${data.twitteruser}` : ""}${data.twittertag ? `&hashtags=${data.twittertag}` : ""}`,
      pinterest: `https://pinterest.com/pin/create/button/?url=${data.url}&media=${data.pinterestimage}&description=${data.pinterestdesc}`,
      reddit: `https://www.reddit.com/submit?url=${data.url}&title=${data.text}`,
      telegram: `https://t.me/share/url?url=${data.url}&text=${data.text}`,
      linkedin: `https://www.linkedin.com/sharing/share-offsite/?url=${data.url}`,
      whatsapp: `https://wa.me/?text=${data.text}%20${data.url}`,
      threads: `https://www.threads.net/intent/post?text=${data.text}%20${data.url}`
    };

    const shareurl = share[type];
    if (!shareurl) return;

    const left = (screen.width - width) / 2;
    const top = (screen.height - height) / 2;

    window.open(shareurl, "_blank", `width=${width},height=${height},top=${top},left=${left}`);

  });

});

Add Custom PHP

Place the PHP snippet in your theme’s functions.php file or add it using a code snippets plugin to enable the logic.

‍

Publish and preview live

Some solutions only work on the live site. Always publish and test after each change, as results may not appear in the editor.