Social media embeds

[jbmoelker]

User story

As a content editor,
I want to embed content from social media,
so that I can easily enrich a web page with external content.

Possible solution

Use oembed, an open format designed to allow embedding content from a website into another page. OEmbed is supported by many providers (also available as npm package). An OEmbed endpoint returns HTML that can be embedded for a given resource URL (like a URL of a tweet on Twitter).

Example OEmbed usage by astro-embed-twitter:

---
import './Tweet.css';

export interface Props {
	id: string;
}
const { id } = Astro.props;

async function fetchTweet(id: string) {
	try {
		const oembedUrl = new URL('https://publish.twitter.com/oembed');
		oembedUrl.searchParams.set('url', id);
		oembedUrl.searchParams.set('omit_script', 'true');
		oembedUrl.searchParams.set('dnt', 'true');
		return (await fetch(oembedUrl).then((res) => res.json())) as {
			url: string;
			author_name: string;
			author_url: string;
			html: string;
		};
	} catch (e) {
		console.error(
			`[error]  astro-embed
         ${e.status} - ${e.statusText}: Failed to fetch tweet ${id}`
		);
	}
}

const tweet = await fetchTweet(id);
---

{tweet && <astro-embed-tweet set:html={tweet.html} />}

References

• Embeds in Wordpress
• Iframely

Questions?

• Generic embed or only for specific services like Twitter and Instagram? (each provider will need it's own bit of CSS)
• Should we create a DatoCMS plugin that fetches the OEmbed data when editors enter a URL (prior art), rather than doing this during build- or run-time? Update: 🚧 https://github.com/voorhoede/datocms-plugin-oembed