Add a social sharing popup after a Weebly blog post

Adding a social sharing popup after a blog post gives readers an easy way to pass useful content to friends, colleagues or their own networks. On Weebly, the effect can be lightweight and site-wide, but it becomes disruptive if it appears too early, covers the article or returns on every page. A well-timed prompt arrives after the reader has received value.

This guide covers a simple sharing dialog, Weebly installation, mobile presentation and testing. The method uses ordinary HTML, CSS and JavaScript, so it can suit a small-business blog or a large publisher without loading several third-party trackers.

Choose when the popup should appear

Place the trigger below the main body, after any summary or call to action already in the post. This preserves the reading flow and makes the invitation feel connected to the finished article rather than guarding access to it.

Australian readers often circulate articles through Facebook communities, WhatsApp conversations, email, LinkedIn and Pinterest. Choose networks that suit the topic and audience instead of filling the popup with every service available.

Use one trigger: a marker at the end of the post or a high scroll percentage such as 80 per cent. A timer can fire while someone is still reading. Open the dialog once per post view, retain a clear close button and avoid trapping the page.

Build a lightweight sharing dialog

A dependency-free dialog keeps the load light and the code understandable. Put the markup and styling in an HTML or embed-code area, then add a small script to build each sharing URL.

<div id="wsp" class="wsp" hidden>
  <div class="wsp__panel" role="dialog" aria-modal="true" aria-labelledby="wsp-title">
    <button class="wsp__close" type="button" aria-label="Close sharing popup">&times;</button>
    <p id="wsp-title" class="wsp__title">Found this useful?</p>
    <p>Share this post with someone who may need it.</p>
    <div class="wsp__links">
      <a href="#" data-share="facebook">Facebook</a>
      <a href="#" data-share="linkedin">LinkedIn</a>
      <a href="#" data-share="x">X</a>
      <a href="#" data-share="pinterest">Pinterest</a>
      <a href="#" data-share="whatsapp">WhatsApp</a>
      <a href="#" data-share="email">Email</a>
    </div>
  </div>
</div>

The hidden attribute removes the panel until it opens. The mobile rule turns it into a bottom sheet, which is easier to reach than a small centred box. Add this after the markup:

