Embed Size (px)
Citation preview
oEmbedby Michael Nordmeyer (@mnordmeyer)
for BarCamp London 7
What is oEmbed?
Why oEmbed?
To This…
<object width="425" height="344"><param name="movie" value="http://www.youtube.com/v/rKuIg_3OmAI&hl=en&fs=1&"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/rKuIg_3OmAI&hl=en&fs=1&" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="425" height="344"></embed></object>
Is it Complicated?
Request
http://www.flickr.com/services/oembed/?url=http%3A//www.flickr.com/photos/coffeemick/3393401816/
Response (JSON)
{ "version": "1.0", "type": "photo", "title": "Session Board Saturday", "author_name": "coffeemick", "author_url": "http:\/\/www.flickr.com\/photos\/coffeemick\/", "cache_age": 3600, "provider_name": "Flickr", "provider_url": "http:\/\/www.flickr.com\/", "width": "500", "height": "375", "url": "http:\/\/farm4.static.flickr.com\/3421\/3393401816_7166959b90.jpg"}
Response (XML)<?xml version="1.0" encoding="utf-8" standalone="yes"?><oembed>
<version>1.0</version><type>photo</type><title>Session Board Saturday</title><author_name>coffeemick</author_name><author_url>http://www.flickr.com/photos/coffeemick/</author_url><cache_age>3600</cache_age><provider_name>Flickr</provider_name><provider_url>http://www.flickr.com/</provider_url><width>500</width><height>375</height><url>http://farm4.static.flickr.com/3421/3393401816_7166959b90.jpg</url>
</oembed>
Response (JSON){ "provider_url": "http://www.youtube.com/", "title": "Waiting for Barcamp London 6 to open doors", "html": "<object width=\"425\" height=\"344\"><param name=\"movie\" value=\"http://www.youtube.com/v/rKuIg_3OmAI&fs=1\"></param><param name=\"allowFullScreen\" value=\"true\"></param><param name=\"allowscriptaccess\" value=\"always\"></param><embed src=\"http://www.youtube.com/v/rKuIg_3OmAI&fs=1\" type=\"application/x-shockwave-flash\" width=\"425\" height=\"344\" allowscriptaccess=\"always\" allowfullscreen=\"true\"></embed></object>", "author_name": "13stock", "height": 344, "width": 425, "version": "1.0", "author_url": "http://www.youtube.com/user/13stock", "provider_name": "YouTube", "type": "video"}
Consumers & Providers
Consumers
✓ WordPress 2.9-rare
✓ 280 Slides
✓ Dumble (creating a tumblelog from a user's delicious links)
✓ You
Providers
✓ Flickr
✓ Youtube
✓ Vimeo
✓ Viddler
✓ Hulu
✓ Revision3
✓ Qik
✓ Clearspring Widgets
✓ oohEmbed (28 Sites)
✓ …
What Does the Consumer
Has to Do?
Consumer
•Internal Handler
Consumer
•Internal Handler
•Known API Provider
Consumer
•Internal Handler
•Known API Provider
•oEmbed discovery <link> tag in the <head>
What Does the Provider
Has to Do?
Provider
• URL scheme: http://www.flickr.com/photos/*
• API XML endpoint: http://www.flickr.com/services/oembed.xml
Provider
• URL scheme: http://www.flickr.com/photos/*
• API XML endpoint: http://www.flickr.com/services/oembed.xml
• API JSON endpoint: http://www.flickr.com/services/oembed.json
Discovery
Discovery
<link rel="alternate" type="application/json+oembed" href="http://www.youtube.com/oembed?url=http%3A//www.youtube.com/watch?v%3DrKuIg_3OmAI&format=json" title="Waiting for Barcamp London 6 to open doors" />
<link rel="alternate" type="text/xml+oembed" href="http://www.youtube.com/oembed?url=http%3A//www.youtube.com/watch?v%3DrKuIg_3OmAI&format=xml" title="Waiting for Barcamp London 6 to open doors" />
Content Types
Content Types
•Photo
•Video
•Link
•Rich
WordPress
Plain Text URL
http://www.youtube.com/watch?v=rKuIg_3OmAI
Shortcode
[youtube=http://www.youtube.com/watch?v=rKuIg_3OmAI]
Shortcode
[youtube=http://www.youtube.com/watch?v=rKuIg_3OmAI&w=480&h=360&fmt=18]
YouTube Settings
Where in WordPress?
“Settings » Media » Embeds”
Libraries
•Perl
• PHP
•Python
•Ruby
Links
•https://speakerdeck.com/michaelnordmeyer
•https://michaelnordmeyer.com/
•https://twitter.com/mnordmeyer
•http://oembed.com/
Thanks
