Trying here a test of my Comparator Tool blogged/flogged yesterday. While brushing my teeth last night, the idea came to me I was thinking about doing this the wrong way- an iframe is the route.
Let’s see if this works.
The code that does that looks like (yes it needs a noframes option):
Rather than the long mumbo jumbo I was doing before with all of the script references and HTML.
Let’s preview first. The splot was created here http://splot.ca/comparator/made/44/ and embed code copied.
Paws crossed.
EUREKA! Much easier embed AND it works in WordPress.
The first hitch was getting code into the output that checked for existing presence of jQuery and jQuery UI. You do not want to inject another if already present, and by default WordPress gives it to ya. Like 99% of the time, StackExchange came through with an answer with the code in a fiddle.
I actually had no idea you could do this, but if not included in the original page, you can dynamically add Javascript source libraries into the working space. This is what I have right before the part where the action happens
if (typeof jQuery == 'undefined') {
// jQuery is not loaded, load it
var script = document.createElement('script');
script.type = "text/javascript";
script.src = "//ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js";
document.getElementsByTagName('head')[0].appendChild(script);
// load jquery ui
var script_ui = document.createElement('script');
script_ui.type = "text/javascript";
script_ui.src = "//ajax.googleapis.com/ajax/libs/jqueryui/1.8.17/jquery-ui.min.js";
document.getElementsByTagName('head')[0].appendChild(script_ui);
} else {
// jQuery is loaded
if (typeof jQuery.ui !== 'undefined') {
// ui plugin exists
} else {
// ui plugin DOES NOT exist
var script_ui = document.createElement('script');
script_ui.type = "text/javascript";
script_ui.src = "//ajax.googleapis.com/ajax/libs/jqueryui/1.8.17/jquery-ui.min.js";
document.getElementsByTagName('head')[0].appendChild(script_ui);
}
}
So this takes care of checking for the two required pieces of jQuery. The rest of my new version then loads the before/after jQuery plugin (I have it loaded on Google Drive), and runs the rest of the code to display the widget just as it does on the Splot page.
To make this work, I create a blank WordPress page on my site named “Embed”. No content needed. Then in my theme there is a new template page-embed.php where I code in everything it needs to work.
What’s funny is you can take all of the WordPress header, footer, and content stuff out of the template. In fact, its just the HTML and Javascript needed to do the display work, using the same functionality I have working in the single.php that displays the thing in WordPress.
The only difference, we need to pass in a URL variable to indicate the post id, the key to getting all the info we use to grab the data within it.
So in functions.php I have some code that let’s me use my own custom URL parameters:
[cpde lang=”php”]
/* —– add allowable url parameter for urls */
add_filter(‘query_vars’, ‘comparator_parameter_queryvars’ );
function comparator_parameter_queryvars( $qvars )
// allow parameters to be passed in wordpress query strings
{
$qvars[] = ‘show’; // flag for showing w/o WP chrome
$qvars[] = ‘cid’; // post id for embeds
return $qvars;
}
[/code]
This lets me add parameters to my URLs like http://splot.ca/comparator/embed/?cid=12
So now in my script, I just need to grab this value, and I can use it as a post ID reference.
// just in case, put ID in for existing item
$default_cid = 12;
// get post id parameters from url string
$cid = (isset($_GET['cid'])) ? $_GET['cid'] : $default_cid;
I have one working on a demo HTML page on my site e.g. http://cogdogblog.com/stuff/mappy.html. The HTML for this page is pretty simple
Map o Rama
My Home Town
Everything below the line came from http://splot.ca/comparator/made/18/
I am not able to get this going on Dropbox or Google Drive, since they are all running on SSL now, and you cannot iframe to a source from a non https server. That’s minor for now.
But it’s embed! in bed! in wordpress!
This code is hardly prime time, but just to be a good citizen, all of it is now available on github.
Again, what I am interested here are the things needed to run things from WordPress that are more tool than blog or site.
