Highlight to Share Widget
Readers quote the line that struck them, not the one you predicted. With Highlight to Share, selecting a passage of your article brings up a compact toolbar just above it - X, Bluesky, Threads, LinkedIn, Email and Copy - that posts the words in quotation marks with a link back to the page.
Live preview
Under the widget on your page: Powered by A2Z Tools
Embed code
<div data-a2z-kit="highlight-to-share" data-networks="x,bluesky,threads,linkedin,email,copy"></div> <script async src="https://a2z.tools/embed/kit.js" referrerpolicy="no-referrer"></script>
One small script from A2Z draws the component on your page inside its own Shadow DOM. It loads no social-network or tracking scripts and sets no cookies. How the A2Z kit works.
Works with
How it works
The kit listens for the browser's selectionchange event and waits 180 ms for the selection to settle. It shows the toolbar only when the whole selection sits inside your target area (article, main or .entry-content by default), not inside a form field or editable region, and is at least 10 characters long; selections over 600 characters are cut at a word boundary with an ellipsis. The toolbar is positioned 12 px above the selection rectangle (below it near the top of the window) and clamped to the window edges; it hides when the selection collapses, the page scrolls or Escape is pressed. X receives the quoted text fitted to 280 characters with the link counted as 23, Threads and Bluesky their 500 and 300 including the address, LinkedIn only the address, Email a message with the quote and link, and Copy the quote, a line break and the address. It is off on touch screens by default, where the phone's own selection menu appears in the same place.
Method
- Show when: selection inside target AND not in input/textarea/[contenteditable] AND 10 <= length; text over 600 cut with an ellipsis
- X: "text" + space + 23 per link (+ hashtags, via) <= 280; Threads <= 500 and Bluesky <= 300 including " " + url
- Position: top = selection.top - toolbar height - 12 (or below the selection when that is off-screen), clamped 8 px from the window edges
- role="toolbar" with roving tabindex (arrow keys, Home, End); Escape hides
Worked examples
A sentence selected in the sample article, posted to X
Inputs: Selection Seeds want warmth more than water. on https://example.com/blog/spring-garden-guide, X handle greenleafj
Result: https://x.com/intent/post?text=%E2%80%9CSeeds%20want%20warmth%20more%20than%20water.%E2%80%9D&url=https%3A%2F%2Fexample.com%2Fblog%2Fspring-garden-guide&via=greenleafj
The selection is wrapped in curly quotes; the link and via handle go in their own parameters.
The same selection on Bluesky
Inputs: Same selection, Bluesky button
Result: https://bsky.app/intent/compose?text=%E2%80%9CSeeds%20want%20warmth%20more%20than%20water.%E2%80%9D%20https%3A%2F%2Fexample.com%2Fblog%2Fspring-garden-guide
Bluesky's intent has one text field, so the address follows the quote after a space.
Too short to share
Inputs: Selection Seeds (5 characters)
Result: No toolbar
Selections under 10 characters are usually accidental double-clicks.
Limitations
- Text inside iframes, images or canvas cannot be selected and shared.
- The toolbar hides while the page scrolls; reselect to bring it back.
- X counts some scripts (CJK) double; this widget counts one character each, so very long CJK selections may need trimming in X.
Where publishers use it
- A long-read magazine whose readers share the one paragraph that matters to them
- A research or policy blog where academics post precise quotations to Bluesky and Threads with a link
- An opinion column that lets readers email a passage to a colleague with the source attached
- A course or documentation site where learners copy a definition with its address for their notes
Questions
Why is it switched off on phones?
iOS and Android show their own Copy / Share / Look up menu right above a text selection. A second toolbar in the same spot fights with it and can cover it. Phone readers can still use the system Share item in that menu. If your audience prefers it, set On touch screens to Show.
Can keyboard users use it?
Yes. Select text with Shift and the arrow keys and the toolbar appears; it is a real toolbar with arrow-key navigation, placed by the kit at the end of the page, so it is reached with Tab after your content. A screen-reader announcement says so the first time. Escape closes it.
Which parts of the page can be shared?
Only text inside the target area you set - by default article, main and .entry-content. Selections in comment forms, search boxes, editable areas or across your sidebar are ignored. Use a narrower selector, such as .post-body, to limit it further.
What happens with a very long selection?
Anything over 600 characters is shortened at a word boundary with an ellipsis. Each network then gets the most that fits its own limit: about 250 characters on X once the link is counted, more on Threads, and Copy keeps up to 600.
Sources
- Selection API - MDN Web Docs . getSelection(), selectionchange, Range.getBoundingClientRect()
- X web intents: Post intent - X Developer Platform . text, url and via parameters
- Action intent links - Bluesky documentation . bsky.app/intent/compose?text=
Cite or recommend this tool
If you reference this tool in an article, course or documentation, these formats are ready to copy. They are optional - nothing is added to your site unless you paste it.
A2Z Tools Highlight to Share https://a2z.tools/embed/highlight-to-share
<a href="https://a2z.tools/embed/highlight-to-share">A2Z Tools Highlight to Share</a>
[A2Z Tools Highlight to Share](https://a2z.tools/embed/highlight-to-share)
Highlight to Share by A2Z Tools - https://a2z.tools/embed/highlight-to-share
Related widgets
-
A styled pull quote with X, Threads, Bluesky and LinkedIn buttons that fit the text to each network's limit.
-
Pinterest-style Save and share buttons over your article images on hover - without touching your markup.
-
Share buttons for 26 networks - inline, floating, mobile bar or one Share button. No social scripts or cookies.
-
A Copy link button or address box that puts a clean page URL on the clipboard and confirms it.
-
One Share button that opens the phone's own share sheet, with a tidy fallback panel on desktop.
-
An 'Email this page' button that opens the reader's mail app with your subject, message and the link.
