Understanding oEmbed

A presentation at PHPSW Lightning Talks in November 2019 in Bristol, UK by Drew McLellan

Slide 1

Slide 1

PHPSW UNDERSTANDING OEMBED @drewm

Slide 2

Slide 2

Slide 3

Slide 3

Slide 4

Slide 4

Slide 5

Slide 5

Slide 6

Slide 6

?

Slide 7

Slide 7

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>

Slide 8

Slide 8

OEMBED TURNING URLS INTO EMBED CODE SINCE 2009

Slide 9

Slide 9

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

Slide 10

Slide 10

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

Slide 11

Slide 11

<link rel=”alternate” type=”application/json+oembed” href=”/api/oembed? url=https%3A%2F%2Fnoti.st%2Fdrewm%2F63SYZl&amp;format=json” title=”Measuring Performance with Server Timing”>

Slide 12

Slide 12

OEMBED ALSO SUPPORTS XML BUT WE’RE NOT ANIMALS.

Slide 13

Slide 13

{ “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 }

Slide 14

Slide 14

{ “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 }

Slide 15

Slide 15

GENIUS!

Slide 16

Slide 16

Slide 17

Slide 17

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

Slide 18

Slide 18

<?php use Embed\Embed; //Load any url: $info = Embed::create(‘https://noti.st/drewm/63SYZl’); $info->title; //The page title $info->description; //The page description $info->url; //The canonical url $info->code; //The code to embed the image, video, etc $info->width; //The width of the embed code $info->height; //The height of the embed code $info->aspectRatio; //The aspect ratio (width/height)

Slide 19

Slide 19

<?php use Embed\Embed; //Load any url: $info = Embed::create(‘https://noti.st/drewm/63SYZl’); $info->title; //The page title $info->description; //The page description $info->url; //The canonical url $info->code; //The code to embed the image, video, etc $info->width; //The width of the embed code $info->height; //The height of the embed code $info->aspectRatio; //The aspect ratio (width/height)

Slide 20

Slide 20

BECOMING A PROVIDER

Slide 21

Slide 21

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

Slide 22

Slide 22

ALL THIS AND MORE AT OEMBED.COM

Slide 23

Slide 23

THANKS! @drewm https://noti.st/drewm/ZOFFfI