Social Sharing
One button surfaces messaging, email, and social destinations together, rather than a separate icon built and maintained for each network.
Background
Letting a person pass a page’s link, a snippet of text, or a file along to someone else, or post it somewhere more public, is a long-running content pattern on news sites, blogs, and shopping sites — a shared link is a source of return traffic a site wouldn’t otherwise generate. Sites have traditionally built this as a row of separate buttons, one icon per social network, but that list only ever reflects whichever networks were popular when the row was built; keeping it current as networks rise and fall is an ongoing cost that handing the choice off to whatever the person’s own device already offers avoids.
Letting a person pass a page’s link, a snippet of text, or a file along to someone else, or post it somewhere more public, is a long-running content pattern on news sites, blogs, and shopping sites — a shared link is a source of return traffic a site wouldn’t otherwise generate.
Problem
A hardcoded row of per-network share icons goes stale as the networks people actually use shift over time, and each added icon competes with the page’s own content for the same limited space — space real enough that Google’s Santa Tracker team had previously removed sharing from its mobile experience altogether rather than keep justifying several separate share targets.
A hardcoded row of per-network share icons goes stale as the networks people actually use shift over time, and each added icon competes with the page’s own content for the same limited space — space real enough that Google’s Santa Tracker team had previously removed sharing from its mobile experience altogether rather than keep justifying several separate share targets.
Solution
Hand off to the device’s own share mechanism
Rather than building a custom menu of per-network icons, offer a single share action that hands a title, some text, a URL, or a file to whatever share mechanism the person’s own browser or operating system already provides — the same system-level list of apps, spanning messaging, email, and social apps alike, that a platform-specific app on that device would get. This action must always be started directly by the person (e.g. a click on the share button) — sharing should never fire on its own. After Google’s Santa Tracker replaced several separate mobile share buttons with one button wired to this mechanism, the team measured roughly 20% more shares than before, while getting back the screen space the old row of icons had taken.
After Google’s Santa Tracker replaced several separate mobile share buttons with one button wired to this mechanism, the team measured roughly 20% more shares than before, while getting back the screen space the old row of icons had taken.
Keep a per-network fallback where the device offers no share mechanism
Not every browser or platform provides a device-level share mechanism, so where it’s missing, fall back to a specific link to the person’s most likely social network — a direct link that opens that network’s own compose screen, prefilled with the page’s title and URL — rather than removing the option to share at all.
Share the page’s stable address, not whatever’s in the sender’s address bar
When the same content is reachable at more than one address — a separate mobile URL, a link carrying a session or tracking parameter — share the page’s stable, canonical URL instead of whatever’s currently in the browser’s address bar, so a recipient who opens the link from a different device or client lands on the version suited to them rather than the sender’s own.
Related Concepts
Patterns
Sources
web.dev: Integrate with the OS Sharing UI with the Web Share API is the source for handing sharing off to the platform’s own share mechanism instead of a row of per-network buttons, the Santa Tracker case study’s screen-space problem and its ~20%-more-shares result, and the canonical-URL recommendation.
MDN: Web Share API supplies the requirement that a share action always be triggered by a direct user action rather than firing on its own.