Bluesky, the decentralized social network built on the AT Protocol, allows you to share individual posts outside the platform. Embedding a Bluesky post on your website or blog lets visitors view the content, replies, and engagement directly on your page. This feature works for any public post, whether it is your own or from another user. In this article, you will learn how to generate the embed code for a Bluesky post and add it to your site using standard HTML or a CMS like WordPress.
Key Takeaways: Embedding a Bluesky Post on Your Website
- Bluesky web app > Post menu > Embed post: Generates the HTML code for any public post.
- Pasting the embed code into a website CMS or HTML editor: Displays the post with author info, text, and media.
- Responsive design: The embed automatically adjusts to fit mobile and desktop screens without extra CSS.
What the Bluesky Embed Feature Does
Bluesky provides an official embed option for every public post. When you embed a post, you are inserting an interactive iframe that displays the full post content, including text, images, links, and embedded media. The embed also shows the post author’s display name, handle, and avatar. Replies and quote posts are not embedded; only the original post appears. This feature works on any website that supports HTML iframes, including WordPress, Squarespace, Wix, and static HTML sites. No API key or developer account is required. The embed code is generated directly from the Bluesky web app.
Requirements Before You Start
You need the URL of the public Bluesky post you want to embed. You can find this URL by opening the post in a desktop browser and copying the link from the address bar. The post must be from a public account; posts from private accounts cannot be embedded. Your website must support HTML iframes. Most modern content management systems allow iframe tags in the HTML editor or through a custom HTML block. If your CMS strips iframe tags, you may need a plugin or a code block that preserves raw HTML.
Steps to Embed a Bluesky Post on a Website
- Open the Bluesky post in a desktop browser
Go to the Bluesky web app at bsky.app and sign in. Navigate to the post you want to embed. Click the post to open its dedicated page if you are viewing it in a feed. The URL in the address bar now ends with the post ID, for example:https://bsky.app/profile/username.bsky.social/post/3abc123. - Open the post menu and select Embed post
On the post page, click the three-dot menu icon located in the top-right corner of the post. From the dropdown menu, select Embed post. A dialog box appears containing the HTML embed code. - Copy the embed code
In the dialog box, the embed code is displayed in a text area. Click the Copy code button or manually select the entire HTML snippet and press Ctrl+C on Windows or Command+C on Mac. The code looks like this:<blockquote class="bluesky-embed" ...>followed by a script tag. - Paste the code into your website editor
Open the page or post editor in your website CMS. Switch to the HTML or code editing view. In WordPress, use the Custom HTML block or the Text editor. In Squarespace, add a Code block. Paste the copied embed code where you want the post to appear. - Save and preview the page
Save or publish the page. Visit the live page to verify that the embed displays correctly. The post should appear with a light gray background, the author’s avatar, and interactive elements such as reply, repost, and like counts. The embed is responsive and resizes automatically on different screen sizes.
Common Issues When Embedding Bluesky Posts
The embed does not appear on the page
If the embed shows a blank space or an error, your CMS may be blocking the iframe or script. Check that your CMS allows JavaScript in embed blocks. In WordPress, ensure you are using the Custom HTML block rather than the Paragraph block. Some security plugins like Wordfence may block external scripts. Add the Bluesky domain to the allowed script sources in your plugin settings.
The embed shows the post but the layout is broken
This usually happens when your site’s CSS conflicts with the embed styles. The Bluesky embed uses a blockquote element with the class bluesky-embed. If your theme applies global styles to blockquote elements, the embed may look misaligned. Add the following CSS to your theme’s custom styles to reset the blockquote styling for embeds: .bluesky-embed { all: revert; }. This preserves the default embed appearance.
The embed code is missing the script tag
The embed code consists of a blockquote and a script tag. If you copy only the blockquote, the embed will not render. Always copy the entire snippet from the dialog box. If you are using a CMS that strips script tags, you need a plugin that allows custom JavaScript. For WordPress, the Insert Headers and Footers plugin lets you add the Bluesky embed script to the site footer. Alternatively, you can manually add the script tag to your theme’s footer.php file.
Bluesky Embed vs Manual Iframe Method
| Item | Bluesky Embed Code | Manual Iframe |
|---|---|---|
| Ease of use | One-click copy from Bluesky UI | Requires manual construction of iframe URL and parameters |
| Responsiveness | Automatically responsive | Must set width and height manually |
| Interactive elements | Shows reply, repost, and like counts | Shows only the post content without interaction data |
| Script dependency | Requires loading an external JS file | No external scripts needed |
The Bluesky embed method is the recommended approach because it handles styling, responsiveness, and interactivity out of the box. The manual iframe method is only useful if your CMS blocks external scripts and you need a static preview of the post.
Conclusion
You can now embed any public Bluesky post on your website using the built-in embed feature. The process takes less than a minute: open the post, copy the code from the Embed post dialog, and paste it into your site’s HTML editor. If you use WordPress, the Custom HTML block is the safest place to insert the code. For advanced users, the .bluesky-embed CSS class can be targeted to adjust spacing or borders without breaking the embed layout. Try embedding a post with multiple images to see how the gallery carousel behaves inside the embed.