.wsp{position:fixed;inset:0;z-index:9999;display:grid;place-items:center;padding:1rem;background:rgba(0,0,0,.65)}
.wsp[hidden]{display:none}
.wsp__panel{position:relative;width:min(100%,34rem);padding:1.5rem;border-radius:12px;background:#fff;color:#222}
.wsp__close{position:absolute;top:.5rem;right:.5rem;width:2.75rem;height:2.75rem;border:0;border-radius:50%;font-size:1.8rem;cursor:pointer}
.wsp__title{font-size:1.25rem;font-weight:700;margin:.25rem 0}
.wsp__links{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1rem}
.wsp__links a{display:inline-block;padding:.7rem .9rem;border-radius:6px;background:#f1f1f1;color:#222;text-decoration:none}
.wsp-end{height:1px}
body.wsp-lock{overflow:hidden}
@media(max-width:480px){.wsp{place-items:end;padding:0}.wsp__panel{width:100%;border-radius:14px 14px 0 0}}

The script checks that the visitor is on a blog post, creates links for the current URL and title, and opens the panel near the end marker. It provides Escape and backdrop closing, keeps keyboard focus inside the panel, restores focus and falls back to scroll depth when the marker is absent.

(() => {
  const popup = document.getElementById("wsp");
  if (!popup || !document.body.classList.contains("blog-post-page")) return;

  const closeButton = popup.querySelector(".wsp__close");
  const canonical = document.querySelector('link[rel="canonical"]');
  const pageUrl = encodeURIComponent(canonical ? canonical.href : location.href);
  const pageTitle = encodeURIComponent(document.title);
  const destinations = {
    facebook: "https://www.facebook.com/sharer/sharer.php?u=" + pageUrl,
    linkedin: "https://www.linkedin.com/sharing/share-offsite/?url=" + pageUrl,
    x: "https://twitter.com/intent/tweet?url=" + pageUrl + "&text=" + pageTitle,
    pinterest: "https://pinterest.com/pin/create/button/?url=" + pageUrl + "&description=" + pageTitle,
    whatsapp: "https://wa.me/?text=" + pageTitle + "%20" + pageUrl,
    email: "mailto:?subject=" + pageTitle + "&body=" + pageUrl
  };

  popup.querySelectorAll("[data-share]").forEach((link) => {
    const type = link.dataset.share;
    link.href = destinations[type];
    if (type !== "email") {
      link.target = "_blank";
      link.rel = "noopener noreferrer nofollow";
    }
  });

  let previousFocus;
  function openPopup() {
    previousFocus = document.activeElement;
    popup.hidden = false;
    document.body.classList.add("wsp-lock");
    closeButton.focus();
  }
  function closePopup() {
    popup.hidden = true;
    document.body.classList.remove("wsp-lock");
    if (previousFocus) previousFocus.focus();
  }

  closeButton.addEventListener("click", closePopup);
  popup.addEventListener("click", (event) => {
    if (event.target === popup) closePopup();
  });
  document.addEventListener("keydown", (event) => {
    if (event.key === "Escape") closePopup();
  });
  popup.addEventListener("keydown", (event) => {
    if (event.key !== "Tab") return;
    const items = [...popup.querySelectorAll("a[href],button")];
    const first = items[0];
    const last = items[items.length - 1];
    if (event.shiftKey && document.activeElement === first) {
      event.preventDefault();
      last.focus();
    } else if (!event.shiftKey && document.activeElement === last) {
      event.preventDefault();
      first.focus();
    }
  });

  let opened = false;
  function reveal() {
    if (opened) return;
    opened = true;
    openPopup();
  }
  const marker = document.getElementById("wsp-end");
  if (marker && "IntersectionObserver" in window) {
    const observer = new IntersectionObserver((entries) => {
      if (entries[0].isIntersecting) {
        reveal();
        observer.disconnect();
      }
    }, { threshold: 0.75 });
    observer.observe(marker);
  } else {
    window.addEventListener("scroll", () => {
      const page = document.documentElement.scrollHeight - window.innerHeight;
      if (page > 0 && window.scrollY / page > 0.8) reveal();
    }, { passive: true });
  }
})();

Add <div id="wsp-end" class="wsp-end" aria-hidden="true"></div> after the last element in each post template. If the theme uses a different post-page class, inspect the page source and replace blog-post-page. Use one copy of the dialog so duplicate IDs do not break focus or events.

Install the code in Weebly

In the Weebly editor, look for a site-wide footer-code or custom-code option under the site settings; labels differ between editor versions and plans. Paste the CSS, dialog markup and JavaScript there, then publish a test post. The script is limited to blog-post-page, so it should not appear on your main blog index.

If your plan does not expose site-wide code, place the same block in an embed-code element within a reusable post layout. When no reusable template is available, add it to individual posts through an HTML block. For a managed visual alternative, compare the embed and sharing features available through Ayuda GPlus tools before choosing a custom setup.

Check the blog settings for Weebly’s own footer share icons and disable them if they duplicate the popup. Clear the preview cache, test a published draft and inspect the browser console for missing-element errors. A single global installation is easier to maintain than repeated copies.

Design for Australian mobile readers

Design for the phone first. Australian readers often encounter blog posts through mobile search and social apps, often on a metered or limited connection. Use system fonts, compress a small share image and avoid icon packs, autoplay or several external scripts. The panel should appear quickly without shifting the article.

Reading-based timing handles Australia’s spread of time zones better than a fixed hour. A visitor in Brisbane or Sydney may read at breakfast while someone in Perth or Adelaide opens the same post later. The prompt follows the reader’s scroll position, so every time zone receives the same experience.

Keep buttons at least 44 pixels high, leave space around labels and preserve visible focus outlines. On narrow screens, stack the links if labels wrap. WhatsApp is worth including for everyday sharing, while LinkedIn suits professional content and Pinterest can suit a visual article such as travel or interiors.

Keep sharing fast, private and search friendly

A share dialog can encourage referral traffic and social discovery, but it does not replace good indexing or a useful article. Keep the popup code small, load it after the main content and avoid requests until the dialog opens. These choices protect Core Web Vitals and prevent the feature from slowing the post itself.

If the article supports a business in Melbourne, Sydney or another Australian market, pair social distribution with local visibility work. The practical setup in Weebly local SEO helps the underlying page reach relevant local searches, while sharing can extend that reach beyond existing search visitors.

Treat visitor data as carefully as any Australian site. A link-only popup collects no email address and creates no advertising cookie by itself, but added analytics may still require consent under Australian privacy law and your site policy. State what data you collect, avoid pre-ticked choices and make the close control as clear as the share buttons.

Test the popup across devices and networks

Test each network from the finished post, not from the code preview. Confirm that the URL is canonical, the page title is correct and the post opens in the intended service. Check the Facebook preview, LinkedIn preview and Pinterest image, because missing page metadata can produce a blank or misleading share card.

Use keyboard navigation to reach every share link, close the dialog with Escape and confirm that focus returns to the page. A screen reader should announce the dialog title and modal state. Test on current versions of Safari and Chrome, plus a mid-range Android phone, and check how the panel behaves on a slow mobile connection.

Use Weebly Analytics or a privacy-conscious event tool to record popup opens, closes and completed shares. Tag campaigns with a consistent UTM source, but do not treat a share click as proof that a referral converted. Recheck the browser console after publishing, since theme updates can alter body classes or markup.

Install the lightweight version on one informative post, keep the end marker in place and choose the networks your audience uses most. Preview it on a phone, verify every link and publish when the panel is fast, accessible and unobtrusive.

Publish the post, test it on your own phone, and invite Australian readers to share it with the people who will benefit.