embedo / Embed Guidelines

Embedo only works for public URI having no authentication required or promising cross-domain policies of the host. It uses oEmbed API endpoints for facebook, twitter, instagram and vimeo acting more as a wrapper around respective API which allows using existing field-value set as explained further in documentation.

Quick Links

• Wiki on Github
• Demo or Live Test
• Codepen - Demo
• Codepen - Using with React

Facebook Page, Posts and Comments

This supports only public entities as page, post, videos, photos or comment(s).

The URL must contain the pageId or pageUsername and URL for photos, posts or videos should look or closer which support this expression.

https://www.facebook.com/[FACEBOOK_HANDLE]
https://www.facebook.com/[FACEBOOK_HANDLE]/photos/[SESSION_OR_USER_SCOPE_ID]/[POST_ID_HERE]
https://www.facebook.com/[FACEBOOK_HANDLE]/posts/[POST_ID_HERE]
https://www.facebook.com/[FACEBOOK_HANDLE]/videos/[POST_ID_HERE]/
https://www.facebook.com/pages/[FACEBOOK_HANDLE]/posts/[POST_ID_HERE]
https://www.facebook.com/pages/[FACEBOOK_HANDLE]/videos/[POST_ID_HERE]
https://www.facebook.com/[FACEBOOK_HANDLE]/posts/[POST_ID_HERE]?comment_id=[COMMENT_ID]
https://www.facebook.com/[FACEBOOK_HANDLE]/posts/[POST_ID_HERE]?reply_comment_id=[REPLY_COMMENT_ID]

PS: If you’re running this in headless browsers (eg. phantom) or demos on jsfiddle/codepen/etc, facebook SDK will throw security exception due to recent changes in their server. But it will work normally when script is imported.

Resources

• oEmbed API Documentation

Twitter - Tweets, Timelines and Grid

This is straightforward, the exact twitter URL can be embedded while passing options from oembed API.

https://twitter.com/[TWITTER_HANDLE]
https://twitter.com/[TWITTER_HANDLE]/status/[TWEET_ID]
https://twitter.com/[TWITTER_HANDLE]/timelines/[TIMELINE_ID]

For Timeline embed:

embedo.load(HTMLElement, 'https://twitter.com/TwitterDev/timelines/539487832448843776')

For Timeline Grid embed:

embedo.load(HTMLElement, 'https://twitter.com/TwitterDev/timelines/539487832448843776', {
  widget_type: 'grid'
})

Resources

• Twitter timeline embed guidelines
• Twitter for Websites Guidelines

Instagram Posts

Only posts can be embedded, no timeline. So your URL should be closer to this pattern:

https://www.instagram.com/p/[POST_ID_HERE]

Resources

• Instagram Embed Guidelines

YouTube Videos

Supports URLs matching /watch?v= or /embed in URL should work. Avoid playlist(s) URL.

https://www.youtube.com/watch?v=[VIDEO_ID]
https://www.youtube.com/embed/[VIDEO_ID]
https://youtu.be/[VIDEO_ID]

Vimeo

Supports URLs matching video or channel links.

https://vimeo.com/[VIDEO_ID]
https://vimeo.com/channels/[CHANNEL_HANDLE]/[VIDEO_ID]

Pinterest

By default, supports Pins embed.

https://www.pinterest.com/pin/[PIN_ID]
https://www.pinterest(.co.uk|.de|ANY)/pin/[PIN_ID]/

For Board embed:

embedo.load(HTMLElement, 'https://www.pinterest.com/pinterest/official-news/', {
  'data-pin-do': 'embedBoard',
  'data-pin-board-width': 400,
  'data-pin-scale-height': 240,
  'data-pin-scale-width': 80,
  'strict': true // To allow above size dimensions to be used
})

For Profile embed:

embedo.load(HTMLElement, 'https://www.pinterest.com/pinterest/', {
  'data-pin-do': 'embedUser'
})

Resources

• Pinterest Embed Guidelines

Others

The external links, based upon detected mime gets embed either in <iframe> or <video> elements. These could be any URL possible which has public access or cross-domain disabled.

Its also possible to override the HTML Tag using:

embedo.load(HTMLElement, 'https://my.awesome/url/here', { tagName: 'embed' })