Twitter/X share links let users share your content with one click. The link opens Twitter with pre-filled tweet text, your URL, hashtags, and mentions. Here's how to build them.
Key Takeaways
- 1Use twitter.com/intent/tweet for share links (works for X too)
- 2The text parameter sets the pre-filled tweet message
- 3URL-encode all parameter values, especially the url parameter
- 4Hashtags can be added via hashtags parameter (comma-separated, no # symbol)
- 5Total tweet length including URL must stay under 280 characters
Basic Twitter Share Link
Let's start with the fundamentals of Twitter share URLs. These links use the Web Intent system, which means they work without any API keys or authentication. When a user clicks your share link, Twitter opens with your content pre-loaded and ready to tweet.
The simplest share link just includes the URL you want shared:
https://twitter.com/intent/tweet?url=https://example.com/articleAdd custom text to suggest what users should tweet:
https://twitter.com/intent/tweet?text=Check%20out%20this%20awesome%20article!&url=https://example.com/articleThe URL above combines both text and url parameters. Notice how spaces become %20 in the URL-encoded text. This encoding is essential because special characters would otherwise break the URL structure.
URL Parameters Reference
Twitter's intent system supports several parameters that let you customize what appears in the tweet composer. The table below shows each available parameter and how to use it. All values must be URL-encoded.
| Parameter | Description | Example |
|---|---|---|
text | Pre-filled tweet text | text=Hello%20world |
url | URL to share (auto-shortened by Twitter) | url=https://example.com |
hashtags | Comma-separated hashtags (without #) | hashtags=marketing,growth |
via | Twitter username to mention (without @) | via=yourhandle |
related | Suggested accounts to follow after tweeting | related=account1,account2 |
Now that you understand the available parameters, let's look at real-world examples that combine them effectively.
Ready-to-Use Examples
These examples show common marketing scenarios with complete, working URLs. You can copy and modify them for your own campaigns. Each example demonstrates different parameter combinations for specific use cases.
Share an Article
https://twitter.com/intent/tweet?text=Great%20read%20on%20URL%20building&url=https://example.com/blog/url-guide&via=urleditor&hashtags=webdev,tutorial<a href="https://twitter.com/intent/tweet?text=Great%20read%20on%20URL%20building&url=https://example.com/blog/url-guide&via=urleditor&hashtags=webdev,tutorial"
target="_blank"
rel="noopener noreferrer">
Share on Twitter
</a>This HTML snippet creates a complete share button. The target="_blank" opens Twitter in a new tab, while rel="noopener noreferrer" is a security best practice that prevents the new page from accessing your page's window object.
Share a Product
https://twitter.com/intent/tweet?text=Just%20discovered%20this%20amazing%20tool!&url=https://example.com/product&hashtags=productivityShare a Quote
https://twitter.com/intent/tweet?text=%22The%20best%20time%20to%20start%20is%20now.%22&url=https://example.com/quotes&via=quotesappFor quote shares, wrapping text in encoded quotation marks (%22) signals that it's a quote. Combined with the via parameter, this creates proper attribution.
Building Links Dynamically
When you need to generate share links programmatically, such as for blog posts or product pages, JavaScript makes it easy to build properly encoded URLs. The URL API handles encoding automatically, so you don't need to manually escape special characters.
function createTwitterShareLink(options) {
const { text, url, hashtags, via } = options;
const shareUrl = new URL('https://twitter.com/intent/tweet');
if (text) shareUrl.searchParams.set('text', text);
if (url) shareUrl.searchParams.set('url', url);
if (hashtags) shareUrl.searchParams.set('hashtags', hashtags.join(','));
if (via) shareUrl.searchParams.set('via', via);
return shareUrl.toString();
}
// Usage
const tweetLink = createTwitterShareLink({
text: 'Check out this awesome tool!',
url: 'https://example.com',
hashtags: ['webdev', 'tools'],
via: 'yourhandle'
});
// Open in popup
window.open(tweetLink, 'twitter-share', 'width=550,height=420');This function accepts an options object and builds the URL using the URL and URLSearchParams APIs. The searchParams.set() method automatically URL-encodes the values, preventing issues with special characters in your tweet text.
Opening as a Popup
Opening Twitter in a popup window keeps users on your site while they share. This is better UX than navigating away entirely. The popup approach is especially useful for e-commerce sites where you want to keep the checkout flow intact.
For a better UX, open the share link in a popup window instead of navigating away:
<a href="https://twitter.com/intent/tweet?text=Hello&url=https://example.com"
onclick="window.open(this.href, 'twitter-share', 'width=550,height=420'); return false;">
Tweet This
</a>The return false prevents the default link behavior, so the browser opens the popup instead of navigating to Twitter. The named window (twitter-share) ensures that clicking the button multiple times reuses the same popup rather than opening many windows.
// React/Next.js component
function TwitterShareButton({ text, url }) {
const handleClick = () => {
const shareUrl = new URL('https://twitter.com/intent/tweet');
shareUrl.searchParams.set('text', text);
shareUrl.searchParams.set('url', url);
window.open(
shareUrl.toString(),
'twitter-share',
'width=550,height=420,resizable=yes'
);
};
return (
<button onClick={handleClick}>
Share on Twitter
</button>
);
}This React component encapsulates all the share logic in a reusable button. The resizable=yes option lets users resize the popup window if needed on different screen sizes.
Character Limits
Understanding Twitter's character limits helps you craft share links that don't get truncated. Pre-filling too much text leaves no room for users to add their own thoughts, which reduces engagement.
Twitter has a 280-character limit. Here's how it works with share links:
- URLs are shortened to ~23 characters by Twitter's t.co
- Each hashtag counts toward the limit (including the # symbol Twitter adds)
- The via mention counts as "via @username"
- Leave room for users to add their own thoughts
// Estimate tweet length
function estimateTweetLength(text, url, hashtags = [], via) {
let length = text.length;
// URLs count as ~23 characters
if (url) length += 24; // space + 23 for t.co
// Hashtags
hashtags.forEach(tag => {
length += tag.length + 2; // space + # + tag
});
// Via mention
if (via) length += via.length + 6; // " via @" + handle
return length;
}
// Check before creating link
const length = estimateTweetLength('Check this out!', 'https://example.com', ['webdev'], 'handle');
console.log(`Estimated: ${length}/280 characters`);This utility function estimates tweet length before generating the link. Use it to validate that your pre-filled content leaves room for user commentary. The 23-character URL count is fixed by Twitter's t.co link shortener regardless of your actual URL length.
Best Practices
Following these guidelines will help maximize engagement with your Twitter share buttons. The goal is to make sharing effortless while encouraging users to personalize their tweets.
Keep tweet text short
Leave 80+ characters for users to add their own commentary.
Use 1-2 relevant hashtags max
Too many hashtags look spammy and reduce engagement.
Include your handle with via
Get attribution when people share your content.
Don't forget URL encoding
Special characters in text (?, &, #) break the URL if not encoded.
With the fundamentals covered, you're ready to build effective Twitter share buttons for your website or app.
Try the URL Builder
Use our Twitter Share URL template to build and test your share links interactively.