oembed wordcamp 2009 montreal
DESCRIPTION
Presentation of the NFB oEmbed plugin for wordpress and why oEmbed is important for content bloggers.TRANSCRIPT
![Page 1: Oembed Wordcamp 2009 Montreal](https://reader038.vdocuments.mx/reader038/viewer/2022110308/5578c70bd8b42a85538b4f69/html5/thumbnails/1.jpg)
An Easier Way to Embed Video in Your
Blogor how oEmbed can help you keep your
sanity by Stephane Jolicoeur and Audrey Savard
ONF-NFB
![Page 2: Oembed Wordcamp 2009 Montreal](https://reader038.vdocuments.mx/reader038/viewer/2022110308/5578c70bd8b42a85538b4f69/html5/thumbnails/2.jpg)
Who are we?
![Page 3: Oembed Wordcamp 2009 Montreal](https://reader038.vdocuments.mx/reader038/viewer/2022110308/5578c70bd8b42a85538b4f69/html5/thumbnails/3.jpg)
The NFB
![Page 4: Oembed Wordcamp 2009 Montreal](https://reader038.vdocuments.mx/reader038/viewer/2022110308/5578c70bd8b42a85538b4f69/html5/thumbnails/4.jpg)
NFB.ca : film streaming
![Page 5: Oembed Wordcamp 2009 Montreal](https://reader038.vdocuments.mx/reader038/viewer/2022110308/5578c70bd8b42a85538b4f69/html5/thumbnails/5.jpg)
http://www.nfb.ca/film/runaway_teaser_3/
![Page 6: Oembed Wordcamp 2009 Montreal](https://reader038.vdocuments.mx/reader038/viewer/2022110308/5578c70bd8b42a85538b4f69/html5/thumbnails/6.jpg)
The Problem
![Page 7: Oembed Wordcamp 2009 Montreal](https://reader038.vdocuments.mx/reader038/viewer/2022110308/5578c70bd8b42a85538b4f69/html5/thumbnails/7.jpg)
the insanity of embedding
content
![Page 8: Oembed Wordcamp 2009 Montreal](https://reader038.vdocuments.mx/reader038/viewer/2022110308/5578c70bd8b42a85538b4f69/html5/thumbnails/8.jpg)
you have a design to keep
![Page 9: Oembed Wordcamp 2009 Montreal](https://reader038.vdocuments.mx/reader038/viewer/2022110308/5578c70bd8b42a85538b4f69/html5/thumbnails/9.jpg)
deformed webpage or blog post because of an embedded film, picture or link is not acceptable
![Page 10: Oembed Wordcamp 2009 Montreal](https://reader038.vdocuments.mx/reader038/viewer/2022110308/5578c70bd8b42a85538b4f69/html5/thumbnails/10.jpg)
![Page 11: Oembed Wordcamp 2009 Montreal](https://reader038.vdocuments.mx/reader038/viewer/2022110308/5578c70bd8b42a85538b4f69/html5/thumbnails/11.jpg)
Let’s face it, embed code is strange!
![Page 12: Oembed Wordcamp 2009 Montreal](https://reader038.vdocuments.mx/reader038/viewer/2022110308/5578c70bd8b42a85538b4f69/html5/thumbnails/12.jpg)
CASE in POINT : EMBED CODE
<embed src="http://media1.nfb.ca/medias/flash/ONFflvplayer-gama.swf" width="516" height="337" allowfullscreen="true" allowscriptaccess="always" autostart="false" autoplay="false" flashvars="mID=IDOBJ3521&bufferTime=10&width=516&height=337&image=http://media1.nfb.ca/medias/nfb_tube/thumbs_large/2009/70ans-tvbig.jpg&autostart=false&autoplay=false&showWarningMessages=false&streamNotFoundDelay=15&lang=en&getPlaylistOnEnd=true&playlist_id=REL3521&embeddedMode=true"></embed>
![Page 13: Oembed Wordcamp 2009 Montreal](https://reader038.vdocuments.mx/reader038/viewer/2022110308/5578c70bd8b42a85538b4f69/html5/thumbnails/13.jpg)
Error prone
The result :
![Page 14: Oembed Wordcamp 2009 Montreal](https://reader038.vdocuments.mx/reader038/viewer/2022110308/5578c70bd8b42a85538b4f69/html5/thumbnails/14.jpg)
• ugly embed code in your blog posts when you edit posts.
• changes are error prone for HTML novices.
• the HTML code can be parsed by the wp tag filters and be crippled or not even shown!
![Page 15: Oembed Wordcamp 2009 Montreal](https://reader038.vdocuments.mx/reader038/viewer/2022110308/5578c70bd8b42a85538b4f69/html5/thumbnails/15.jpg)
One needs to do a lot of leg work - get the title, author, etc when one wants to quote properly.
![Page 16: Oembed Wordcamp 2009 Montreal](https://reader038.vdocuments.mx/reader038/viewer/2022110308/5578c70bd8b42a85538b4f69/html5/thumbnails/16.jpg)
There is a solution
![Page 17: Oembed Wordcamp 2009 Montreal](https://reader038.vdocuments.mx/reader038/viewer/2022110308/5578c70bd8b42a85538b4f69/html5/thumbnails/17.jpg)
the ideal would be :
http://www.nfb.ca/film/strange_invaders/
![Page 18: Oembed Wordcamp 2009 Montreal](https://reader038.vdocuments.mx/reader038/viewer/2022110308/5578c70bd8b42a85538b4f69/html5/thumbnails/18.jpg)
Let the machines do the hard work
![Page 19: Oembed Wordcamp 2009 Montreal](https://reader038.vdocuments.mx/reader038/viewer/2022110308/5578c70bd8b42a85538b4f69/html5/thumbnails/19.jpg)
• it was created by pownce -- it's magic, almost...
• it is an exchange format for media, links and more...
![Page 20: Oembed Wordcamp 2009 Montreal](https://reader038.vdocuments.mx/reader038/viewer/2022110308/5578c70bd8b42a85538b4f69/html5/thumbnails/20.jpg)
less hacking gives you more time to
create content
![Page 21: Oembed Wordcamp 2009 Montreal](https://reader038.vdocuments.mx/reader038/viewer/2022110308/5578c70bd8b42a85538b4f69/html5/thumbnails/21.jpg)
•help your seo with easy linking to the original site
•prevent typos when quoting the source
![Page 22: Oembed Wordcamp 2009 Montreal](https://reader038.vdocuments.mx/reader038/viewer/2022110308/5578c70bd8b42a85538b4f69/html5/thumbnails/22.jpg)
IT IS ...
![Page 23: Oembed Wordcamp 2009 Montreal](https://reader038.vdocuments.mx/reader038/viewer/2022110308/5578c70bd8b42a85538b4f69/html5/thumbnails/23.jpg)
oEmbed
![Page 24: Oembed Wordcamp 2009 Montreal](https://reader038.vdocuments.mx/reader038/viewer/2022110308/5578c70bd8b42a85538b4f69/html5/thumbnails/24.jpg)
an oEmbed link
http://www.nfb.ca/film/strange_invaders/
![Page 25: Oembed Wordcamp 2009 Montreal](https://reader038.vdocuments.mx/reader038/viewer/2022110308/5578c70bd8b42a85538b4f69/html5/thumbnails/25.jpg)
And because we maintain many blogs ... we cooked up a plugin.
![Page 26: Oembed Wordcamp 2009 Montreal](https://reader038.vdocuments.mx/reader038/viewer/2022110308/5578c70bd8b42a85538b4f69/html5/thumbnails/26.jpg)
Your embeding on oEmbed
• copy the url of the content page : http://www.nfb.ca/film/runaway_teaser_3/
• paste it in your blog post
• et voilà! -- after you’ve installed our plugin, of course ...
![Page 27: Oembed Wordcamp 2009 Montreal](https://reader038.vdocuments.mx/reader038/viewer/2022110308/5578c70bd8b42a85538b4f69/html5/thumbnails/27.jpg)
No more embed madness
![Page 28: Oembed Wordcamp 2009 Montreal](https://reader038.vdocuments.mx/reader038/viewer/2022110308/5578c70bd8b42a85538b4f69/html5/thumbnails/28.jpg)
Make this easy :
![Page 29: Oembed Wordcamp 2009 Montreal](https://reader038.vdocuments.mx/reader038/viewer/2022110308/5578c70bd8b42a85538b4f69/html5/thumbnails/29.jpg)
What is oEmbed
• it’s an exchange format ( meaning machines do the hard work )
• with providers and consumers
• made for media, links or rich content.
• Magical when implemented fully : discovery aspect
![Page 30: Oembed Wordcamp 2009 Montreal](https://reader038.vdocuments.mx/reader038/viewer/2022110308/5578c70bd8b42a85538b4f69/html5/thumbnails/30.jpg)
An automated exchange between :
• Providers :• a streaming site (ie : nfb.ca )• photo site (ie flickr.com)• ...
and• Consumers :
• a blog site• a mashup • ...
![Page 31: Oembed Wordcamp 2009 Montreal](https://reader038.vdocuments.mx/reader038/viewer/2022110308/5578c70bd8b42a85538b4f69/html5/thumbnails/31.jpg)
What do the machines speak ?
JSON
or
XML
![Page 32: Oembed Wordcamp 2009 Montreal](https://reader038.vdocuments.mx/reader038/viewer/2022110308/5578c70bd8b42a85538b4f69/html5/thumbnails/32.jpg)
What is exchanged ?
• Author information
• provider information
• thumbnail link
• content type
• dimension information
• html code to do the embedding
![Page 33: Oembed Wordcamp 2009 Montreal](https://reader038.vdocuments.mx/reader038/viewer/2022110308/5578c70bd8b42a85538b4f69/html5/thumbnails/33.jpg)
What is this “discovery”
• information is in the headers
• no prior knowledge required
![Page 34: Oembed Wordcamp 2009 Montreal](https://reader038.vdocuments.mx/reader038/viewer/2022110308/5578c70bd8b42a85538b4f69/html5/thumbnails/34.jpg)
Discovery links :
<head> (...)
<link rel="alternate" type="application/json+oembed" href="http://www.nfb.ca/remote/services/oembed/?url=http%3A//www.nfb.ca/film/runaway_teaser_3/&format=json" title="Runaway (Teaser 3) " />
<link rel="alternate" type="text/xml+oembed" href="http://www.nfb.ca/remote/services/oembed/?url=http%3A//www.nfb.ca/film/runaway_teaser_3/&format=xml" title="Runaway (Teaser 3) " />
(...) </head>
![Page 35: Oembed Wordcamp 2009 Montreal](https://reader038.vdocuments.mx/reader038/viewer/2022110308/5578c70bd8b42a85538b4f69/html5/thumbnails/35.jpg)
what the machine sees : (JSON ){"provider_url": "http:\/\/www.nfb.ca\/", "title": "Runaway (Teaser 3) ", "url": "http:\/\/www.nfb.ca\/film\/runaway_teaser_3\/", "html": "<object type=\"application\/x-shockwave-flash\" classid=\"clsid:D27CDB6E-AE6D-11cf-96B8-444553540000\" id=\"ONFflvplayer-gama\" height=\"337\" width=\"518\"><param name=movie value=\"http:\/\/media1.nfb.ca\/medias\/flash\/ONFflvplayer-gama.swf\"><param name=quality value=high><param name=allowfullscreen value=\"true\"><param name=allowscriptaccess value=\"always\"><param name=autostart value=\"false\"><param name=flashvars value=\"mID=IDOBJ5811&image=http:\/\/media1.nfb.ca\/medias\/nfb_tube\/thumbs_large\/2009\/Runaway_TeaserAV5_BIG.jpg&width=516&height=337&autostart=false&showWarningMessages=false&streamNotFoundDelay=15&lang=en&getPlaylistOnEnd=true&embeddedMode=true\"><embed src=\"http:\/\/media1.nfb.ca\/medias\/flash\/ONFflvplayer-gama.swf\" height=\"337\" width=\"518\" allowscriptaccess=\"always\" allowfullscreen=\"true\" autostart=\"false\" flashvars=\"mID=IDOBJ5811&image=http:\/\/media1.nfb.ca\/medias\/nfb_tube\/thumbs_large\/2009\/Runaway_TeaserAV5_BIG.jpg&width=516&height=337&autostart=false&showWarningMessages=false&streamNotFoundDelay=15&lang=en&getPlaylistOnEnd=true&embeddedMode=true\" name=\"ONFflvplayer-gama\"><\/embed><\/object>", "author_name": "Cordell Barker", "height": 337, "width": 518, "version": "1.0", "thumbnail_width": 204, "provider_name": "National Film Board of Canada \/ Office Nationale du Film du Canada", "thumbnail_url": "http:\/\/media1.nfb.ca\/medias\/nfb_tube\/thumbs_small\/2009\/Runaway_TeaserAV5_small.jpg", "type": "video", "thumbnail_height": 115}
![Page 36: Oembed Wordcamp 2009 Montreal](https://reader038.vdocuments.mx/reader038/viewer/2022110308/5578c70bd8b42a85538b4f69/html5/thumbnails/36.jpg)
Who uses it?
![Page 37: Oembed Wordcamp 2009 Montreal](https://reader038.vdocuments.mx/reader038/viewer/2022110308/5578c70bd8b42a85538b4f69/html5/thumbnails/37.jpg)
Some Providers
![Page 38: Oembed Wordcamp 2009 Montreal](https://reader038.vdocuments.mx/reader038/viewer/2022110308/5578c70bd8b42a85538b4f69/html5/thumbnails/38.jpg)
Some consumers
• the NFB (http://www.nfb.ca/)
• Buckybase (http://buckybase.appspot.com/)
• 280 Slides (http://280slides.com/)
• Dumble (http://oohembed.com/dumble/)
• YOU !
![Page 39: Oembed Wordcamp 2009 Montreal](https://reader038.vdocuments.mx/reader038/viewer/2022110308/5578c70bd8b42a85538b4f69/html5/thumbnails/39.jpg)
What can it do for blogging
• makes your life easier
• clean posts - no ugly html lurking into your pristine text
• better SEO
![Page 40: Oembed Wordcamp 2009 Montreal](https://reader038.vdocuments.mx/reader038/viewer/2022110308/5578c70bd8b42a85538b4f69/html5/thumbnails/40.jpg)
What you need to know about our plugin
• it's beta ... but in production
• partial support for the fullspecs
![Page 41: Oembed Wordcamp 2009 Montreal](https://reader038.vdocuments.mx/reader038/viewer/2022110308/5578c70bd8b42a85538b4f69/html5/thumbnails/41.jpg)
live demo
![Page 42: Oembed Wordcamp 2009 Montreal](https://reader038.vdocuments.mx/reader038/viewer/2022110308/5578c70bd8b42a85538b4f69/html5/thumbnails/42.jpg)
Where to get it
• http://wordpress.org/extend/plugins/nfb-video-plugin/
• https://launchpad.net/oembed-wp
![Page 43: Oembed Wordcamp 2009 Montreal](https://reader038.vdocuments.mx/reader038/viewer/2022110308/5578c70bd8b42a85538b4f69/html5/thumbnails/43.jpg)
The end
• we're open for suggestions for the next release
![Page 44: Oembed Wordcamp 2009 Montreal](https://reader038.vdocuments.mx/reader038/viewer/2022110308/5578c70bd8b42a85538b4f69/html5/thumbnails/44.jpg)
Ressources
• oEmbed google group : http://groups.google.com/group/oembed
• oEmbed site : http://www.oembed.com/
• Tutorial : http://www.webmonkey.com/tutorial/Get_Started_With_OEmbed
![Page 45: Oembed Wordcamp 2009 Montreal](https://reader038.vdocuments.mx/reader038/viewer/2022110308/5578c70bd8b42a85538b4f69/html5/thumbnails/45.jpg)
Contact info
• Stephane Jolicoeur : @sjolicoeur | [email protected]
• Audrey Savard : @arvanhalleorg | [email protected]
• @thenfb | @onf
![Page 46: Oembed Wordcamp 2009 Montreal](https://reader038.vdocuments.mx/reader038/viewer/2022110308/5578c70bd8b42a85538b4f69/html5/thumbnails/46.jpg)
Any WordPress theme builders ?
We are looking for wordpress themes
gurus wanting some freelance work.
![Page 47: Oembed Wordcamp 2009 Montreal](https://reader038.vdocuments.mx/reader038/viewer/2022110308/5578c70bd8b42a85538b4f69/html5/thumbnails/47.jpg)
![Page 48: Oembed Wordcamp 2009 Montreal](https://reader038.vdocuments.mx/reader038/viewer/2022110308/5578c70bd8b42a85538b4f69/html5/thumbnails/48.jpg)