WordPress has for some time offered support for a very convenient feature called oEmbed, which you may have used without even realizing it! In addition, the recent release of WordPress 4.0 included a great improvement to this functionality that loads the embedded elements using the oEmbed API directly in the editor.
How oEmbed works
oEmbed is a protocol that works like a normal link to resources, but it also gets additional information about those resources. The most common way you’ll see this used is in the way embedded video information is pulled from the host site, as well as stats from Twitter, presentations from SlideShare or images from Instagram.
How then does oEmbed works in WordPress? In a far easier way than you might think:
- First, we copy a link from the browser’s address bar (we don’t usually need to use specially-prepared links, like the share URL on a video)
- Next, we paste the copied link to an WordPress post editor
- WordPress generates a preview of said a link right in the editor without refreshing or reloading
- Finally, we save the entry so we don’t lose anything
It’s extremely easy and convenient, isn’t it?
Which elements may be inserted into articles?
Each WordPress release brings changes to the list of supported services offering support for oEmbed. A full and updated list can be found here.
And what if we do not want to embed everything in this way?
It may happen that you have a link that you don’t want to be embedded as a linked resource. Unfortunately, the ability to switch off this functionality has been removed from WordPress. However, there are two methods that we can use in order to stop a link from changing into a preview:
- Insert the address without part of the protocol i.e. remove the http:// or https:// text of the address
- insert the address as a link using a link button provided in the editor.
The parsing function will see only the links as separated by the white space (spaces, tabulation etc…) at the beginning and at the end, with a protocol at the front – other links won’t be parsed by oEmbed API.
Interesting news
WordPress uses the $content_width variable to define the preferred width of an embedded object, so it’s worth making sure that the theme you’re using has defined this value (this is most often found in the functions.phpfile):
if ( !isset( $content_width ) ) $content_width = 550;
You may also redefine some layout settings but using the following shortcode:
[embed]
For example, we can set the embed width and height:
[embed width=”480″ height=”240″]http://urltomovie.com[/embed]
Summary
oEmbed is an extremely useful function that significantly simplifies the interactive element embedding process from many popular sites and services on the web. It pays to remember that we can extend or limit its function ourselves so that WordPress works more in tandem with our needs.