How to Embed X (Twitter) Tweets: Complete Guide 2026 [With Examples]

Embedding X (formerly Twitter) posts on your website adds social proof, real-time conversations, and fresh content without creating it yourself. Here's exactly how to do it on any platform.

Quick Method: 3 Steps

1. Find the post → Click the three dots (•••) or share icon on the tweet
2. Click "Embed Post" → X generates HTML code automatically
3. Copy and paste → Insert the code into your website's HTML editor

That's it for the basics. The detailed instructions for every platform and method are below.

What Does Embedding a Tweet Mean?

Embedding a tweet means displaying an X/Twitter post directly on your website, complete with the original formatting, profile picture, and interactive elements (like, repost, reply buttons).

Why embed tweets:

• Social proof — display customer testimonials and positive mentions
• Real-time content — show live conversations and trending discussions
• Original formatting — the tweet looks exactly as it does on X, with authentic branding
• Interactive — visitors can like, repost, and quote tweet in a reply without leaving your site
• Auto-updating — embedded tweets reflect edits; deleted tweets show a "not available" message
• SEO value — adds fresh content to your pages (though embedded tweet text isn't directly indexed as your content)
• Credibility — connects your content to real industry conversations

Method 1: Using the Built-in Embed Feature (Any Website)

This works for any website where you can edit HTML.

Step 1: Find the post Go to x.com (or twitter.com) and locate the tweet you want to embed.

Step 2: Open the embed option

• Click the share icon (arrow) on the tweet
• Select "Embed post" from the menu

You'll be taken to publish.twitter.com where the embed code is generated.

Step 3: Configure your embed

• Include conversation: Choose whether to show parent tweets for context
• Theme: Select light or dark mode
• Language: Auto-detect or set a specific language

Step 4: Copy the code Click "Copy Code" to copy the HTML snippet.

Step 5: Paste into your website

• Switch to your website's HTML or code view (not the visual editor)
• Paste the embed code where you want the tweet to appear
• Save and preview

The Embed Code Explained

The generated code includes two parts:

1. A <blockquote> element containing the tweet text (serves as fallback if JavaScript doesn't load)
2. A <script> tag that loads Twitter's widget JavaScript, which renders the interactive tweet

<blockquote class="twitter-tweet">
  <p>Tweet text here</p>
  — Author (@handle) <a href="https://twitter.com/...">Date</a>
</blockquote>
<script async src="https://platform.twitter.com/widgets.js"></script>

Tip: If you're embedding multiple tweets on the same page, you only need the <script> tag once. Include it after your last embedded tweet.

Method 2: Direct URL Paste (Auto-Embed)

Many modern platforms automatically convert X/Twitter URLs into embedded tweets — no HTML needed.

How it works:

1. Copy the tweet URL from your browser (e.g., https://x.com/username/status/123456789)
2. Paste it on its own line in your content editor
3. The platform converts it to an embedded tweet automatically

Platforms with native auto-embedding:

• WordPress (Gutenberg and Classic editor)
• Medium
• Notion
• Ghost
• Substack
• Tumblr

Important: Paste the URL on its own line, not inline with text. Auto-embedding only works when the URL is the only content on that line.

Method 3: Using publish.twitter.com Directly

You can go directly to publish.twitter.com without starting from a tweet:

1. Go to publish.twitter.com
2. Paste the tweet URL into the input field
3. Choose "Embedded Tweet" as the display option
4. Configure theme and conversation settings
5. Copy the generated code

This is useful when you want to configure multiple embeds quickly or when the share menu isn't cooperating.

Platform-Specific Instructions

WordPress

WordPress is the easiest platform for embedding tweets with three methods:

Method 1: URL Paste (Easiest)

1. Copy the tweet URL
2. Paste it on its own line in the Gutenberg editor
3. WordPress auto-converts it to an embedded tweet
4. Preview to confirm

Method 2: Twitter Embed Block

1. Click (+) to add a new block
2. Search for "Twitter" or "Embed"
3. Select the Twitter embed block
4. Paste the tweet URL
5. The tweet renders automatically

Method 3: Custom HTML Block

1. Add a "Custom HTML" block
2. Paste the full embed code from publish.twitter.com
3. Preview to verify

Classic Editor users: Switch to the "Text" tab (not "Visual"), paste the URL or HTML code, then switch back to "Visual."

WordPress troubleshooting:

• Clear your caching plugin after adding embeds
• If the embed doesn't appear, check that JavaScript isn't blocked by a security plugin
• Ensure oEmbed is enabled (Settings → Writing — it's on by default)
• Try disabling plugins temporarily to identify conflicts

Wix

1. Add an "Embed HTML" element to your page
2. Paste the Twitter embed code
3. Adjust the element size and positioning
4. Publish your changes

Squarespace

1. Add a "Code Block" to your page or post
2. Paste the embed code
3. Uncheck "Display Source" if available
4. Save and preview

Shopify

1. Edit your page or blog post
2. Click the HTML view button (<>)
3. Paste the embed code where you want it
4. Switch back to visual view and save

Next.js / React Applications

For React-based applications, consider using the react-tweet package:

npm install react-tweet

 
export default function Page() {
  return <Tweet id="1234567890" />
}

This renders a static version of the tweet that's better for performance (no client-side JavaScript required from Twitter).

Email Newsletters

Most email clients don't fully support embedded tweets. Instead:

• Take a screenshot of the tweet
• Link the screenshot to the original tweet URL
• Include the tweet text as a styled blockquote with attribution

Mailchimp and ConvertKit support HTML embeds, but test thoroughly in multiple email clients before sending.

Embedding Different Content Types

Regular tweets

Standard embedding process — works on all platforms.

Tweets with images or video

Images and native videos embed automatically with the tweet. The video player works within the embedded tweet.

Twitter/X threads

• Single tweet from a thread: Embed that specific tweet — it works standalone
• Thread with context: Choose "Include Conversation" when generating the embed to show parent tweets
• Full thread: There's no native way to embed an entire thread as one unit. Embed key individual tweets, or consider a thread screenshot tool

Tweets with polls

Embedded polls show the results after voting closes. Active polls may not be interactive in all embed contexts.

Customizing Embedded Tweets

Theme Options

• Light theme: Default white background — suits most websites
• Dark theme: Dark background — matches dark mode designs

Set the theme when generating the code on publish.twitter.com, or add data-theme="dark" to the blockquote element.

Width and Alignment

Tweets automatically resize to fit their container. Control width with CSS:

.twitter-tweet {
  margin: 20px auto; /* centers the tweet */
  max-width: 550px;  /* sets maximum width */
}

Performance Optimization

Each embedded tweet loads Twitter's JavaScript widget. On pages with multiple embeds, this can affect page speed.

Tips for performance:

• Limit to 3-5 embeds per page for optimal load times
• Use lazy loading — add loading="lazy" where supported, or use Intersection Observer to load embeds only when users scroll to them
• Load the script once — if you have multiple embeds, include the widgets.js script only once at the end
• Consider static alternatives — for archived content, a screenshot with a link may be faster than a live embed
• Test with PageSpeed Insights — check the impact of embeds on your Core Web Vitals scores

Privacy and Cookie Considerations

Embedded tweets load content from X's servers, which may set cookies on your visitors' browsers. If your website needs to comply with GDPR or similar privacy regulations:

• Mention third-party embeds in your privacy policy
• Consider using a cookie consent mechanism that blocks embeds until consent is given
• The react-tweet package (for React/Next.js) renders tweets without loading X's JavaScript, avoiding the cookie issue entirely

Troubleshooting

Tweet not displaying

Check these in order:

1. Verify the tweet still exists (not deleted or from a now-private account)
2. Ensure the embed code is complete (both the blockquote and script tag)
3. Check that JavaScript is enabled and not blocked by ad blockers or security plugins
4. Try regenerating the embed code from publish.twitter.com
5. Clear your website's cache

Formatting issues

• Tweet too wide: Add max-width CSS to the container
• Not centering: Use margin: 0 auto on the .twitter-tweet class
• Theme conflict: Your site's CSS may override Twitter's styles — use browser DevTools to inspect
• Mobile overflow: Ensure the parent container allows responsive sizing

Broken embeds over time

Tweets can be deleted, accounts can be suspended, and URLs change. Check embedded tweets periodically:

• Set a monthly reminder to review pages with embeds
• Replace broken embeds with screenshots or alternative content
• Consider adding a note like "Original tweet" with a direct link as fallback

Legal and Ethical Guidelines

• Public tweets can be embedded without permission — embedding is a feature built into the platform
• Attribution is automatic — the embed includes the author's name, handle, and profile picture
• Respect removal requests — if someone asks you to remove an embed of their tweet, consider doing so
• Don't embed from private accounts — you can't technically do this, but if someone makes their account private after you embed, the embed will break
• Copyright — the tweet text is the author's content; embedding (rather than copying) is generally acceptable, but consult legal advice for commercial use in advertising

Common Mistakes

• Embedding too many tweets — more than 5-10 per page noticeably slows load times
• Not testing on mobile — always preview embeds on phone-sized screens
• No fallback for broken embeds — broken embeds show an empty space or error message
• Missing context — always explain to your reader why the embedded tweet is relevant
• Using old twitter.com URLs — both twitter.com and x.com URLs work, but x.com is the current standard
• Pasting in visual editor — embed code must go in the HTML/code view, not the visual/rich text editor

Frequently Asked Questions

For more social media integration tips, check out our guide on types of social media platforms and explore our free social media tools.