Blog

There are now a huge number of third-party content providers that offer the ability to embed their content into your own website. YouTube is no longer the only media streaming service that you might want to include in one of your pages. Many other competing media streaming providers are now offering an API that should make it easy to embed their content. However, the question is what is the best way to include their content in one of your WordPress pages?

This post describes three different approaches to embedding third-party content. It is written for owners of self-hosted WordPress sites, but some of the techniques may also be applicable to sites hosted on WordPress.com. I will use the Mixcloud audio streaming service for the examples, specifically because it is not one of the out-of-the-box supported services in WordPress.

Auto-embed using oEmbed

As of WordPress v3.5, “auto-embeds” are automatically enabled and cannot be disabled. Whenever you include a URL for a supported service provider in one of your pages/posts, as long as the URL is on its own line and not explicitly hyperlinked within the visual editor, the linked content will be automatically embedded at that location on the page. For additional control over exactly how the content is embedded (and to remove the restriction of having it on its own line), you can use the embed shortcode instead.

That seems nice and easy – so what’s the catch?! Well unfortunately only a set of pre-approved service providers are supported by this mechanism. If you want to embed something from a provider that’s not on the list, it’s not going to work. But there is a solution…

As suggested by this iweb control blog post, you can easily register additional service providers (in this case Mixcloud) in your oEmbed whitelist by adding the following code snippet to the ‘functions.php’ file of your currently active WordPress Theme:

function iweb_register_additional_oembed_providers()
{
    wp_oembed_add_provider( 'http://www.mixcloud.com/*', 'http://www.mixcloud.com/oembed' );
}
add_action( 'init', 'iweb_register_additional_oembed_providers' );Code language: PHP (php)

If you don’t have direct FTP access to your WordPress installation, it is possible to add this snippet to the ‘functions.php’ file through the WordPress admin GUI as follows:

1. Log-in to the WordPress Dashboard as an Admin user.
2. Go to the “Appearance/Editor” page via the link on the left-hand side menu.
3. Click on the “Theme Functions (functions.php)” link on the right-hand side.
4. Scroll all the way to the bottom of the code editor in the centre of the page.
5. Start a new line at the bottom of the editor and paste in the above code snippet.
6. Click the “Update File” button.

You should now have added the new provider (in this case Mixcloud) to the oEmbed whitelist. Go ahead and test the auto-embed mechanism with a link from that site and make sure it works. You can add any other service provider that offers oEmbed support in the same way, by supplying different arguments to the wp_oembed_add_provider() function call in the code snippet.

The downside here is that not all service providers offer oEmbed support. Instead they may offer an easy way to generate some HTML code to embed their player/widget inside an iframe, but unfortunately you can’t just add an HTML iframe to a WordPress page by default as the visual editor usually mangles the syntax of your iframe HTML. However, there is a workaround…

The iframe WordPress Plugin

If you want to be able to embed any iframe you like in one of your posts/pages, you should install the iframe Plugin. This adds a new [iframe] shortcode to your WordPress installation, which accepts all the standard attributes that the <iframe> HTML element supports.

This is a great solution for embedding content that is delivered via an iframe and isn’t supported by the built-in oEmbed mechanism, or that doesn’t behave as you would like when included via an oEmbed link. But it’s still a bit low-level to have to install this plug-in and write shortcodes. Is there an easier way?

Provider-specific Plugins

If you’re lucky, you may find that someone has already written a service-specific WordPress Plugin that makes it easy to embed content from that particular provider. In the case of Mixcloud, you should definitely look at the Mixcloud Embed Plugin. This adds a new shortcode that makes it easy to embed Mixcloud content.

If you’re very keen and you can’t find a suitable plugin already out there, you could always consider writing your own!