OEmbedPlugin

Easy embedding of third party content

oEmbed is a format for allowing an embedded representation of a URL on third party sites. The simple API allows a website to display embedded content (such as photos or videos) when a user posts a link to that resource, without having to parse the resource directly.

All you need to do to embed material from one of the supported providers is to add a link to it. The plugin will contact the provider and use the appropriate code to add it to the page, e.g. add an iframe for videos and the like.

Supported providers

  1. 23HQ
  2. Alpha App
  3. Amazon (embed.ly)
  4. Animoto
  5. Aol
  6. Blib.tv
  7. Cacoo
  8. Chirbit
  9. CircuitLab
  10. ClikThrough
  11. Clipfish (embed.ly)
  12. CollegeHumor
  13. Coub
  14. CrowdRanking
  15. DailyMile
  16. DailyMotion
  17. DeviantArt
  18. Dipity
  19. Dotsub
  20. Flickr
  21. Foursquare (embed.ly)
  22. FunnyOrDie
  23. Geograph Britain and Ireland
  24. Geograph Channel Islands
  25. Geograph Germany
  26. Github
  27. GMEP
  28. Google Maps (embed.ly)
  29. HuffDuffer
  30. Hulu
  31. IMDB (embed.ly)
  32. Instagram
  33. Jest
  34. JustinTV
  35. Kickstarter
  36. Kinomap
  37. Meetup
  38. MixCloud
  39. MobyPicture
  40. Nfb
  41. OfficialFM
  42. PollEverywhere
  43. PollyDaddy
  44. Quiz.biz
  45. Rdio
  46. Revision3
  47. Roomshare
  48. SapoVideos
  49. Screencast (embed.ly)
  50. Screenr
  51. Scribd
  52. Shoudio
  53. Sketchfab
  54. SlideShare
  55. SoundCloud
  56. SpeakerDeck
  57. Ted
  58. Twitpic (embed.ly)
  59. Twitter
  60. Ustream
  61. Viddler
  62. Viddler
  63. VideoJug
  64. Vimeo
  65. Vimeon
  66. Vine
  67. Washington Post (embed.ly)
  68. WordPress
  69. WordPress TV
  70. YFrog
  71. Youtube

A lot of providers are available via http://embed.ly. However, you'll have to register to get an api-key. Some of the listed providers have already been added to this plugin, yet not all.

Usage

Syntax: %EMBED{"url" [width="..." height="..."]}% (or %OEMBED{...}%)

  • url: an external link to the resource to be embedded
  • width, height: optional maximum values for the image/video/... being embedded (note: not all providers properly implement these parameters)
  • format: a format string to implement a custom renderer
  • template: the name of a template defined in oembed.tmpl; known templates shipped with OEmbedPlugin are "article" (todo add more)
  • <custom_key>: any custom key="value" pair may be defined and made use of in the format (or template) using $custom_key to expand it; these have higher precendence than the default values submitted by the oembed provider; for example use a custom thumbnail_width="100" parameter to override the default width.

The keys in the json submitted from the oembed provider can be used in a format string (or a template definition). Some well-known keys are:

  • $author_name
  • $author_url
  • $descriptio
  • $html
  • $provider_name
  • $provider_url
  • $thumbnail_height
  • $thumbnail_url
  • $thumbnail_width
  • $title
  • $type
  • $url
  • $web_page

In addition all standard format tokens can be used ($percnt, $dollar, $nop, etc).

See the oembed.tmpl file on how to use them.

Examples

Washington Post

%EMBED{"http://www.washingtonpost.com/investigations/us-intelligence-mining-data-from-nine-us-internet-companies-in-broad-secret-program/2013/06/06/3a0c0da8-cebf-11e2-8845-d970ccb04497_story.html"
  template="article"
  thumbnail_width="100"
}%

%EMBED{"http://www.washingtonpost.com/investigations/us-intelligence-mining-data-from-nine-us-internet-companies-in-broad-secret-program/2013/06/06/3a0c0da8-cebf-11e2-8845-d970ccb04497_story.html" template="article" thumbnail_width="100" }%

Youbtube

%EMBED{"http://www.youtube.com/watch?v=O8e8Ttfz-pY" width="600"}%

%EMBED{"http://www.youtube.com/watch?v=O8e8Ttfz-pY" width="600"}%

Soundcloud

%EMBED{"http://soundcloud.com/safia-music/listen-to-soul-listen-to-blues" width="600"}%

%EMBED{"http://soundcloud.com/safia-music/listen-to-soul-listen-to-blues" width="600"}%

Flickr

%EMBED{"http://www.flickr.com/photos/onement/1239189689/" height="400"}%
%EMBED{"http://www.flickr.com/photos/onement/1239189689/" height="400"}%

More examples

