How to Create a Twitter/X Share Link

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.

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:

Add custom text to suggest what users should tweet:

The 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.

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

<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

Share a Quote

For 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.

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.