How To Create An Embeddable Content Plugin For WordPress

Quick Summary

WordPress is one of the most deployed content management systems around. One of the main reasons is the number of plugins available and the ease with which we can use the system. It is not uncommon to find websites using tens of plugins to accomplish various tasks and functions. Wouldn’t it be nice if you could share the site content with other websites?

Table of Contents

Members support Smashing

Wonderful, friendly people who keep this lil' site alive — and get smarter every day.

WordPress is one of the most deployed content management systems around. One of the main reasons is the number of plugins available and the ease with which we can use the system. It is not uncommon to find websites using tens of plugins to accomplish various tasks and functions. Wouldn’t it be nice if you could share your site content with other websites!

You may have a need to share advertisements, product information or, if you are a designer, your photo gallery. Whatever the reason, this article will show you a way to create an embeddable content plugin to share your WordPress content with other websites.

Ways Of Sharing Content

There are various ways with which one can share content across websites — RSS and Atom feeds, APIs and embeddable widgets. RSS feeds on WordPress are usually restricted to posts, while APIs are not easy to integrate on other websites without adding some extra code. This leaves us with embeddable widgets — like the ones used by Google AdSense to display advertisements on websites or Facebook “Share” and “Like” buttons — all of these rely on embeddable JavaScript code to display specific content on a website. The idea mentioned in this article is certainly not new, but in the context of WordPress it opens up many possibilities. The advantages of the technique mentioned here compared with others is that it will enable you to share almost any content, even content from other plugins on your blog, with other websites.

“You must unlearn what you have learned!” Meet the brand new episode of SmashingConf San Francisco with smart front-end tricks and UX techniques. Featuring Yiying Lu, Aarron Draplin, Smashing Yoda, and many others. Tickets now on sale. April 17-18.

Further Reading on SmashingMag:

Our goal in this article is to create widget code that a user could insert in their website to display a list of recent posts from the parent website. Of course, this can also be easily accomplished using RSS, but this is just an example to show the technique. In reality, you would use it for more interesting purposes, like sharing popular product images if you are running a WordPress e-commerce website.

The Widget Code

The embeddable code will look something like the following. This is the code the user will insert into their webpage, which will allow them to display the content from the parent website. The crucial element of this widget is the wp-widget.js file, which calls the remote WordPress website, gets the content and embeds it as an iframe in the calling page.

Adding this block of code to any website page will display the list of recent posts from example.com. The content can be anything besides posts — images, comments, tags, data from other plugins — anything you as a WordPress website owner would like to share with other people. For this example, I’ve limited the content to a simple posts list, as this is a common denominator across all WordPress websites and will be easy to start with. Of course, you will need to add some extra code to share other content, but the base plugin skeleton will remain the same.

Creating The Plugin

The fist step in creating an embeddable widget is to design a small WordPress plugin that will intercept the widget calls from another website and return the required data. You may be thinking that this will be a knotty job, but nothing could be easier. Just a few lines of code and our plugin is ready. The complete code for the plugin is shown below. I’ll explain how this works as we proceed along.

To get the content from the plugin, we will need to pass a query parameter of what content we would like from the remote server in the em_embed variable. This query parameter will then be intercepted by the plugin and the corresponding content returned. We will also pass along implicitly the domain URL of the calling page, so we can later use it for analytics purposes or for restricting the websites which can embed our widget.

For example, to get the list of recent posts, we need to send a GET query to the main WordPress website as shown below. Of course this query will be created by our JavaScript widget, wp-widget.js.

To successfully intercept calls from another website, we need to first add the em_embed and em_domain parameters to our WordPress query_var variable. This will be used later to see what kind of data needs to be sent to the remote website. This is done by the following function.

This is all there is to the plugin. If you need to export any other data, you will need to replace the code for getting posts with code for getting the data you like.

Is your pattern library up to date today? Alla Kholmatova has just finished a fully fledged book on Design Systems and how to get them right. With common traps, gotchas and the lessons she learned. Hardcover, eBook. Just sayin'.

Writing The Embeddable Widget Code

We have now completed only the part for the WordPress plugin. We still have to write the JavaScript embed code which will remotely access our website and insert the appropriate content into the calling page. The easiest way to display content from another website into your Web page is by using an iframe. The code needed to embed the content on a website is shown below.

wp-widget.js is the JavaScript that does all the work of calling the remote WordPress website and adding the content to the iframe. You need to place the wp-widget.js file in a subdirectory on your WordPress website; the exact name and location does not matter.

The complete code for the wp-widget.js is shown below, and is self-explanatory.

The task of inserting the iframe and the WordPress content in the DOM is accomplished by the main() function. The iframe size needs to be changed depending on your requirements or created dynamically by letting the user pass additional parameters along with the widget_embed variable in the main widget code.

Adding Custom CSS To The Content

You can also add custom CSS to the displayed content through the plugin. Sample CSS to go with the above plugin is given below. You can also specify a style sheet URL if needed.

The type of CSS you add to the content will depend on what content you are displaying. With a little creative coding, you can also allow the user to add certain display options to the widget with which they can control the display style of the embedded widget.

Restricting Display To Certain Domains

You may want to allow only certain domains to be able to display your content using the widget. This can easily be made possible, as we already have the calling website’s url in the em_domain variable. All we have to do is check the domain and selectively allow the content to be displayed.

Performance Concerns

Allowing other websites to access your content via widgets means additional load on your servers. A few hundred websites using your widget could easily slow down your server, so take this factor into consideration when promoting widgets. However, plugins like WP Super Cache can be used to cache widget data and reduce server load. If you are not using WP Super Cache or any other cache plugin, you can try using the WordPress Transients API to save the results into the database.

The WordPress Transients API offers a simple and standardized way of storing cached data in the database temporarily by giving it a custom name and a time frame, after which it will expire and be deleted. The catch_widget_query() function after adding the WP Transient API code is shown below.

public function catch_widget_query()
{
/* If no 'embed' parameter found, return */
if(!get_query_var('em_embed')) return;
/* 'embed' variable is set, export any content you like */
if(get_query_var('em_embed') == 'posts')
{
/* Here we are now using the 'WP Transient API'.
See if we have any saved data for the 'ewidget' key.
*/
$cached = get_transient('ewidget');
/* Oops!, the cache is empty */
if(empty($cached))
{
/* Get some fresh data */
$data_to_embed = $this->export_posts();
/* Save it using the 'WP Transient API' using the 'ewidget' key,
set it to expire after 12 hours.
*/
set_transient('ewidget', $data_to_embed, 60 * 60 * 12);
echo $data_to_embed;
}
/* Yes we found some, so we return that to the user */
else
{
echo $cached;
}
}
exit();
}

In Conclusion

Sharing your content across different websites is a nice way to market your services and create brand awareness. With millions of WordPress websites around, there is a huge amount of content out there that can be profitably shared among users. Not just text, but also images, videos, advertisements, etc. This article is just a simple implementation of an embeddable widget. You can customize it in various ways to include security, analytics code to track widget usage and other functionality.