Embed Cards

Embeds are a great feature of the Web that lets you include third-party content into your posts. Think YouTube videos, Google Maps, and more! All you have to do is copy and paste the embed code from the provider's website.

Searching for embed code can be tiresome, though. Each provider has their own way of exposing the code, so users are left to hunt for it. Wouldn't it be better if you could just copy the URL from the top of your browser and paste it into your post?

It sure would, and that's why many providers use a protocol called oEmbed that let's you do just that. In fact, Postleaf has supported many oEmbed providers since the first day it was released.


Unfortunately, not all providers support oEmbed and, until today, pasting unsupported URLs would result with, well, an ugly URL showing up in your post. Yuck. In the latest version of Postleaf, I introduced a feature called Embed Cards that solves this problem.

When you paste a URL into the editor, Postleaf will search for an oEmbed provider. If one is found, the appropriate embed code will be used. If not, Postleaf will generate an embed card instead.

They look like this:

Of course, embed cards are completely customizable. Just update your theme's stylesheet to change their appearance!

If you're wondering how Postleaf generates these, look no further than the metaphor library. This module optimistically grabs as much data as possible from the target URL, looking for OpenGraph data, Twitter Card data, and more.

The result is a beautiful embed card that takes visitors right to the webpage you intended, often with an informative preview of what they're about to see.

And all you have to do is paste in a URL.