Click to Share Quote Widget
Turn the most quotable line of your article into a designed pull quote readers can post in one click. The quote, its author and your link are fitted to X's 280-character count, Threads' 500 and Bluesky's 300 - shortened at a word boundary with an ellipsis when they do not fit - so nobody lands in a composer with an over-limit post.
Live preview
Under the widget on your page: Powered by A2Z Tools
Embed code
Fill in the required fields above - until then this code shows nothing on your site.
<div data-a2z-kit="click-to-share-quote" data-networks="x,threads,bluesky,linkedin,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 quote is shown as a figure with a blockquote and the author in a figcaption, in one of four designs. The shared text is the quote in curly quotation marks, a spaced hyphen and the author. For X the budget is 280 characters minus 24 for the link (X counts every link as 23 characters, plus the separating space), minus a space and # for each hashtag and ' via @handle' when you set one; Threads allows 500 characters and Bluesky 300, both including the address and a space. When the text is over budget the quote, never the author, is cut back to the last whole word and given an ellipsis; only if the author alone would leave no room is it dropped. LinkedIn and Facebook accept only the address and build their preview from your Open Graph tags. Copy puts the quote line, a line break and the address on the clipboard.
Method
- Text = "quote" - author (curly quotes U+201C/U+201D)
- X: len(text) + 24 + sum(len(tag) + 2) + (via ? 6 + len(via) : 0) <= 280; Threads: len(text) + len(url) + 1 <= 500; Bluesky: same with 300
- Over budget: quote cut to the last space that keeps it in budget, trailing punctuation removed, then an ellipsis
- Counting uses Unicode code points (equal to graphemes for ordinary text; emoji sequences over-count, so posts err short)
Worked examples
The sample quote on X
Inputs: Quote Plant for the soil you have, not the soil you wish you had. Author Greenleaf Journal, page https://example.com/blog/spring-garden-guide
Result: https://x.com/intent/post?text=%E2%80%9CPlant%20for%20the%20soil%20you%20have%2C%20not%20the%20soil%20you%20wish%20you%20had.%E2%80%9D%20-%20Greenleaf%20Journal&url=https%3A%2F%2Fexample.com%2Fblog%2Fspring-garden-guide
Short enough for every network, so it is shared whole; the curly quotes arrive as %E2%80%9C and %E2%80%9D.
A 278-character quote with a hashtag and via
Inputs: Quote beginning The best time to improve your soil is the autumn before you need it..., author Mara Ellis, hashtag gardening, via greenleafj
Result: X text: “The best time to improve your soil is the autumn before you need it: spread compost over the beds, let the worms carry it down through the winter, and by spring the ground will crumble in your hand instead of…” - Mara Ellis
224 characters + 24 for the link + 11 for #gardening + 16 for via @greenleafj = 275, within 280. Bluesky gets more of the quote (ending ...to your boots, which…) because only the link and a space count against its 300.
Hostile text
Inputs: Quote <script>alert(1)</script>
Result: text=%E2%80%9C%3Cscript%3Ealert(1)%3C%2Fscript%3E%E2%80%9D
The quote is drawn with textContent and encoded in links, so markup stays literal characters.
Limitations
- X weighs some scripts (Chinese, Japanese, Korean) as two characters; this widget counts one, so very long CJK quotes may still need trimming in X's composer.
- Facebook and LinkedIn share links take only the page address.
- Pinterest is not offered here because it needs an image; use Image Share Buttons for pictures.
Where publishers use it
- A long-form interview that highlights the guest's best line with an attribution readers can post
- A research summary pulling out a single statistic for LinkedIn and Bluesky audiences
- A book or podcast review quoting the author, with the reviewer's X handle added as via
- A company blog post putting a founder's statement in a large serif quote with share buttons below
Questions
Why was my quote shortened on X but not on Threads?
Each network has its own limit. X allows 280 characters and counts the link as 23 whatever its real length, so a 250-character quote with an author and a hashtag can exceed it; Threads allows 500 and Bluesky 300. The widget fits the text separately for each, cutting at a word boundary and adding an ellipsis only where needed.
Why does LinkedIn not show the quote?
LinkedIn's share link accepts only the page address - it ignores any text parameter - and builds the post preview from your page's Open Graph title, description and image. Readers can paste the quote into their LinkedIn post themselves; the Copy button puts the quote and link on the clipboard for exactly that.
Can I add hashtags and my X handle?
Yes. Hashtags (up to five, letters, digits and underscores) and a via handle are added to the X post and counted in the 280-character budget, so the quote is shortened further if needed. Threads and Bluesky do not receive them.
Is the quote marked up for search engines?
It is ordinary HTML - a figure, blockquote and cite - drawn by the kit inside a Shadow DOM, so it reads naturally to screen readers. It adds no structured data; if the quote matters for search, keep it in your article text as well.
Sources
- X web intents: Post intent - X Developer Platform . text, url, hashtags and via parameters
- Counting characters - X Developer Platform . 280-character limit, every URL counted as 23 characters
- Share to Threads with a web intent - Meta for Developers . threads.com/intent/post with text and url
- 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 Click to Share Quote https://a2z.tools/embed/click-to-share-quote
<a href="https://a2z.tools/embed/click-to-share-quote">A2Z Tools Click to Share Quote</a>
[A2Z Tools Click to Share Quote](https://a2z.tools/embed/click-to-share-quote)
Click to Share Quote by A2Z Tools - https://a2z.tools/embed/click-to-share-quote
Related widgets
-
Select any sentence in your article and a small toolbar offers to post it to X, Bluesky, Threads or email.
-
Share buttons for 26 networks - inline, floating, mobile bar or one Share button. No social scripts or cookies.
-
Pinterest-style Save and share buttons over your article images on hover - without touching your markup.
-
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.