%EMBED{"http://www.jest.com/video/197394/paul-ryan-rap"}%
%EMBED{"http://chirb.it/Jh25OE"}%
%EMBED{"http://dotsub.com/view/10e3cb5e-96c7-4cfb-bcea-8ab11e04e090"}%
%EMBED{"http://geo.hlipp.de/photo/20260"}%
%EMBED{"http://instagram.com/p/Z-u2XxQJ7H/"}%
%EMBED{"http://matt.wordpress.com/2011/07/14/clouds-over-new-york/"}%
%EMBED{"http://pycon.blip.tv/file/2058801"}%
%EMBED{"http://qik.com/video/50925"}%
%EMBED{"http://revision3.com/diggnation/2008-04-17xsanned"}%
%EMBED{"https://twitter.com/nuddlegg/status/330610557793210369"}%
%EMBED{"https://www.circuitlab.com/circuit/e38756/555-timer-as-astable-multivibrator-oscillator/"}%
%EMBED{"http://twitpic.com/cuisl3"}%
%EMBED{"http://vimeo.com/7100569"}%
%EMBED{"http://www.amazon.com/Myths-Innovation-Scott-Berkun/dp/0596527055/"}%
%EMBED{"http://www.clikthrough.com/theater/video/45//en-US"}%
%EMBED{"http://www.clipfish.de/special/boese-maedchen/video/3687388/boese-maedchen-ladys-first/"}%
%EMBED{"http://www.collegehumor.com/video/3922232/prank-war-7-the-half-million-dollar-shot"}%
%EMBED{"http://www.dailymotion.com/video/x5ioet_phoenix-mars-lander_tech"}%
%EMBED{"http://www.geograph.org.gg/photo/773"}%
%EMBED{"http://www.geograph.org.uk/photo/2928776"}%
%EMBED{"http://www.hulu.com/watch/471667"}%
%EMBED{"http://www.kinomap.com/kms-vzkpc7"}%
%EMBED{"http://www.mixcloud.com/johndigweed/transitions-with-john-digweed-30th-may-2013/"}%
%EMBED{"http://www.nfb.ca/film/blackfly/"}%
%EMBED{"http://www.polleverywhere.com/multiple_choice_polls/LTIwNzM1NTczNTE"}%
%EMBED{"http://www.quiz.biz/quizz-182015.html"}%
%EMBED{"http://www.scribd.com/doc/17896323/Indian-Automobile-industryPEST" width="600"}%
%EMBED{"http://www.slideshare.net/haraldf/business-quotes-for-2011"}%
%EMBED{"http://www.ted.com/talks/hendrik_poinar_bring_back_the_woolly_mammoth.html"}%
%EMBED{"http://www.viddler.com/v/1646c55"}%
%EMBED{"http://www.screencast.com/t/jHhhu39t"}%
%EMBED{"http://www.screenr.com/fTK"}%
%EMBED{"http://goo.gl/maps/22OR8"}%
%EMBED{"https://foursquare.com/v/vapiano/4b212bc4f964a520ac3724e3"}%
%EMBED{"http://feigiap.deviantart.com/art/Shop-380055652"}%
%EMBED{"https://speakerdeck.com/reneeb_perl/the-renaissance-of-perl"}%
%EMBED{"http://www.videojug.com/film/how-to-tie-a-knot-braid"}%
%EMBED{"http://www.justin.tv/deepellumonair"}%
%EMBED{"http://mobypicture.com/user/Henk_Voermans/view/15880044"
  format="<a href='$url'><img src='$url' width='$width' /></a> %BR% by <a href='$author_url'>$author_name</a>"
  width="500"
}%
%EMBED{"http://www.23hq.com/brinjal/photo/13305970" width="500"}%
%EMBED{"http://official.fm/playlists/cxBp?from=homepage&track_id=g8x7"}%
%EMBED{"http://videos.sapo.pt/dNbiosGa9YZHfLrhkA88"}%
%EMBED{"http://crowdranking.com/crowdrankings/t446g0--best-movies-2013"}%
%EMBED{"https://cacoo.com/diagrams/m9uZtizE5I2GkFR6"}%
%EMBED{"http://huffduffer.com/jxpx777/125342"}%
%EMBED{"http://my.opera.com/cstrep/albums/showpic.dml?album=504322&picture=6964560"}%
%EMBED{"http://www.funnyordie.com/videos/2555a0702b/clint-eastwod-s-chair-auditions"}%
%EMBED{"http://animoto.com/play/JzwsBn5FRVxS0qoqcBP5zA"}%
%EMBED{"http://www.rdio.com/artist/The_Black_Keys/album/Brothers/"}%
%EMBED{"http://coub.com/view/agqbu"}%
%EMBED{"http://www.kickstarter.com/projects/1115015686/help-support-the-kiggins-theatre-to-go-digital"}%
%EMBED{"https://sketchfab.com/show/b7LzIm8JrnPw4GBDOMBNGYc39qM"}%

Installation Instructions

You do not need to install anything in the browser to use this extension. The following instructions are for the administrator who installs the extension on the server.

Open configure, and open the "Extensions" section. Use "Find More Extensions" to get a list of available extensions. Select "Install".

If you have any problems, or if the extension isn't available in configure, then you can still install manually from the command-line. See http://foswiki.org/Support/ManuallyInstallingExtensions for more help.

Info

Author(s): Michael Daum
Copyright: © 2013-2014 Michael Daum http://michaeldaumconsulting.com
License: GPL (Gnu General Public License)
Release: 5.00
Version: 5.00
Change History:  
16 Dec 2014 have an image preview for vimeo and youtube and only embed the real video when clicking on it; added Vine
25 Sep 2014 added caching
24 Sep 2014 added a custom renderer for youtube videos
29 Aug 2014 removed my opera, qirk and urtak; use https whereever possible
01 Nov 2013 added more providers
30 Aug 2013 added more providers
24 Jun 2013 added format, template and custom params; added a few more providers
Dependencies:
NameVersionDescription
Any::Moose>=0Required
Home page: Foswiki:Extensions/OEmbedPlugin
Support: Foswiki:Support/OEmbedPlugin
Topic revision: r9 - 16 Dec 2014, MichaelDaum
 
The copyright of the content on this website is held by the contributing authors, except where stated elsewhere. see CopyrightStatement. Creative Commons License