Ways to Create Embeddable Content Plugin to Share WordPress Content

imagesMarketing content that has been developed for the content management system requires a lot of effort. The ease with which content can be generated for a content management system is not forwarded to marketing or sharing the content across websites. While there is a provision of marketing or sharing content using RSS feeds and APIs, there is a certain level of difficulty being observed in the way the content is shared or integrated using such systems. This is probably why there is a need for embeddable content plugin widget to be created such that the content can be easily shared or integrated without loading the website or lowering its speed.

These embeddable widgets are developed using JavaScript code which makes it pretty light for the website. There are ways in which you can create a widget code which the user can easily integrate to their websites and share the content. Some of the best examples of widgets would be social sharing widgets, which have not just lowered the speed of the website, but also made it pretty interactive.

How the Widget Code Appears?
Before you start to understand how a widget code is created, let’s try and understand how a widget code looks like to the user. This widget code will be used by the user in his/her website to integrate the content sharing plugin. The most important part of any widget code is wp-widget.js file which calls the wordpress website which is remotely placed. This is the file that calls for the content and then allows you to embed it to other websites. Basically without this file, you won’t be able to share the content.

This is how the widget code appears:
<script type=”text/javascript”>
var widget_embed = ‘posts’;
</script>
<script src=”http://www.example.com/widget/wp-widget.js&#8221;
type=”text/javascript”>
</script>
<div id=”embed-widget-container”></div>

This is an example, and when the user tends to add this widget to their website, they will be able to see all the posts from example.com website. With this widget, you can easily share or subscribe to content from a particular website. This widget would not even lower the speed of your website.

How to Create the Plugin?
Now that you know how the widget looks like, let’s see how to create this kind of plugin for content sharing.

Before you create the embeddable widget, you will need to create the plugin that will intercept this kind of widget. All you need to do is code a bit, and your plugin is ready for use.

This is how you code the plugin

<?php

/**
* Plugin Name: WordPress Widget Embed
* Description: Allow people to embed WordPress content in an iframe on other websites
* Version: 1.0
* Author: Sameer Borate
* Author URI: http://www.codediesel.com
*/

class WPWidgetEmbed
{
public function __construct()
{
add_action(‘template_redirect’, array($this, ‘catch_widget_query’));
add_action(‘init’, array($this, ‘widget_add_vars’));
}

/**
* Adds our widget query variable to WordPress $vars
*/
public function widget_add_vars()
{
global $wp;
$wp->add_query_var(’em_embed’);
$wp->add_query_var(’em_domain’);
}

private function export_posts()
{
$outstring  = ‘<html>’;
$outstring .= ‘<head><style>’;
$outstring .= ‘ul {
padding:0;
margin:0;
}
li {
list-style-type:none;
}’;
$outstring .= ‘</style></head><body>’;

/* Here we get recent posts for the blog */
$args = array(
‘numberposts’ => 6,
‘offset’ => 0,
‘category’ => 0,
‘orderby’ => ‘post_date’,
‘order’ => ‘DESC’,
‘post_type’ => ‘post’,
‘post_status’ => ‘publish’,
‘suppress_filters’ => true
);

$recent_posts = wp_get_recent_posts($args);

$outstring .= ‘<div class=”widget-posts”><ul>’;
foreach($recent_posts as $recent)
{
$outstring .= ‘<li><a target=”_blank” href=”‘ . get_permalink($recent[“ID”]) . ‘”>’ . $recent[“post_title”]. ‘</a></li>’;
}

$outstring .= ‘</ul></div>’;
$outstring .= ‘</body></html>’;

return $outstring;
}

/**
* Catches our query variable. If it’s there, we’ll stop the
* rest of WordPress from loading and do our thing, whatever
* that may be.
*/
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’)
{
$data_to_embed = $this->export_posts();
echo $data_to_embed;
}

exit();
}
}

$widget = new WPWidgetEmbed();

?>

Once you have generated the plugin, you need to generate a query that will ask for a specific content from the plugin. Basically, you need to be aware of the content that you want to get from the remote wordpress website, and share that content specifically.

You will need to add em_embed and em_domain to the wordpress query query_var. To add these files, you will need to use the code stated below
public function widget_add_vars()
{
global $wp;
$wp->add_query_var(’em_embed’);
$wp->add_query_var(’em_domain’);
}

Now assume that your em_embed is set as a global variable. This means the variable will need to be read every single time it is called. For this purpose you will need to set this query variable as part of the temple_redirect. This way you won’t need to code much, and you will be able to call the variable easily.

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’)
{
$data_to_embed = $this->export_posts();
echo $data_to_embed;
}

exit();
}

How to Create the Embeddable Widget Code?
Once you are done with creating the plugin, and generating the query to call the widget from remote website, you will need to begin the work of generating the widget code for the content sharing purpose. One of the easiest way to develop an embeddable widget code that can be integrated and shared with users is as follows.

<script type=”text/javascript”>
var widget_embed = ‘posts’;
</script>
<script src=”http://www.example.com/widget/wp-widget.js&#8221;
type=”text/javascript”>
</script>
<div id=”embed-widget-container”></div>

Here the wp-widget.js is the file that does maximum work right from calling the remote website to actually sharing the content along the website.

Here’s how the complete code would appear for creating the widget.
/**
* wp-widget.js
*
* Inserts an iframe into the DOM and calls the remote embed plugin
* via a get parameter:
* e.g http://www.example.com/?embed=posts
* This is intercepted by the remote ‘WordPress Widget Embed’ plugin
*
*/

(function() {

// Localize jQuery variable
var jQuery;

/* Load jQuery if not present */
if (window.jQuery === undefined || window.jQuery.fn.jquery !== ‘1.7.2’)
{
var script_tag = document.createElement(‘script’);
script_tag.setAttribute(“type”,”text/javascript”);
script_tag.setAttribute(“src”,
http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js&#8221;);
if (script_tag.readyState)
{
script_tag.onreadystatechange = function ()
{ // For old versions of IE
if (this.readyState == ‘complete’ || this.readyState == ‘loaded’)
{
scriptLoadHandler();
}
};
}
else
{
script_tag.onload = scriptLoadHandler;
}

(document.getElementsByTagName(“head”)[0] || document.documentElement).appendChild(script_tag);
}
else
{
// The jQuery version on the window is the one we want to use
jQuery = window.jQuery;
main();
}

/* Called once jQuery has loaded */
function scriptLoadHandler()
{
jQuery = window.jQuery.noConflict(true);
main();
}

/* Our Start function */
function main()
{
jQuery(document).ready(function($)
{
/* Get ’embed’ parameter from the query */
var widget = window.widget_embed;
var domain = encodeURIComponent(window.document.location);

/* Set ‘height’ and ‘width’ according to the content type */
var iframeContent = ‘http://www.example.com/?em_embed='+widget+'&em_domain='+domain+'‘;

$(“#embed-widget-container”).html(iframeContent);
});
}

})();

The main () function is the one that takes the onus of the task of creating an iframe and sharing the content across websites.

Once you have created this widget, and the plugin, you can integrate and share the content of your website across websites.

Author Bio:
Salim Ghanchi is professional senior WordPress developer  at IndianAppDevelopers company, He like to share tips and tricks of WordPress plugins, themes development process via Facebook, Twitter and other social media networks.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s