How to Allow Others to Embed Your WordPress Posts

Embedding has now become the norm when it comes to sharing content on websites. In WordPress, embedding content from sites like Youtube, Twitter, and SoundCloud is downright easy, thanks to the oEmbed API. Simply add the link into the post content and, WordPress immediately parses the link and renders it into a presentable format.

But, what do you think of the idea to embed a WordPress post, in a way similar to how we would embed a Tweet or a Youtube video? Allowing readers to embed your post would certainly increase your site engagement and viewership coming from other websites.

This genuine idea is under discussion, in the WordPress development group, to be added into the WordPress Core functionality in the future. But as of now, we can apply it into our blog with the help of a plugin called oEmbed API.

Getting Started

First of all, this plugin requires at least WordPress 4.3 so ensure that your website has been updated. Install the oEmbed API plugin. The site must be accessible online, otherwise the embed could fail.

Once the plugin is activated, you can copy a post permalink URL and paste it in the other website content or in a post within your own blog. Here is how the embedded content will look like:

The embedded content is nicely laid out. It shows the post title, the excerpt, the site name, the number of comments, and the Share button which will display the post permalink for embedding the content. And that is essentially all you have to do.

If you are fine with the default output you can stop here. But if you want more customization options, here are a couple of things you can do.

Change the Icon

One of the reasons this plugin requires the latest WordPress version is the Favicon. The ability to add favicon natively through the dashboard has only been introduced in 4.3. but this also means that your embedded content will be displayed with the WordPress icon inline with your site name.

For us, this seems irrelevant since the content comes from our site, not WordPress icon. We’d like to see our site logo inline with our site name instead. To do this, we go to the Appearance > Customize > Site Identity tab.

Upload the image icon here and save changes. You will then see the site icon you uploaded in the embedded content. Here’s what ours look like:

Actions and Filters

Actions and Filters are two methods we use to customize outputs in WordPress. At the current stage, however, the plugin does not come with specific actions or filters that can be hooked into the CSS or JavaScript.

Yet, it provides a rest_oembed_output action that we can leverage for adding new content as part of the final output, including an inline style. It isn’t ideal, but at the very least, it lets you override the styles of the embedded content.

The following is an example of a code that you could add into your theme functions.php to turn the font to serif type.

function hkdc_oembed_output() { ?>
	<style>
		.wp-embed {
			font-family: serif !important;
		}
	</style>
<?php }
add_action( 'rest_oembed_output', 'hkdc_oembed_output', 11 );

Another hook we can use to customize output is the rest_oembed_output_excerpt_length filter which allows us to set a word limit in the post excerpt. The default length is set to 35. So, say we would like to shorten it to 28, just add the following function:

function hkdc_oembed_excerpt_length() {
	return 28;
}
add_filter( 'rest_oembed_output_excerpt_length', 'hkdc_oembed_excerpt_length', 9 );

Just change the return number, as needed.

Wrap Up

At the moment of this writing, oEmbed API is still undergoing development, which might be one reason it does not come with sufficient Hooks for content modification yet. Hopefully, as the codes are ironed out, more Hooks are added

You can follow the development progress in the Github issue tickets as well as in the WordPress Dev thread. All in all, this will be a great addition for WordPress.