Social Media Embeds in Astro
social media

Social Media Embeds in Astro

Jan 25, 2024
· STRUKTURIERTES LERNEN ·

Social Media Embeds in Astro

Astro makes it easy to embed social media posts directly in your markdown content. Here’s how to use Instagram and X (Twitter) embeds.

Instagram Embeds

Simply paste an Instagram post URL in your markdown, and it will automatically be converted to an embedded post:

View this post on Instagram

Copy and Paste from Instagram … embed

View this post on Instagram

A post shared by ai.boring-cow (@ai.boringcow)

The embed will show the full Instagram post with likes, comments, and the original caption.

X (Twitter) Embeds

For X posts, just paste the URL:

Or using the new x.com domain:

Multiple Embeds

You can include multiple social media posts in the same article:

How It Works

The custom remark plugin automatically detects social media URLs and converts them to embedded components. No additional markup needed!

Benefits

  • Automatic detection: Just paste URLs
  • Responsive design: Works on all devices
  • Consistent styling: Matches your blog theme
  • Performance optimized: Loads embeds efficiently

Supported Platforms

  • ✅ Instagram posts
  • ✅ X (Twitter) posts
  • ✅ Both old twitter.com and new x.com domains

Try it out by adding your own social media URLs to your blog posts!