Skip to content

Usage

Jump to bottom
Shobhit Sharma edited this page Jan 6, 2019 · 10 revisions

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

Facebook - Page, Posts or Comments

This supports only public posts, mostly Pages. If you see settings icon with a tooltip saying "Custom", that requires facebook authorization, so only globe icon ones should be embedded.

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

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

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

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

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' })
Clone this wiki locally