Download the PHP package brocode/module-web-share without Composer

BroCode_WebShare

A Share button for Magento 2 product pages, category pages, product lists and CMS pages. On phones, tablets and most desktop browsers it opens the device's own share sheet (WhatsApp, Messages, AirDrop, Mail, …) through the browser's Web Share API. Where the browser has no share sheet, it opens a small panel of share links instead, configured in the admin. No third-party scripts, no tracking pixels, no extra CSP entries.

Module page: brocode.at/modules/module-web-share/

In production mode, also run setup:di:compile and setup:static-content:deploy as usual.

What it does

• Looks like Luma's own actions. The Share control sits in the product page's wishlist/compare row with the same grey, uppercase, icon-first styling, and on category pages below the description.
• On every product tile, too. Category listings, quick search and advanced search get a share icon next to the wishlist and compare icons of each tile, sharing that product's page. The link panel is rendered hidden there, so a list under every tile never appears.
• Shares the right URL. Products and categories share their own URL — not the address bar, so no tracking parameters and no layered-navigation filters or sorting. The CMS widget shares the page it is placed on, without the query string.
• Configurable per store view. The share text and every share link can be switched, edited and translated per store view, from the admin or at deploy time.
• Native first, links second. A tap opens the device's share sheet. If the browser has none, or sharing fails, the fallback panel opens. If the customer simply closes the share sheet, nothing else happens.
• Works without JavaScript. The share links are server-rendered; without JavaScript they are shown as a plain list on product and category pages.
• Accessible. A real <button> with aria-expanded, Escape closes the panel and returns focus, and "Link copied" is announced through a live region.

Configuration

Stores > Configuration > Catalog > Catalog > Web Share. Every setting can differ per website and store view — untick Use Default on the store view to override it there.

Share text

A sentence sent along with the link, for example Found this at our shop: {{title}} — set it per store view to translate it. {{title}} becomes the product, category or page title. The native share sheet receives it as its text, and the share links can use it as {{text}}. Facebook and LinkedIn ignore both: they only take the URL and build the preview from the page's Open Graph tags (Luma's product pages have them; stock category and CMS pages do not, so their previews are thinner).

Share links

Each row has a Label, a URL Template and an Active switch. Set Active to No to hide a network without losing its template; delete a row to remove it for good. Rows appear in the order they are listed. The placeholders are URL-encoded on output:

Only https:, http: and mailto: templates are rendered — the templates end up in href attributes, so anything else (javascript:, data:, relative paths) is dropped instead of output.

The defaults, and how sure each one is:

All six were checked in a browser on 2026-09-26: each keeps the product URL through its redirect or login page. Facebook, X and LinkedIn need a logged-in account to show the prefilled dialog.

Adding another network

Add a row with the network's share URL and the placeholders. Telegram, for example, as documented by Telegram:

Configuring it at deploy time

Everything above is ordinary store configuration, so it can be set from the command line or pinned in app/etc/config.php / env.php like any other setting. The share links are stored as JSON:

Add --lock-config to write the value to app/etc/config.php (shared across environments) or --lock-env for app/etc/env.php; a locked value is shown read-only in the admin.

When app/etc/config.php changes any other way — a deploy, a git pull, a file copied back — run bin/magento app:config:import (setup:upgrade does it too). Until then Magento answers every storefront request with The configuration file has changed.

For CMS pages and blocks, insert the widget Web Share Button.

Hooks for analytics and themes

Every share fires a webshare:share event on document:

The markup uses .brocode-web-share, .brocode-web-share-toggle and .brocode-web-share-links; the panel is only positioned as a dropdown once JavaScript has added .is-enhanced, and opens to the left (.is-flipped) when it would leave the viewport.

Requirements and limits

• Magento 2.4.x, PHP 8.1–8.4. Verified on 2.4.8-p5 with Luma, desktop and mobile widths.
• Luma-based themes. The styles use Magento's LESS library only, so Blank-based themes compile too. Hyvä does not load RequireJS components and needs a small compatibility template (not included).
• Browser support for the native share sheet varies. Mobile browsers, Safari, Edge and Chrome on desktop broadly support it; Firefox on desktop only behind a preference. The fallback panel covers every browser without it.
• The page must be served over HTTPS; the Web Share and Clipboard APIs only exist in secure contexts.

License

MIT, see LICENSE.

If this saves you time: buy me a coffee.