Highlight to share: letting readers share selected text

How highlight to share works

A small script listens for a text selection inside the article. When the selection is a reasonable length, it shows a popover near it with share options. Clicking one opens the network's share dialog with the quoted text and the page address. The MashShare Select and Share add-on did this for WordPress, and its product page is one of the most linked addresses in this domain's history, which tells you readers and reviewers liked the idea.

When it is worth adding

• Essays, interviews and research with sentences people want to quote.
• Data posts where a single statistic is the shareable unit.
• Speeches and transcripts.

It adds little to recipes, product pages or tutorials, where readers select text to copy commands or ingredients. On those pages the popover gets in the way.

Setup that respects readers

1. 01

   Limit the scope

   Attach the listener to the article body only, and ignore selections inside pre, code, inputs and tables.

2. 02

   Set a length window

   Show the popover for selections between about 20 and 280 characters. Very short selections are accidental; very long ones do not fit a post.

3. 03

   Never interfere with copy

   Do not change the clipboard or add attribution text to copied content. Readers notice and dislike it.

4. 04

   Make it keyboard friendly

   Selecting with the keyboard should also show the popover, focus should not jump to it automatically, and Escape should close it.

5. 05

   Load it lazily

   The script is small, but it only needs to load on article templates.

The whole thing fits in about thirty lines. This version listens on the article, applies the length window, skips code and tables, and builds a link to the X web intent with the quote and the page address.

var article = document.querySelector('.entry-content');
var pop = document.getElementById('quote-pop');
var link = pop.querySelector('a');
document.addEventListener('selectionchange', function () {
  var sel = window.getSelection();
  var text = sel ? sel.toString().trim() : '';
  if (text.length < 20 || text.length > 250 || sel.rangeCount === 0) { pop.hidden = true; return; }
  var node = sel.anchorNode && sel.anchorNode.parentElement;
  if (!article.contains(node) || node.closest('pre, code, table, input, textarea')) { pop.hidden = true; return; }
  var r = sel.getRangeAt(0).getBoundingClientRect();
  link.href = 'https://twitter.com/intent/tweet?text=' + encodeURIComponent('"' + text + '"')
            + '&url=' + encodeURIComponent(location.href.split('#')[0]);
  pop.style.top = (window.scrollY + r.top - 44) + 'px';
  pop.style.left = (window.scrollX + r.left) + 'px';
  pop.hidden = false;
});
document.addEventListener('keydown', function (e) { if (e.key === 'Escape') pop.hidden = true; });

The upper bound is 250 rather than 280 because the link costs 23 characters and the quotation marks two more. The popover element is plain HTML placed at the end of the article template with hidden set, so nothing renders until a selection qualifies.

What gets shared

X accepts the quote as the post text plus the address. Facebook and LinkedIn ignore pre-filled text and use the page's preview tags, so for those networks the quote is only useful if you copy it for the reader to paste. That limitation is why many sites offer only X and copy in the popover.

A quote travels as bare text. It arrives without the paragraph around it, without your byline, and without any note at the top of the post saying how the piece was produced. If that context matters, it has to sit in the sentence itself or in the preview the link generates; what disclosure survives a share works through the options.

Worked example: a 2,400 word interview

The figures here are invented, the shape is typical. An interview of 2,400 words carries about a dozen lines that stand alone. The popover offers X and copy. Over a month with 3,100 sessions, 41 readers open the popover and 19 share, 12 through X and 7 by copy, a rate of about 6 shares per 1,000 sessions, on top of 14 from the ordinary end-of-post row. The most shared line is 131 characters long; with quotation marks, a space and the link it posts at 157, well inside the limit.

The same site tried the script on its tutorials for a week. Readers there selected command lines to copy them, the popover appeared over the next line of the tutorial, and support mail arrived. The script now loads only on templates in the interview and essay categories, which is the setting to copy: turn it on per post type or category, never sitewide.

What goes wrong

• Popover covers the next line. Position it above the selection, and flip it below only when the selection starts near the top of the viewport.
• Fires on double-click to select a word. A single word is under the 20 character floor, so the window filters it, but a triple-click selects a whole paragraph and can exceed the ceiling. Both should simply not show the popover.
• Selection lost on tap. On phones, tapping the popover can clear the selection before the click handler reads it. Read the text into a variable when the popover is shown, not when it is clicked.
• Stale link after the selection changes. Rebuild the href on every qualifying selection, as the script above does.
• Clipboard tampering. Scripts that append "Read more at" to copied text are the reason many readers distrust the whole pattern. Leave the clipboard alone.

Check it worked

• Select a sentence with the mouse, with Shift and the arrow keys, and with a long press on a phone: the popover appears in all three cases.
• Select inside a code block or table: nothing appears.
• Copy a paragraph with Ctrl or Cmd and C, paste it: the text is unchanged with no appended attribution.
• Press Escape: the popover closes and focus stays where it was.
• Click the X option: the composer opens with the quote in quotation marks and the canonical URL, under 280 characters.

For a fixed, editor-chosen quote rather than a reader-chosen one, click to tweet boxes are the simpler pattern, and the row that sits under every post is covered in adding share buttons. Both belong to the share buttons section.

Sources

• MDN Web Docs: the Selection API
• X Developer Platform, Tweet button web intent (Internet Archive copy, May 2024)

Questions

Related reading

1. 01Click to tweet boxes: how to build them in WordPressBuild a click to tweet box in WordPress with a block or a simple link. Wording, the 280 character limit, how links are counted, and how to style the quote.5 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. 03Share buttons and page speedWhy some share buttons slow WordPress pages and others cost almost nothing. How to measure the impact, and what to change to keep sharing fast on every page.5 min read