Embedding Content in LinkedIn Posts Using oEmbed
One of the more expressive features of LinkedIn’s Publishing Platform is the ability to embed content from another site into an article.
For example, I could direct you to view this video:
But even better, I can embed the video into the article, like this:
How do we do that?
YouTube provides a mechanism for embedding video content in other web pages. If you view the video above on the YouTube site, you can see the code for embedding the video by clicking the “Share” button and then the “Embed” button.
The video can be embedded in another web page by including the snippet of HTML provided by YouTube:
<iframe
width="560"
height="315"
src="https://www.youtube.com/embed/WI_Ls-zD4VU"
frameborder="0"
allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen>
</iframe>
Unfortunately, you can’t use that embed HTML directly on the LinkedIn Publishing Platform. There is no feature for pasting a snippet of HTML into your article.So, how is embedding done?
Well, how might we do it? You may have noticed that the URL for the video:
https://www.youtube.com/watch?v=WI_Ls-zD4VU
Is similar to the URL inside the HTML for embedding the video:
https://www.youtube.com/embed/WI_Ls-zD4VU
So, it’s plausible to imagine that we recognize that this is a YouTube video, and that ID of this video is WI_Ls-zD4VU. Then, if we know the proper format for an embedded YouTube video URL, we can construct the embed HTML by inserting the ID in the right place.
We could have done it that way. The problem is that we’d like to support embedding for all sorts of content, and every service works slightly differently.
We would need to have custom code to implement embedding support for every provider. Not only that, but any provider might decide at any time to change how they implement embedding in a way that breaks our assumptions, causing the embeds to fail.
Origins of oEmbed
Around 10 years ago, a company called Pownce was facing exactly this problem. As the story is told by Leah Culver, she and her coworker at Pownce, Mike Malone, were having dinner with Cal Henderson (Flickr) and Richard Crowley (OpenDNS). They chatted about this problem and conceived the idea of creating an open standard for sharing embed code. Cal drafted an initial spec overnight, and they named it oEmbed.
It basically works by having your site say to YouTube, “Hey, I want to add this video to my post. Can you please send me the HTML? Thanks!” – Skookum Monkey
Many content providers implement oEmbed, which LinkedIn uses to support embedding. Here is how it works in the case of YouTube.
Inside the HTML of the YouTube video above, there are two extra tags in the <head> section that tell us how to call YouTube’s oEmbed endpoint. Here’s one of them (the other one supports retrieving the same data in XML format).
<link rel="alternate"
type="application/json+oembed"
title="Embedding a Video on LinkedIn Publishing Platform">
This tag tells us that to retrieve the oEmbed data for this video, we should get this URL:
https://www.youtube.com/oembed?url=https%3A%2F%2Fwww.youtube.com%2Fwatch%3Fv%3DWI_Ls-zD4VU&format=json
This URL returns a packet of data in JSON format that looks like this:
{
"thumbnail_height":?360,
"provider_name":?"YouTube",
"html":?"<iframe width=\"480\" height=\"270\" src=\"https://www.youtube.com/embed/WI_Ls-zD4VU?feature=oembed\" frameborder=\"0\" allowfullscreen></iframe>",
"title":?"Embedding a Video on LinkedIn Publishing Platform",
"height":?270,
"type":?"video",
"provider_url":?"https://www.youtube.com/",
"thumbnail_width":?480,
"author_url":?"https://www.youtube.com/channel/UCYvvghEq7ThacEF6PP0vgDA",
"width":?480,
"author_name":?"David Max",
"version":?"1.0",
"thumbnail_url":?"https://i.ytimg.com/vi/WI_Ls-zD4VU/hqdefault.jpg"
}
This data provides us with lots of useful information. For example, included here is the title of the video, as well as the URL for the thumbnail image that goes with it. For the purposes of embedding, the most important field is the “html” field. It contains this same snippet of HTML we saw before that tells us how to embed the video into the article.
What’s so powerful about oEmbed is that we can use essentially the same technique to embed completely different kinds of content. For example, l can embed this SoundCloud audio stream:
领英推荐
The same oEmbed mechanism allows us to obtain the HTML for embedding this content. In the HTML of the SoundCloud page is this link to the oEmbed endpoint:
<link rel="alternate"
type="text/json+oembed"
>
When we download the data from the oEmbed endpoint, we get:
{
"version": 1,
"type": "rich",
"provider_name": "SoundCloud",
"provider_url": "https://soundcloud.com",
"height": 400,
"width": "100%",
"title": "Blitzscaling 19 | Jeff Weiner on Establishing a Plan and Culture for Scaling by Greylock Partners",
"description": "This is session 19 of Technology-enabled Blitzscaling, a Stanford University class taught by Reid Hoffman, John Lilly, Allen Blue, and Chris Yeh. This class features Reid Hoffman interviewing Jeff Weiner, the CEO of LinkedIn.",
"thumbnail_url": "https://i1.sndcdn.com/artworks-000149288921-qvy4r3-t500x500.jpg",
"html": "<iframe width=\"100%\" height=\"400\" scrolling=\"no\" frameborder=\"no\" src=\"https://w.soundcloud.com/player/?visual=true&url=https%3A%2F%2Fapi.soundcloud.com%2Ftracks%2F249739519&show_artwork=true\"></iframe>",
"author_name": "Greylock Partners",
"author_url": "https://soundcloud.com/greylock-partners"
}
In there is the HTML for embedding the SoundCloud player:
<iframe
width="100%"
height="400"
scrolling="no"
frameborder="no"
src="https://w.soundcloud.com/player/?visual=true&url=https%3A%2F%2Fapi.soundcloud.com%2Ftracks%2F249739519&show_artwork=true">
</iframe>
Notice that even though it’s different from YouTube, we can still use the same oEmbed mechanism to retrieve it.
Some other examples. The oEmbed links and embeddable HTML don’t follow any particular convention from one provider to another.
Embedded HTML:
<a data-flickr-embed="true" title="FOWA Miami - Leah Culver by hyku, on Flickr"><img src="https://farm3.staticflickr.com/2169/2300680760_600aa44314_b.jpg" width="1024" height="685" alt="FOWA Miami - Leah Culver"></a><script async src="https://embedr.flickr.com/assets/client-code.js" charset="utf-8"></script>
SlideShare OAuth and OEmbed:
Embedded HTML:
<iframe src="https://www.slideshare.net/slideshow/embed_code/key/eg8zV35wx3ux87" width="427" height="356" frameborder="0" marginwidth="0" marginheight="0" scrolling="no" style="border:1px solid #CCC; border-width:1px; margin-bottom:5px; max-width: 100%;" allowfullscreen> </iframe> <div style="margin-bottom:5px"> <strong> <a title="OAuth and OEmbed" target="_blank">OAuth and OEmbed</a> </strong> from <strong><a target="_blank" >leahculver</a></strong> </div>
Embedded HTML:
<blockquote class="twitter-tweet"><p lang="en" dir="ltr">Additional hugs and love to <a >@leahculver</a>, <a >@mjmalone</a>, <a >@rcrowley</a> and <a >@iamcal</a> for inventing oEmbed.</p>
— Ben Ward (@benward) <a >December 8, 2011</a>
</blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
Support is Not Universal and Not Complete
Not every sort of content that supports embedding implements oEmbed. Some providers support embedding, but they expect that their content will be embedded in a page where there user can directly insert the snippet of HTML that implements the embedding.
And, not every content provider that supports oEmbed is enabled to embed content in on the LinkedIn Publishing platform. The LinkedIn platform does not simply pass through every embed HTML returned through the oEmbed protocol.
When you’re creating a site that’s going to display HTML (as with video embeds), there’s always the potential for cross-site scripting (XSS) attacks from the site providing the code.?– Getting Started With OEmbed
One reason is security. In some cases, the embed HTML contains scripting calls or other features that are disallowed by default. There is a review process before a provider is enabled for embedding content. WordPress follows a similar procedure.
Here is a list of Providers We Support for Embedding Content Within an Article on LinkedIn. As of this time, LinkedIn does not have plans to add new providers, but refer to that page to find out the latest.
****
Please join the conversation...
What do you think? Comment below.
Thanks for reading. You can find my other LinkedIn articles here (https://www.dhirubhai.net/today/author/davidpmax).
Senior Full Stack Developer at Bonds.com
1 年I spent an entire afternoon creating a PPT for upload to Slideshare with the idea that I'd be able to embed it inline in LinkedIn. Unfortunately, users have to click the presentation to go to slideshare and see it, not what I expected after reading this. Oh, well, now I know if I'm going to spend an afternoon creating content, do it in Medium!
Founder & CEO at Thetawise - The AI Math Tutor
2 年Hi David Max , Thanks so much for the great article! Could you touch on how a website/company can become a supported provider? Our company, Authillo, prevents fake accounts & proves that someone is who they say they are with a verified badge by their profile picture. We would like to integrate with linkedin; do you know who at linkedin we should get in contact with to become a supported provider?
Counsel, Investment Funds, Linklaters
2 年Are there plans to allow Flourish data visualizations to be embedded into LinkedIn posts?
Technical Sales Representative & EMEA Automation Champion
2 年Hi David. Very interesting article. Quick question: Is it possible to constantily auto feed with new articles from for example our own company our profile?....or you can have just a "channel" linked from the list of providers gave where it is like a door that when you open and only when you open you would see the content. Many thanks
Business and Career Coach - Digital Learning Specialist - Progettista di formazione - Formatore
3 年Hi, I would like to embed a html5 code available as link. How can I make it?