CSS-Tricks
oEmbed Bring Embedded Pens All Over
oEmbed is a neat little technology that allows for rich content to be embedded into other content very easily. You paste a link to the "thing" and, when published, that link magically transforms into something much more useful than a link. A quintessential example is a link to a YouTube video. Just drop the URL to a video in a blog post, and it will transform into an embedded version of that video. Flickr URL... turns into an embedded photo.
CodePen supports oEmbed as well, which means you can put Embedded Pens in some interesting places right now, and enabling your site to allow them is pretty easy as well.
I mention this here, because it works great right here on CSS-Tricks!
Embedded Pens in the Forums
We encourage you to post Pens of issues in the forums anyway, because that's 100 times easier to play with and diagnose than trying to just look at code and imagine it.
Embedded Pen in the Comments
Right here in the blog, works the exact same way.
Why use oEmbed?
Of course, it's easy. But there is more than that. With oEmbed, you are whitelisting places you allow embedded rich content from. It's a trust thing.
CodePen embeds require JavaScript to work. That sounds anti-progressive-enhancement, but it's actually the opposite. By requiring JavaScript, we can take a perfectly good bit of content (a sentence explaining the title, author, and info about a Pen) and transform it into an <iframe> embed experience. So without JavaScript, the content still "works" and makes sense. With JavaScript, it's better. An <iframe> alone would just break in a no-JS environment (for us).
So, because we need need that <script> for our embeds to work, that limits where they can be used. Most sites don't allow you to just to execute whatever <script> you put on them. That would be highly irresponsible and a major security flaw (XSS). With oEmbed, you can allow that <script> through only for trusted sources. Pretty cool way to handle it, I think.
How it Works
oEmbed works by:
- Detecting URLs that match one of the whitelisted URL formats any particular site supports
- Makes a request to that sites oEmbed API, passing along that URL
- The API returns HTML the site uses to embed that "rich content"
You can see more about the CodePen oEmbed API here, including our API endpoint and what we return.
Enabling oEmbed on your WordPress site
It's basically one line of code to enabled it on a self-hosted WordPress site, but you might as well make use a plugin because that's what they are for. Then to make it work in comments (and bbPress), there is another plugin.
Iframely supports CodePen, and 900+ other domains embedded content, so that's an option too.
If you use Jetpack, support is coming soon to that.
But remember, if you are just embedding Pens into blog posts and stuff you don't need oEmbed at all. You can use our embed code, which means you can adjust heights and change themes and stuff, which is more powerful.
Discourse supports CodePen oEmbed
Discourse, as in the excellent forum software.
WordPress.com supports CodePen oEmbed
Thanks to Joey Kudish and the WordPress.com for getting Embedded Pens working there!
Lemme know if you end up using it in a cool way.
A major reason we started building CodePen at all was because showing snippets of code alone pales in comparison to seeing that code actually running, and this makes it easier to bring those running bits of code to the same types of places that used to be limited to snippets.
oEmbed Bring Embedded Pens All Over is a post from CSS-Tricks
Keine Kommentare:
Kommentar veröffentlichen