What a click to tweet box is
It is a pull quote with a call to action: "Post this". Clicking it opens the composer on X with the text filled in, and the reader can edit before posting. The pattern was popular enough that share plugins sold it as an add-on, including a MashShare Click to Tweet add-on whose screenshots are still linked from other sites.
Build a click to tweet box with a plain link
Write the line
One sentence that stands alone without the article: a finding, a rule of thumb, a strong opinion.
Encode it
URL encode the text and your page address. Spaces become
%20, and characters such as the ampersand must be encoded too.Build the URL
https://twitter.com/intent/tweet?text={quote}&url={address}. Add&via={handle}if you want your account mentioned.Add it to the post
Use a Quote or Pullquote block for the text and a Button or link underneath with the intent URL. Set it to open in a new tab.
Test it
Click it logged in and logged out, and check the character count in the composer.
In HTML the finished box is a figure with a quotation and one link. This is the markup to paste into a Custom HTML block or a reusable pattern; only the quote, the URL and the handle change per post.
<figure class="ctt">
<blockquote class="ctt-quote">Plain share links load nothing until a reader clicks them.</blockquote>
<a class="ctt-link" target="_blank" rel="noopener"
href="https://twitter.com/intent/tweet?text=Plain%20share%20links%20load%20nothing%20until%20a%20reader%20clicks%20them.&url=https%3A%2F%2Fexample.com%2Fshare-links%2F&via=examplesite">Post this on X</a>
</figure>Counting characters
| Part | Counts as |
|---|---|
| Each character of your quote | 1 (most scripts) |
| Any link, however long | 23 |
| A via mention | length of the handle plus "via @" |
| Maximum post length | 280 |
A quote of about 240 characters leaves room for the link and a short via mention. If your plugin truncates text automatically, check that it cuts at a word boundary rather than mid-word.
Worked example: the count for one box
Take the quote in the markup above. It is 58 characters. The composer adds a space and the link, which X counts as 23 whatever its real length, and the via mention becomes " via @examplesite", another 17. The post arrives at 99 characters, leaving 181 for the reader to add a comment. The same arithmetic on a 240 character quote gives 281, one over the limit, which is why the practical ceiling is nearer 235 when a via mention is present.
| Quote length | With link (24 incl. space) | With link and via @examplesite (17) | Room left of 280 |
|---|---|---|---|
| 58 | 82 | 99 | 181 |
| 140 | 164 | 181 | 99 |
| 200 | 224 | 241 | 39 |
| 240 | 264 | 281 | over by 1 |
Two things follow. Drop the via mention on long quotes, and count characters the way the composer does, not the way a word processor does: emoji and some scripts count as two.
Style it as part of the article
The box should look like a quotation, not an advert. A left rule, slightly larger type, and a small text link are enough. Avoid network brand colours as backgrounds; they clash with most themes and read as sponsored.
Writing lines people actually post
- Specific beats clever: numbers, named steps, clear claims.
- One idea per box, and no more than two boxes per article.
- Leave out hashtags unless your community uses one consistently.
Remember what the reader's followers will see: the quote, then a card built from your page's title, description and image. The card is where a byline or a label lives, since the quote itself carries none; labelling in link previews explains what to set.
What goes wrong
- Unencoded punctuation. An ampersand or a hash in the quote ends the text parameter early, so the composer opens with half a sentence. Encode with
encodeURIComponentorrawurlencode(). - Smart quotes doubled. Some editors convert straight quotes inside the href into curly ones, which then encode to six characters each. Check the raw HTML.
- Wrong URL. A box copied between posts keeps the old address. Use the permalink function in a theme, or check each pasted box.
- The link opens in the same tab. Readers lose their place. Add
target="_blank"withrel="noopener". - Plugin shortcode left behind. If a click to tweet plugin is removed, its shortcode prints as raw text in every old post; see cleaning up after a share plugin.
Check it worked
- Click the box logged out: the composer opens with the full quote, the canonical URL and, if set, the via mention.
- The composer's counter shows the total you calculated, under 280.
- The quote reads as a sentence on its own, without the article.
- The card under the composer shows your intended title and image; if it shows the wrong one, fix the tags described in setting up X cards.
- The box uses your theme's colours and a visible focus style on the link.
For reader-chosen quotes rather than a fixed line, see highlight to share; both patterns sit alongside the normal row described in adding share buttons to WordPress and the rest of the share buttons guides.
Sources
- X Developer Platform, Tweet button web intent (Internet Archive copy, May 2024)
- WordPress Block Editor Handbook
Questions
Do I need a plugin for click to tweet?
No. A link to the X web intent URL with encoded text and address does the same job.
Does click to tweet still work now the service is called X?
Yes. The web intent URL still opens the post composer with your text filled in.
How long should a click to tweet quote be?
Under about 250 characters, so the link and any via mention fit within the 280 limit.
Can I add a hashtag to a click to tweet box?
Yes, with a separate hashtags parameter in the intent URL or by writing it into the text. Each hashtag counts toward the 280 characters, so use one at most.
Why does my click to tweet text get cut off?
An unencoded ampersand, hash or question mark in the quote ends the text parameter early. Encode the whole quote before building the URL.
Hannah Voss, Editor. Checks every guide against a working WordPress install and the networks' current documentation. Last reviewed September 2026.
Related reading
- Highlight to share: letting readers share selected textHighlight to share lets readers select a sentence and share it with a link back. How it works, when it helps, accessibility concerns, and a lightweight setup.6 min read
- How to add social share buttons to WordPressAdd social share buttons to WordPress with a plugin, a block, or plain links in your theme. Placement, networks, counts and the checks to run afterwards.6 min read
- Twitter cards on X: tags and testingSet up Twitter card tags so links to your WordPress posts show a large image on X: the summary_large_image card, fallbacks to Open Graph, sizes and testing.6 min read