{"id":73303,"date":"2019-11-26T04:17:26","date_gmt":"2019-11-26T11:17:26","guid":{"rendered":"https:\/\/www.taterboy.com\/blog\/2019\/11\/programmatically-discovering-sharing-code-with-oembed\/"},"modified":"2019-11-26T04:17:26","modified_gmt":"2019-11-26T11:17:26","slug":"programmatically-discovering-sharing-code-with-oembed","status":"publish","type":"post","link":"https:\/\/www.taterboy.com\/blog\/2019\/11\/programmatically-discovering-sharing-code-with-oembed\/","title":{"rendered":"Programmatically Discovering Sharing Code With oEmbed"},"content":{"rendered":"Programmatically Discovering Sharing Code With oEmbed<\/title><\/p>\n<article>\n<header>\n<h1>Programmatically Discovering Sharing Code With oEmbed<\/h1>\n<address>Drew McLellan<\/address>\n<p> <time datetime=\"2019-11-26T11:00:00+00:00\">2019-11-26T11:00:00+00:00<\/time><time datetime=\"2019-11-26T11:00:00+00:00\">2019-11-26T11:08:13+00:00<\/time><\/header>\n<p>The web is full of services that host rich content such as videos, images, music and podcasts, maps and graphs, and all manner of different delights. Chances are, when you add your content to a site, it will offer you a way to embed that content in a web page somewhere else.<\/p>\n<p>Sites like YouTube have their own embeddable player that is popular to use in blog posts and even product pages. Soundcloud has code for embedding their music player in your band\u2019s website. Charity fundraisers might upload the route of their big race to a site like Strava, and want to share it on their fundraising site to show their sponsors.<\/p>\n<p>All this is done by finding that <em>Share<\/em> option on the hosting site and copying out some code that is normally a mix of HTML and JavaScript. That code can then usually be pasted into the destination page, and the hosting site will present a rich representation of the content for all your friends, customers and contacts to see.<\/p>\n<p>So far, so good, and this covers the option for the manual embedding of content pretty well. There is a distinct second use-case however, where the outcome is the same but the route to it is very different.<\/p>\n<div data-component=\"FeaturePanel\" data-audience=\"non-subscriber\" data-remove=\"true\"><\/div>\n<h3>Sharing Programmatically<\/h3>\n<p>Let\u2019s imagine you\u2019re building an app or site that accepts content from a user. That could be something as simple as a basic intranet page for staff to share news with coworkers, or something massive like a whole social network where people can sign up and start posting.<\/p>\n<p>In both cases, you need to work out what to do if the user adds a URL as part of that content. You can imagine the scenario:<\/p>\n<pre><code>Check out this video! https:\/\/youtu.be\/jw7bRnFbwAI\n<\/code><\/pre>\n<p>At this point, as a publishing system, you need to figure out what to do. The first option is to do nothing, and just leave the URL as plain text. That\u2019s not a brilliant idea, as users will generally want to click on the URL and plain text won\u2019t help them get to the page at the other end.<\/p>\n<p>The second option is to turn it into a link. That\u2019s a good solid next step, as users can follow the link and get to the content. But in doing so, they leave your site and might not come back in a hurry.<\/p>\n<p>The best user experience might be to be able to fetch the player for that content and embed it right there instead of just the URL. That would enable users to experience the content right within your site, much like they would on Facebook, for example.<\/p>\n<p>This poses the problem. Given a URL, how can I turn that into the HTML\/JavaScript embed code needed to show a rich player on the page?<\/p>\n<p>If it\u2019s a known site like YouTube, I could write some code that uses the YouTube API to fetch the video information and get or build the embed code that way. I could do the same for other video services like Vimeo and VIVO. I can write code to recognize Flickr and Instagram URLs and use their APIs to fetch nice embeddable versions of photographs. And the same for Twitter and tweets. But this is sounding like a lot of work!<\/p>\n<p>What would be ideal is if there was a standardized way of getting from a URL of a piece of content to a block of embed code to show that content on a page. If you\u2019ve been paying attention, you\u2019ll realize that the answer to that is oEmbed.<\/p>\n<h3>The Origin Of oEmbed<\/h3>\n<p>This was exactly the problem <a href=\"http:\/\/leahculver.com\/\">Leah Culver<\/a> had while working on Pownce (a truly innovative social networking site that was the Betamax to Twitter\u2019s VHS). Pownce wanted to embed rich representations of content into a user\u2019s update stream, but didn\u2019t want to limit support to only the services they\u2019d specifically written code to integrate with. At dinner with colleague Mike Malone, as well as <a href=\"https:\/\/www.iamcal.com\/\">Cal Henderson<\/a> (who led engineering at Flickr \u2014 one of the major providers of such content at the time) and <a href=\"https:\/\/rcrowley.org\/\">Richard Crowley<\/a>, they together hashed out an idea for an open standard for getting embed code from a URL. Henderson went away and drafted something up based on the discussion, and oEmbed was born.<\/p>\n<h3>Using oEmbed<\/h3>\n<p>Here\u2019s how it works.<\/p>\n<p>It starts with the URL that points to a single item of content. That might be a YouTube video, an image, or whatever. Typically this will have been provided by a user of your site or app as part of some content they wish to publish. The first step is to fetch the content of the page at that URL, which should be an HTML page.<\/p>\n<p>If the site hosting the content supports oEmbed, in the <code><head><\/code> section of that page there should be a <code>link<\/code> element with an <code>oembed<\/code> content type:<\/p>\n<div>\n<pre><code><link rel=\"alternate\" type=\"application\/json+oembed\"\n href=\"http:\/\/www.youtube.com\/oembed?url=https%3A%2F%2Fyoutu.be%2Fjw7bRnFbwAI&format=json\"\n title=\"Inclusive Components with Heydon Pickering\" \/>\n<\/code><\/pre>\n<\/div>\n<p><strong>A note about XML:<\/strong> <em>oEmbed supports responses in both XML and JSON format. For this article, I\u2019m only considering JSON, because we\u2019re not savages. If you\u2019re in the unfortunate position to need to work with XML, be aware that it is a supported format with the oEmbed spec, although you may find that some providers only offer JSON responses.<\/em><\/p>\n<div><\/div>\n<p>This link tag as the <code>rel<\/code> attribute set to <code>alternate<\/code> and a <code>type<\/code> set to either <code>application\/json+oembed<\/code> or <code>text\/xml+oembed<\/code>. It\u2019s this attribute that clues us into the fact that the URL given in the <code>href<\/code> is actually an oEmbed API endpoint for retrieving the details of the content.<\/p>\n<p>That URL will have usually two parameters: <code>url<\/code> and <code>format<\/code>.<\/p>\n<table data-tablesaw-mode=\"swipe\" data-tablesaw-minimap>\n<thead>\n<tr>\n<th data-tablesaw-priority=\"persist\">Parameter<\/th>\n<th>Value<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td><code>url<\/code> (required)<\/td>\n<td>The URL-encoded web address of the content item<\/td>\n<\/tr>\n<tr>\n<td><code>format<\/code><\/td>\n<td>The format you\u2019d like the response in. One of either <code>json<\/code> or <code>xml<\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p><em>Common URL parameters for the initial consumer request<\/em><\/p>\n<p>The <a href=\"https:\/\/oembed.com\/\">full specification<\/a> goes into much more detail here (and you should reference that if creating your own implementation) but these are the two parameters you\u2019ll likely see the most.<\/p>\n<p>So, we\u2019ve got a URL, fetched the page, found an oEmbed link tag with another URL for an API endpoint. Next, we request that new URL, and that returns all the information the service has to provide about that piece of content.<\/p>\n<div>\n<pre><code>{\n \"author_name\": \"Smashing Magazine\",\n \"width\": 480,\n \"title\": \"Smashing TV: Inclusive Components with Heydon Pickering (Nov 7th 2019)\",\n \"provider_name\": \"YouTube\",\n \"height\": 270,\n \"html\": \"<iframe loading=\"lazy\" width=\"480\" height=\"270\" src=\"https:\/\/www.youtube.com\/embed\/jw7bRnFbwAI?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture\" allowfullscreen><\/iframe>\",\n \"provider_url\": \"https:\/\/www.youtube.com\/\",\n \"thumbnail_url\": \"https:\/\/i.ytimg.com\/vi\/jw7bRnFbwAI\/hqdefault.jpg\",\n \"type\": \"video\",\n \"thumbnail_height\": 360,\n \"author_url\": \"https:\/\/www.youtube.com\/channel\/UCSDtqcJ8ZXviPrEcj1vuLiQ\",\n \"version\": \"1.0\",\n \"thumbnail_width\": 480\n}\n<\/code><\/pre>\n<\/div>\n<p>Now we\u2019re talking! The response gives us lots of information about the content. The <code>version<\/code> should for the foreseeable future be <code>1.0<\/code>, which is the current version of the oEmbed spec. The other information returned depends largely on the value of <code>type<\/code>.<\/p>\n<h3>Response Types<\/h3>\n<p>The value of the <code>type<\/code> key in the response tells you what sort of media you\u2019re going to be embedding.<\/p>\n<table data-tablesaw-mode=\"swipe\" data-tablesaw-minimap>\n<thead>\n<tr>\n<th data-tablesaw-priority=\"persist\">Value of <code>type<\/code><\/th>\n<th>What to expect<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td><code>photo<\/code><\/td>\n<td>A static photo that offers a <code>url<\/code>, <code>width<\/code> and <code>height<\/code> that can be used for a basic <code>img<\/code> tag<\/td>\n<\/tr>\n<tr>\n<td><code>video<\/code><\/td>\n<td>A video player, with <code>html<\/code> specifying the code required to embed a player on a page, although with a <code>width<\/code> and <code>height<\/code><\/td>\n<\/tr>\n<tr>\n<td><code>link<\/code><\/td>\n<td>The best way to deal with this content is just to provide a link after all. The response might have other useful information like a title, but it should just be linked up.<\/td>\n<\/tr>\n<tr>\n<td><code>rich<\/code><\/td>\n<td>Some sort of rich content player, which just like the video type returns <code>html<\/code>, <code>width<\/code> and <code>height<\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p>Aside from dedicated video content, the more common type you\u2019re likely to see in the wild is <code>rich<\/code>. Even Flickr itself, while still sending a <code>photo<\/code> response, also supplies <code>html<\/code> for a rich embeddable \u2018player\u2019 for the image, too.<\/p>\n<p>Most of the time, embedding the content in your site is just a case of using the code provided as the <code>html<\/code> value.<\/p>\n<h3>A Note On Security<\/h3>\n<p>One thing you might be rightly cautious of is taking an HTML response and embedding it programmatically into a page you host. Without the human step to double-check the code you\u2019re pasting in, there is always potential for that code to be malicious. As such you should take appropriate steps to mitigate the risk.<\/p>\n<p>That might include filtering the URLs to make sure the schemes and domains match those expected, and sandboxing code into an iframe on a different, cookieless domain. You should access the situation in which you\u2019re using the code and make sure that you\u2019re not exposing your self to undue risk.<\/p>\n<div><\/div>\n<h3>Getting Started<\/h3>\n<p>As important as it is to understand the process when using oEmbed, the reality is that most common languages have libraries available that abstract away the process and make it relatively simple.<\/p>\n<p>For example, the npm packaged <a href=\"https:\/\/www.npmjs.com\/package\/oembed\">oembed<\/a> provides a very simple interface for making a request based on the content URL and getting the oEmbed response back in return.<\/p>\n<p>First install the package into your project:<\/p>\n<pre><code>npm i oembed\n<\/code><\/pre>\n<p>And then request the URL. Here I\u2019m using the URL of a presentation on Notist that I gave about oEmbed. How very meta.<\/p>\n<pre><code>const oembed = require('oembed');\nconst url = 'https:\/\/noti.st\/drewm\/ZOFFfI';\n\noembed.fetch(url, { maxwidth: 1920 }, function(error, result) {\n if (error)\n console.error(error);\n else\n console.log(\"oEmbed result\", result);\n});\n<\/code><\/pre>\n<p>And the response:<\/p>\n<div>\n<pre><code>{ \n type: 'rich',\n version: '1.0',\n title: 'Understanding oEmbed',\n author_name: 'Drew McLellan',\n author_url: 'https:\/\/noti.st\/drewm',\n provider_name: 'Notist',\n provider_url: 'https:\/\/noti.st',\n cache_age: 604800,\n thumbnail_url: 'https:\/\/on.notist.cloud\/slides\/deck4179\/large-0.png',\n thumbnail_width: 1600,\n thumbnail_height: 900,\n html:\n '<p data-notist=\"drewm\/ZOFFfI\">View <a href=\"https:\/\/noti.st\/drewm\/ZOFFfI\">Understanding oEmbed<\/a> on Notist.<\/p><script async src=\"https:\/\/on.notist.cloud\/embed\/002.js\"><\/script>',\n width: 960,\n height: 540 \n}\n<\/code><\/pre>\n<\/div>\n<p>If you wanted to do the same in PHP, a handy package called <a href=\"https:\/\/packagist.org\/packages\/embed\/embed\">embed\/embed<\/a> is available to install via Composer.<\/p>\n<pre><code>composer require embed\/embed\n<\/code><\/pre>\n<p>And then in your PHP project:<\/p>\n<pre><code>use EmbedEmbed;\n\n$info = Embed::create('https:\/\/noti.st\/drewm\/ZOFFfI');\n\n$info->title; \/\/ \"Understanding oEmbed\"\n$info->authorName; \/\/ \"Drew McLellan\n$info->code; \/\/ \"<p data-notist=\"drewm\/ZOFFfI\"> ... <\/script>\"\n<\/code><\/pre>\n<p>As you can see, with the use of a library the process becomes very simple and you can quickly get from a URL to the embed code, ready to show a rich representation of the user\u2019s content.<\/p>\n<h3>Conclusion<\/h3>\n<p>oEmbed is a very elegant solution to a very specific problem. You\u2019d be forgiven for thinking that only a few engineers working on big social networks would benefit from this, but in reality, publishing systems where a user might enter a URL are surprisingly common. Find me one back-end engineer who at some point hasn\u2019t needed to build some kind of CMS. We may not think of it in the same terms, but if you accept user input, you should be thinking about what to do if that input contains URLs.<\/p>\n<p>Now that you know about oEmbed (sorry) you\u2019ve got no excuse not to give some serious consideration to how you handle URLs in your future projects.<\/p>\n<ul>\n<li><a href=\"https:\/\/oembed.com\/\">oEmbed specification<\/a><\/li>\n<li><a href=\"https:\/\/www.npmjs.com\/package\/oembed\">oembed<\/a> for NodeJS<\/li>\n<li><a href=\"https:\/\/packagist.org\/packages\/embed\/embed\">embed\/embed<\/a> for PHP<\/li>\n<li>\u201c<a href=\"https:\/\/blog.leahculver.com\/2008\/05\/announcing-oembed-an-open-standard-for-embedded-content.html\">Announcing OEmbed: An Open Standard for Embedded Content<\/a>,\u201d Leah Culver<\/li>\n<\/ul>\n<div>\n <img data-recalc-dims=\"1\" decoding=\"async\" src=\"https:\/\/i0.wp.com\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/11\/logo-red-21.png?w=900&ssl=1\" alt=\"Smashing Editorial\"><span>(ra, il)<\/span>\n<\/div>\n<\/article>\n<p class=\"wpematico_credit\"><small>Powered by <a href=\"http:\/\/www.wpematico.com\" target=\"_blank\" rel=\"noopener noreferrer\">WPeMatico<\/a><\/small><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Programmatically Discovering Sharing Code With oEmbed Programmatically Discovering Sharing Code With oEmbed Drew McLellan 2019-11-26T11:00:00+00:002019-11-26T11:08:13+00:00 The web is full of services that host rich content such as videos, images, music and podcasts, maps and graphs, and all manner of different delights. Chances are, when you add your content to a site, it will offer you…<a class=\"moretag\" href=\"https:\/\/www.taterboy.com\/blog\/2019\/11\/programmatically-discovering-sharing-code-with-oembed\/\"> Read the full article…<\/a><\/p>\n","protected":false},"author":4,"featured_media":73304,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_feature_clip_id":0,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2},"jetpack_post_was_ever_published":false},"categories":[371],"tags":[],"class_list":["post-73303","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-user-experience"],"aioseo_notices":[],"aioseo_head":"\n\t\t<!-- All in One SEO 5.0.0.1 - aioseo.com -->\n\t<meta name=\"description\" content=\"Programmatically Discovering Sharing Code With oEmbedProgrammatically Discovering Sharing Code With oEmbed Drew McLellan 2019-11-26T11:00:00+00:002019-11-26T11:08:13+00:00The web is full of services that host rich content such as videos, images, music and podcasts, maps and graphs, and all manner of different delights. Chances are, when you add your content to a site, it will offer you a way\" \/>\n\t<meta name=\"robots\" content=\"max-image-preview:large\" \/>\n\t<meta name=\"author\" content=\"Guest Contribution\"\/>\n\t<meta name=\"keywords\" content=\"user experience\" \/>\n\t<link rel=\"canonical\" href=\"https:\/\/www.taterboy.com\/blog\/2019\/11\/programmatically-discovering-sharing-code-with-oembed\/\" \/>\n\t<meta name=\"generator\" content=\"All in One SEO (AIOSEO) 5.0.0.1\" \/>\n\t\t<meta property=\"og:locale\" content=\"en_US\" \/>\n\t\t<meta property=\"og:site_name\" content=\"Design for Immersive Technologies | User Experience for Games, Virtual Reality (VR) and Augmented\/Mixed Reality (AR\/MR)\" \/>\n\t\t<meta property=\"og:type\" content=\"article\" \/>\n\t\t<meta property=\"og:title\" content=\"Programmatically Discovering Sharing Code With oEmbed | Design for Immersive Technologies\" \/>\n\t\t<meta property=\"og:description\" content=\"Programmatically Discovering Sharing Code With oEmbedProgrammatically Discovering Sharing Code With oEmbed Drew McLellan 2019-11-26T11:00:00+00:002019-11-26T11:08:13+00:00The web is full of services that host rich content such as videos, images, music and podcasts, maps and graphs, and all manner of different delights. Chances are, when you add your content to a site, it will offer you a way\" \/>\n\t\t<meta property=\"og:url\" content=\"https:\/\/www.taterboy.com\/blog\/2019\/11\/programmatically-discovering-sharing-code-with-oembed\/\" \/>\n\t\t<meta property=\"article:published_time\" content=\"2019-11-26T11:17:26+00:00\" \/>\n\t\t<meta property=\"article:modified_time\" content=\"2019-11-26T11:17:26+00:00\" \/>\n\t\t<meta name=\"twitter:card\" content=\"summary\" \/>\n\t\t<meta name=\"twitter:title\" content=\"Programmatically Discovering Sharing Code With oEmbed | Design for Immersive Technologies\" \/>\n\t\t<meta name=\"twitter:description\" content=\"Programmatically Discovering Sharing Code With oEmbedProgrammatically Discovering Sharing Code With oEmbed Drew McLellan 2019-11-26T11:00:00+00:002019-11-26T11:08:13+00:00The web is full of services that host rich content such as videos, images, music and podcasts, maps and graphs, and all manner of different delights. Chances are, when you add your content to a site, it will offer you a way\" \/>\n\t\t<script type=\"application\/ld+json\" class=\"aioseo-schema\">\n\t\t\t{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/2019\\\/11\\\/programmatically-discovering-sharing-code-with-oembed\\\/#article\",\"name\":\"Programmatically Discovering Sharing Code With oEmbed | Design for Immersive Technologies\",\"headline\":\"Programmatically Discovering Sharing Code With oEmbed\",\"author\":{\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/author\\\/guestcontribution\\\/#author\"},\"publisher\":{\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/#organization\"},\"image\":{\"@type\":\"ImageObject\",\"url\":\"https:\\\/\\\/i0.wp.com\\\/www.taterboy.com\\\/blog\\\/wp-content\\\/uploads\\\/2019\\\/11\\\/logo-red-21.png?fit=60%2C80&ssl=1\",\"width\":60,\"height\":80},\"datePublished\":\"2019-11-26T04:17:26-07:00\",\"dateModified\":\"2019-11-26T04:17:26-07:00\",\"inLanguage\":\"en-US\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/2019\\\/11\\\/programmatically-discovering-sharing-code-with-oembed\\\/#webpage\"},\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/2019\\\/11\\\/programmatically-discovering-sharing-code-with-oembed\\\/#webpage\"},\"articleSection\":\"User Experience\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/2019\\\/11\\\/programmatically-discovering-sharing-code-with-oembed\\\/#breadcrumblist\",\"itemListElement\":[{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog#listItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.taterboy.com\\\/blog\",\"nextItem\":{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/category\\\/user-experience\\\/#listItem\",\"name\":\"User Experience\"}},{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/category\\\/user-experience\\\/#listItem\",\"position\":2,\"name\":\"User Experience\",\"item\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/category\\\/user-experience\\\/\",\"nextItem\":{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/2019\\\/11\\\/programmatically-discovering-sharing-code-with-oembed\\\/#listItem\",\"name\":\"Programmatically Discovering Sharing Code With oEmbed\"},\"previousItem\":{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog#listItem\",\"name\":\"Home\"}},{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/2019\\\/11\\\/programmatically-discovering-sharing-code-with-oembed\\\/#listItem\",\"position\":3,\"name\":\"Programmatically Discovering Sharing Code With oEmbed\",\"previousItem\":{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/category\\\/user-experience\\\/#listItem\",\"name\":\"User Experience\"}}]},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/#organization\",\"name\":\"Design for Immersive Technologies\",\"description\":\"User Experience for Games, Virtual Reality (VR) and Augmented\\\/Mixed Reality (AR\\\/MR)\",\"url\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/\"},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/author\\\/guestcontribution\\\/#author\",\"url\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/author\\\/guestcontribution\\\/\",\"name\":\"Guest Contribution\",\"image\":{\"@type\":\"ImageObject\",\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/2019\\\/11\\\/programmatically-discovering-sharing-code-with-oembed\\\/#authorImage\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/d2aad73eb0f48c67b141e9fc978a0e498969791ed623346e361d02d19775b0bb?s=96&d=mm&r=g\",\"width\":96,\"height\":96,\"caption\":\"Guest Contribution\"}},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/2019\\\/11\\\/programmatically-discovering-sharing-code-with-oembed\\\/#webpage\",\"url\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/2019\\\/11\\\/programmatically-discovering-sharing-code-with-oembed\\\/\",\"name\":\"Programmatically Discovering Sharing Code With oEmbed | Design for Immersive Technologies\",\"description\":\"Programmatically Discovering Sharing Code With oEmbedProgrammatically Discovering Sharing Code With oEmbed Drew McLellan 2019-11-26T11:00:00+00:002019-11-26T11:08:13+00:00The web is full of services that host rich content such as videos, images, music and podcasts, maps and graphs, and all manner of different delights. Chances are, when you add your content to a site, it will offer you a way\",\"inLanguage\":\"en-US\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/#website\"},\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/2019\\\/11\\\/programmatically-discovering-sharing-code-with-oembed\\\/#breadcrumblist\"},\"author\":{\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/author\\\/guestcontribution\\\/#author\"},\"creator\":{\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/author\\\/guestcontribution\\\/#author\"},\"image\":{\"@type\":\"ImageObject\",\"url\":\"https:\\\/\\\/i0.wp.com\\\/www.taterboy.com\\\/blog\\\/wp-content\\\/uploads\\\/2019\\\/11\\\/logo-red-21.png?fit=60%2C80&ssl=1\",\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/2019\\\/11\\\/programmatically-discovering-sharing-code-with-oembed\\\/#mainImage\",\"width\":60,\"height\":80},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/2019\\\/11\\\/programmatically-discovering-sharing-code-with-oembed\\\/#mainImage\"},\"datePublished\":\"2019-11-26T04:17:26-07:00\",\"dateModified\":\"2019-11-26T04:17:26-07:00\"},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/\",\"name\":\"Design for Immersive Technologies\",\"description\":\"User Experience for Games, Virtual Reality (VR) and Augmented\\\/Mixed Reality (AR\\\/MR)\",\"inLanguage\":\"en-US\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/#organization\"}}]}\n\t\t<\/script>\n\t\t<!-- All in One SEO -->\n\n","aioseo_head_json":{"title":"Programmatically Discovering Sharing Code With oEmbed | Design for Immersive Technologies","description":"Programmatically Discovering Sharing Code With oEmbedProgrammatically Discovering Sharing Code With oEmbed Drew McLellan 2019-11-26T11:00:00+00:002019-11-26T11:08:13+00:00The web is full of services that host rich content such as videos, images, music and podcasts, maps and graphs, and all manner of different delights. Chances are, when you add your content to a site, it will offer you a way","canonical_url":"https:\/\/www.taterboy.com\/blog\/2019\/11\/programmatically-discovering-sharing-code-with-oembed\/","robots":"max-image-preview:large","keywords":"user experience","webmasterTools":{"miscellaneous":""},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.taterboy.com\/blog\/2019\/11\/programmatically-discovering-sharing-code-with-oembed\/#article","name":"Programmatically Discovering Sharing Code With oEmbed | Design for Immersive Technologies","headline":"Programmatically Discovering Sharing Code With oEmbed","author":{"@id":"https:\/\/www.taterboy.com\/blog\/author\/guestcontribution\/#author"},"publisher":{"@id":"https:\/\/www.taterboy.com\/blog\/#organization"},"image":{"@type":"ImageObject","url":"https:\/\/i0.wp.com\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/11\/logo-red-21.png?fit=60%2C80&ssl=1","width":60,"height":80},"datePublished":"2019-11-26T04:17:26-07:00","dateModified":"2019-11-26T04:17:26-07:00","inLanguage":"en-US","mainEntityOfPage":{"@id":"https:\/\/www.taterboy.com\/blog\/2019\/11\/programmatically-discovering-sharing-code-with-oembed\/#webpage"},"isPartOf":{"@id":"https:\/\/www.taterboy.com\/blog\/2019\/11\/programmatically-discovering-sharing-code-with-oembed\/#webpage"},"articleSection":"User Experience"},{"@type":"BreadcrumbList","@id":"https:\/\/www.taterboy.com\/blog\/2019\/11\/programmatically-discovering-sharing-code-with-oembed\/#breadcrumblist","itemListElement":[{"@type":"ListItem","@id":"https:\/\/www.taterboy.com\/blog#listItem","position":1,"name":"Home","item":"https:\/\/www.taterboy.com\/blog","nextItem":{"@type":"ListItem","@id":"https:\/\/www.taterboy.com\/blog\/category\/user-experience\/#listItem","name":"User Experience"}},{"@type":"ListItem","@id":"https:\/\/www.taterboy.com\/blog\/category\/user-experience\/#listItem","position":2,"name":"User Experience","item":"https:\/\/www.taterboy.com\/blog\/category\/user-experience\/","nextItem":{"@type":"ListItem","@id":"https:\/\/www.taterboy.com\/blog\/2019\/11\/programmatically-discovering-sharing-code-with-oembed\/#listItem","name":"Programmatically Discovering Sharing Code With oEmbed"},"previousItem":{"@type":"ListItem","@id":"https:\/\/www.taterboy.com\/blog#listItem","name":"Home"}},{"@type":"ListItem","@id":"https:\/\/www.taterboy.com\/blog\/2019\/11\/programmatically-discovering-sharing-code-with-oembed\/#listItem","position":3,"name":"Programmatically Discovering Sharing Code With oEmbed","previousItem":{"@type":"ListItem","@id":"https:\/\/www.taterboy.com\/blog\/category\/user-experience\/#listItem","name":"User Experience"}}]},{"@type":"Organization","@id":"https:\/\/www.taterboy.com\/blog\/#organization","name":"Design for Immersive Technologies","description":"User Experience for Games, Virtual Reality (VR) and Augmented\/Mixed Reality (AR\/MR)","url":"https:\/\/www.taterboy.com\/blog\/"},{"@type":"Person","@id":"https:\/\/www.taterboy.com\/blog\/author\/guestcontribution\/#author","url":"https:\/\/www.taterboy.com\/blog\/author\/guestcontribution\/","name":"Guest Contribution","image":{"@type":"ImageObject","@id":"https:\/\/www.taterboy.com\/blog\/2019\/11\/programmatically-discovering-sharing-code-with-oembed\/#authorImage","url":"https:\/\/secure.gravatar.com\/avatar\/d2aad73eb0f48c67b141e9fc978a0e498969791ed623346e361d02d19775b0bb?s=96&d=mm&r=g","width":96,"height":96,"caption":"Guest Contribution"}},{"@type":"WebPage","@id":"https:\/\/www.taterboy.com\/blog\/2019\/11\/programmatically-discovering-sharing-code-with-oembed\/#webpage","url":"https:\/\/www.taterboy.com\/blog\/2019\/11\/programmatically-discovering-sharing-code-with-oembed\/","name":"Programmatically Discovering Sharing Code With oEmbed | Design for Immersive Technologies","description":"Programmatically Discovering Sharing Code With oEmbedProgrammatically Discovering Sharing Code With oEmbed Drew McLellan 2019-11-26T11:00:00+00:002019-11-26T11:08:13+00:00The web is full of services that host rich content such as videos, images, music and podcasts, maps and graphs, and all manner of different delights. Chances are, when you add your content to a site, it will offer you a way","inLanguage":"en-US","isPartOf":{"@id":"https:\/\/www.taterboy.com\/blog\/#website"},"breadcrumb":{"@id":"https:\/\/www.taterboy.com\/blog\/2019\/11\/programmatically-discovering-sharing-code-with-oembed\/#breadcrumblist"},"author":{"@id":"https:\/\/www.taterboy.com\/blog\/author\/guestcontribution\/#author"},"creator":{"@id":"https:\/\/www.taterboy.com\/blog\/author\/guestcontribution\/#author"},"image":{"@type":"ImageObject","url":"https:\/\/i0.wp.com\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/11\/logo-red-21.png?fit=60%2C80&ssl=1","@id":"https:\/\/www.taterboy.com\/blog\/2019\/11\/programmatically-discovering-sharing-code-with-oembed\/#mainImage","width":60,"height":80},"primaryImageOfPage":{"@id":"https:\/\/www.taterboy.com\/blog\/2019\/11\/programmatically-discovering-sharing-code-with-oembed\/#mainImage"},"datePublished":"2019-11-26T04:17:26-07:00","dateModified":"2019-11-26T04:17:26-07:00"},{"@type":"WebSite","@id":"https:\/\/www.taterboy.com\/blog\/#website","url":"https:\/\/www.taterboy.com\/blog\/","name":"Design for Immersive Technologies","description":"User Experience for Games, Virtual Reality (VR) and Augmented\/Mixed Reality (AR\/MR)","inLanguage":"en-US","publisher":{"@id":"https:\/\/www.taterboy.com\/blog\/#organization"}}]},"og:locale":"en_US","og:site_name":"Design for Immersive Technologies | User Experience for Games, Virtual Reality (VR) and Augmented\/Mixed Reality (AR\/MR)","og:type":"article","og:title":"Programmatically Discovering Sharing Code With oEmbed | Design for Immersive Technologies","og:description":"Programmatically Discovering Sharing Code With oEmbedProgrammatically Discovering Sharing Code With oEmbed Drew McLellan 2019-11-26T11:00:00+00:002019-11-26T11:08:13+00:00The web is full of services that host rich content such as videos, images, music and podcasts, maps and graphs, and all manner of different delights. Chances are, when you add your content to a site, it will offer you a way","og:url":"https:\/\/www.taterboy.com\/blog\/2019\/11\/programmatically-discovering-sharing-code-with-oembed\/","article:published_time":"2019-11-26T11:17:26+00:00","article:modified_time":"2019-11-26T11:17:26+00:00","twitter:card":"summary","twitter:title":"Programmatically Discovering Sharing Code With oEmbed | Design for Immersive Technologies","twitter:description":"Programmatically Discovering Sharing Code With oEmbedProgrammatically Discovering Sharing Code With oEmbed Drew McLellan 2019-11-26T11:00:00+00:002019-11-26T11:08:13+00:00The web is full of services that host rich content such as videos, images, music and podcasts, maps and graphs, and all manner of different delights. Chances are, when you add your content to a site, it will offer you a way"},"aioseo_meta_data":{"post_id":"73303","title":null,"description":null,"keywords":null,"keyphrases":null,"canonical_url":null,"og_title":null,"og_description":null,"og_object_type":"default","og_image_type":"default","og_image_custom_url":null,"og_image_custom_fields":null,"og_custom_image_width":null,"og_custom_image_height":null,"og_video":null,"og_custom_url":null,"og_article_section":null,"og_article_tags":null,"twitter_use_og":false,"twitter_card":"default","twitter_image_type":"default","twitter_image_custom_url":null,"twitter_image_custom_fields":null,"twitter_title":null,"twitter_description":null,"schema_type":null,"schema_type_options":null,"pillar_content":false,"robots_default":true,"robots_noindex":false,"robots_noarchive":false,"robots_nosnippet":false,"robots_nofollow":false,"robots_noimageindex":false,"robots_noodp":false,"robots_notranslate":false,"robots_max_snippet":null,"robots_max_videopreview":null,"robots_max_imagepreview":"large","priority":null,"frequency":null,"location":null,"local_seo":null,"created":"2021-02-07 16:39:01","updated":"2026-09-02 13:44:36","focus_keyword":null,"additional_keywords":null,"truseo_locale":null,"primary_term":null,"og_image_url":null,"og_image_width":null,"og_image_height":null,"twitter_image_url":null,"schema":{"blockGraphs":[],"customGraphs":[],"default":{"data":{"Article":[],"Course":[],"Dataset":[],"FAQPage":[],"Movie":[],"Person":[],"Product":[],"ProductReview":[],"Car":[],"Recipe":[],"Service":[],"SoftwareApplication":[],"WebPage":[]},"graphName":"Article","isEnabled":true},"graphs":[]},"limit_modified_date":false,"ai":null,"breadcrumb_settings":null,"seo_analyzer_scan_date":null},"aioseo_breadcrumb":"<div class=\"aioseo-breadcrumbs\"><span class=\"aioseo-breadcrumb\">\n\t\t\t<a href=\"https:\/\/www.taterboy.com\/blog\" title=\"Home\">Home<\/a>\n\t\t<\/span><span class=\"aioseo-breadcrumb-separator\">»<\/span><span class=\"aioseo-breadcrumb\">\n\t\t\t<a href=\"https:\/\/www.taterboy.com\/blog\/category\/user-experience\/\" title=\"User Experience\">User Experience<\/a>\n\t\t<\/span><span class=\"aioseo-breadcrumb-separator\">»<\/span><span class=\"aioseo-breadcrumb\">\n\t\t\tProgrammatically Discovering Sharing Code With oEmbed\n\t\t<\/span><\/div>","aioseo_breadcrumb_json":[{"label":"Home","link":"https:\/\/www.taterboy.com\/blog"},{"label":"User Experience","link":"https:\/\/www.taterboy.com\/blog\/category\/user-experience\/"},{"label":"Programmatically Discovering Sharing Code With oEmbed","link":"https:\/\/www.taterboy.com\/blog\/2019\/11\/programmatically-discovering-sharing-code-with-oembed\/"}],"jetpack_publicize_connections":[],"jetpack_sharing_enabled":true,"jetpack_shortlink":"https:\/\/wp.me\/p8wzr5-j4j","jetpack_featured_media_url":"https:\/\/i0.wp.com\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/11\/logo-red-21.png?fit=60%2C80&ssl=1","_links":{"self":[{"href":"https:\/\/www.taterboy.com\/blog\/wp-json\/wp\/v2\/posts\/73303","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.taterboy.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.taterboy.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.taterboy.com\/blog\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/www.taterboy.com\/blog\/wp-json\/wp\/v2\/comments?post=73303"}],"version-history":[{"count":0,"href":"https:\/\/www.taterboy.com\/blog\/wp-json\/wp\/v2\/posts\/73303\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.taterboy.com\/blog\/wp-json\/wp\/v2\/media\/73304"}],"wp:attachment":[{"href":"https:\/\/www.taterboy.com\/blog\/wp-json\/wp\/v2\/media?parent=73303"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.taterboy.com\/blog\/wp-json\/wp\/v2\/categories?post=73303"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.taterboy.com\/blog\/wp-json\/wp\/v2\/tags?post=73303"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}