Share buttons on mobile: layout, size and native sharing

Why mobile needs its own settings

Most readers of most blogs are on phones, and phones share differently: into messaging apps, through the operating system's share sheet, or by copying the link. Desktop share rows designed for a wide column tend to wrap into two rows, shrink icons below a usable size, or push content down. The old responsive add-ons for share plugins, including the MashShare Responsive add-on whose page still has links pointing here, existed to fix exactly this.

The mobile share buttons checklist

Use the native share sheet

Modern mobile browsers support the Web Share API. A single button calls navigator.share() with the page title and address, and the phone offers every app the reader has installed. Show it only when navigator.share exists, and keep a copy link button as the fallback. This one button often replaces three or four network icons on mobile.

if (navigator.share) {
  button.addEventListener('click', function () {
    navigator.share({ title: document.title, url: location.href });
  });
} else {
  button.hidden = true;
}

Because the share sheet hands over nothing but the title and the URL, the preview a chat app renders is built from your Open Graph tags, and any label or credit in the image itself is the only part of the image that survives the trip; see labelling images in link previews for what holds up.

Showing different buttons on phones

Many sharing plugins let you choose a separate network list or position for mobile. If yours does not, CSS can hide individual buttons below a breakpoint. Hiding with CSS still loads anything the button needs, so for heavy official widgets it is better to use a plugin setting that does not output them at all.

.share-row { display: flex; flex-wrap: nowrap; gap: 8px; overflow-x: auto; }
.share-row a, .share-row button { flex: 0 0 auto; min-width: 44px; min-height: 44px; }
@media (max-width: 600px) {
  .share-row .net-linkedin, .share-row .net-reddit { display: none; }
  .share-row .label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
}
@media (min-width: 601px) { .share-row .net-native { display: none; } }

The rule hides two low-use networks on small screens, keeps the labels for screen readers while hiding them visually, and shows the native share button only on narrow viewports, where the share sheet is most likely to exist. If the row still wraps, overflow-x: auto lets it scroll instead.

Worked example: fitting the row at 360 pixels

Take a viewport 360 CSS pixels wide with 16 pixel margins, the common phone width in the invented but typical analytics of a news blog. That leaves 328 pixels for the row. The desktop row shows six labelled buttons at about 90 pixels each, 540 pixels in total, so on the phone it wraps to two lines and the second line sits under the fold on landscape.

The site settles on the last row: native share, copy link, Facebook and X, with a visible "Share" label on the native button. The two hidden networks are still available on desktop. In the same invented month, mobile share clicks rise from 4 to 9 per 1,000 sessions, with the native button taking about half of them.

Portrait, landscape and tablets

The old screenshots in this domain's archive show phones in portrait with three networks and a plus button, and tablets in landscape with the full set. That split still makes sense: tablets in landscape have desktop-like width, while phones in landscape have very little height, so a bottom bar should shrink or hide when the viewport is short.

What goes wrong

• Targets under 44 pixels. Icon buttons at 32 pixels look neat and get mis-tapped. Pad the link, not the icon.
• The native button on desktop. Desktop browsers without navigator.share show a dead button unless it is hidden by the feature check.
• Share sheet blocked. The call must happen inside a user gesture. Calling it after a timeout or on load is rejected.
• Copy link without feedback. On a phone there is no cursor change, so a button that copies silently looks broken. Change its text for two seconds.
• Hover-only states. Colours that appear on hover never appear on a touch screen. Make the default state readable on its own.

Check it worked

• At 360, 390 and 412 pixels wide the row is one line in portrait.
• Every target measures at least 44 by 44 CSS pixels in the browser's inspector.
• The native share button appears on a phone, opens the share sheet, and is absent on a desktop browser.
• A copied link pastes as the canonical post URL.
• In landscape at 480 pixels of height, no fixed element covers more than a sixth of the screen.

The bottom bar variant has its own checks in sticky share bars, and which networks to keep on the short row is worked through in choosing share networks. The share buttons hub lists the rest.

Sources

• MDN Web Docs: Navigator.share() (Web Share API)
• W3C, Web Content Accessibility Guidelines (WCAG) 2.2
• Google Search Central: understanding page experience

Questions

Related reading

1. 01Sticky and floating share bars: when they helpSticky share bars and floating sidebars keep buttons visible while readers scroll. Where to place them, when they hurt, and how to avoid layout shift.6 min read
2. 02Which share networks to show, and how manyHow to choose which social share buttons to display: match networks to your audience, keep the row short, and add copy link, email and messaging options.6 min read
3. 03Styling share buttons with CSSStyle WordPress share buttons with CSS: override colours and text safely, keep focus states, use one icon style, and match your theme in both modes.5 min read