You want to display a Mastodon post directly on your website. A static screenshot does not preserve interactivity, and copying the text loses the post metadata. Mastodon provides an official embed feature that generates an iframe code for any public post. This article explains how to locate the embed option, copy the HTML snippet, and customize the embed size for your site layout.
Key Takeaways: Embedding a Mastodon Post on a Website
- Post > … > Embed: Opens the embed dialog that generates the iframe code for the selected post.
- Copy the HTML code: Pastes the complete iframe snippet to your clipboard for insertion into your site source.
- Width and height attributes: Adjust the numeric values in the iframe tag to control the embed dimensions.
How Mastodon Post Embedding Works
Mastodon uses an iframe-based embed system. When you request an embed for a public post, the Mastodon server returns an HTML snippet that contains an iframe pointing to a dedicated embed page. That page renders the post content, author avatar, timestamp, and action buttons such as reply and boost. The iframe approach keeps the post interactive while isolating it from your site stylesheet.
The feature works on any Mastodon instance that supports the standard web interface. You do not need an API key or special permission. The post must be public. Posts set to followers-only or unlisted cannot be embedded on external sites.
Prerequisites for Embedding a Mastodon Post
Before you start, confirm the following conditions:
- The post you want to embed is public. Check the visibility icon next to the post timestamp. A globe icon indicates public visibility.
- You have access to the HTML source of your website. You need a content management system that accepts raw HTML, such as WordPress in Custom HTML block, or a static site editor.
- The Mastodon instance that hosts the post is reachable from your website visitors. Some corporate networks or countries block certain instances. If your audience cannot load the instance, the embed will show a broken iframe.
Steps to Embed a Mastodon Post on a Website
Follow these steps to generate and insert the embed code for any public Mastodon post.
- Open the Mastodon post in a web browser
Navigate to the post on the Mastodon instance where it was published. You can use the web interface or the post URL directly. The post must be fully loaded in your browser. - Click the three-dot menu on the post
Look for the three horizontal dots icon at the top right of the post. On mobile views, the icon may appear at the bottom of the post. Clicking it opens a drop-down menu. - Select the Embed option from the menu
In the drop-down menu, choose the Embed option. A dialog box appears showing a preview of the embed and the HTML code inside a text area. The code is an iframe tag with a src attribute pointing to the instance embed URL. - Copy the HTML code from the embed dialog
Click inside the text area to select the entire code snippet. Press Ctrl+C on Windows or Command+C on Mac to copy it. The code looks similar to this:<iframe src="https://mastodon.example.com/@username/123456/embed" class="mastodon-embed" style="max-width:100%;border:0" width="400" allowfullscreen="allowfullscreen"></iframe> - Paste the embed code into your website HTML
Open the editor for the page or post where you want the embed to appear. Insert a Custom HTML block in WordPress, or switch to source view in other editors. Paste the copied iframe tag at the desired location. Save or publish the page. - Adjust the embed width and height if needed
The default width is 400 pixels. Change the width attribute value to match your content area. For responsive layouts, remove the fixed width and use CSS. You can also wrap the iframe in a container with a max-width style.
Common Issues When Embedding Mastodon Posts
Embed Option Is Missing From the Post Menu
If the three-dot menu does not show the Embed option, the post visibility is not set to public. Check the post privacy setting. Only posts with the globe icon can be embedded. If you are the author, edit the post and change the visibility to public. If the post belongs to another user, you cannot change its visibility. Look for a different public post to embed.
Embedded Post Shows a Blank or Broken Iframe
A blank embed usually means the Mastodon instance is blocked by a content security policy on your website, or the instance is unreachable. Test the embed URL directly in a new browser tab. If the URL loads, the issue is with your site CSP headers. Add the instance domain to the frame-src directive in your server configuration. If the URL does not load, the instance may be down or blocked in your region.
Embedded Post Does Not Resize on Mobile Devices
The default embed code includes a fixed width attribute. On mobile screens, the embed may overflow the viewport. Replace the width attribute with a CSS class that sets max-width to 100 percent. Add the following style to your site stylesheet: .mastodon-embed { max-width: 100%; width: 100%; }. Alternatively, wrap the iframe in a div with the class responsive-embed and apply CSS padding-bottom to maintain aspect ratio.
Mastodon Embed vs Twitter Embed Comparison
| Item | Mastodon Embed | Twitter Embed |
|---|---|---|
| Embed method | Iframe snippet from post menu | JavaScript widget from publish.twitter.com |
| Privacy impact | No tracking scripts loaded | Twitter loads cookies and tracking |
| Customization | Width and height attributes only | Theme, language, and link color options |
| Dependency | Iframe loads from the Mastodon instance | JavaScript loads from Twitter servers |
You can now embed any public Mastodon post on your website using the built-in embed dialog. The iframe approach keeps the post interactive and does not rely on third-party scripts. For a responsive layout, always override the fixed width with CSS. If you manage a multi-author site, consider adding a custom post meta box to store the embed URL and automate the iframe generation.