A presentation at PHPSW Lightning Talks in in Bristol, UK by Drew McLellan
PHPSW UNDERSTANDING OEMBED @drewm
?
https://www.flickr.com/photos/drewm/8161053138 <a data-flickr-embed=”true” data-header=”true” datafooter=”true” href=”https://www.flickr.com/photos/drewm/ 8161053138/stats/” title=”Untitled”><img src=”https:// live.staticflickr.com/7246/8161053138_50c128ffb8_k.jpg” width=”2048” height=”1365” alt=”Untitled”></a><script async src=”//embedr.flickr.com/assets/client-code.js” charset=”utf-8”></script>
OEMBED TURNING URLS INTO EMBED CODE SINCE 2009
UNDERSTANDING OEMBED A BRIEF HISTORY ▸ Created by Leah Culver, Cal Henderson, Mike Malone, Richard Crowley ▸ Leah & Mike were building Pownce, Cal was building Flickr ▸ Needed a way to turn URLs into embed code
UNDERSTANDING OEMBED TURNING A URL INTO EMBED CODE ▸ Fetch the URL. It’s an HTML page. ▸ Discover meta data in the head ▸ Make a request to the API endpoint ▸ Get a JSON structure describing the content
OEMBED ALSO SUPPORTS XML BUT WE’RE NOT ANIMALS.
{ “type”: “rich”, “version”: “1.0”, “title”: “Measuring Performance with Server Timing”, “author_name”: “Drew McLellan”, “author_url”: “https://noti.st/drewm”, “provider_name”: “Notist”, “provider_url”: “https://noti.st”, “cache_age”: 604800, “thumbnail_url”: “https://on.notist.cloud/slides/deck1873/large-0.png”, “thumbnail_width”: 1600, “thumbnail_height”: 900, “html”: “<p data-notist=”drewm/63SYZl”>View <a href=”https://noti.st/ drewm/63SYZl”>Measuring Performance with Server Timing</a> on Notist.</ p><script async src=”https://on.notist.cloud/embed/002.js”></script>”, “width”: 960, “height”: 540 }
{ “type”: “rich”, “version”: “1.0”, “title”: “Measuring Performance with Server Timing”, “author_name”: “Drew McLellan”, “author_url”: “https://noti.st/drewm”, “provider_name”: “Notist”, “provider_url”: “https://noti.st”, “cache_age”: 604800, “thumbnail_url”: “https://on.notist.cloud/slides/deck1873/large-0.png”, “thumbnail_width”: 1600, “thumbnail_height”: 900, “html”: “<p data-notist=”drewm/63SYZl”>View <a href=”https://noti.st/ drewm/63SYZl”>Measuring Performance with Server Timing</a> on Notist.</ p><script async src=”https://on.notist.cloud/embed/002.js”></script>”, “width”: 960, “height”: 540 }
GENIUS!
UNDERSTANDING OEMBED EMBED/EMBED BY OSCAR OTERO ▸ Lets oEmbed do the heavy lifting ▸ Also has adapters for OpenGraph, Twitter cards, HTML scraping ▸ Give it a URL and it figures out the best method ▸ Returns a unified interface
BECOMING A PROVIDER
UNDERSTANDING OEMBED BECOMING AN OEMBED PROVIDER ▸ Have some embed code for your content ▸ Create the API endpoint ▸ Should accept url and format arguments ▸ Should return JSON (or XML you monster) ▸ Should include the embed code and description of content ▸ Add a link to the head of your content page
ALL THIS AND MORE AT OEMBED.COM
THANKS! @drewm https://noti.st/drewm/ZOFFfI
A quick overview of oEmbed, what it is, what makes it useful, and how you can consume and produce it in your own applications.
The following resources were mentioned during the presentation or are useful additional information.
Here’s what was said about this presentation on social media.
