PHP

Custom Embed Code With JW Player For WordPress Plugin

If you care about this, I don’t need to give you too much background. Longtail’s JW Player is a great HTML5/Flash video player that has been around for years, with tons of plugins and a large user base, and at this point there’s very little you can’t do with it. At least as far as playing audio and video goes.

The guy who coded most of JW Player’s core and plugins has also produced a handy WordPress plugin that lets you integrate JW Player into your WordPress site, and for the most part it works beautifully.

There’s at least one exception: While you have the option to integrate the sharing plugin via the plugin’s settings in WordPress, you have one global field for “embed code” that can’t really accept anything useful. You have to URI escape anything that goes in there (which wouldn’t be so bad if there was a way to URI unescape the output), and there’s no way to add a MEDIAID variable in there so that your embed code can be dynamic (which is a complete dealbreaker for almost every user).

Well, I needed this feature, so I found a workaround. And I didn’t want to go hacking into the plugin code (so that I could update it later, without clobbering my fix), so the way I did it was through a PHP regex in my theme’s functions.php.

I first did two things, only one of which should be necessary: In the plugin configuration, I set my custom embed code to [FIXME], which is what my regex will look for, and replace with something useful.

Second, I edited sharing.xml in the WordPress plugin’s plugins directory, to use the sharing-3 repository, rather than sharing-1. I just prefer version 3′s interface, but I also figured newer was probably better. All I did was change the value of the <repository> field from sharing-1 to sharing-3.

But here’s the fix: In my theme’s functions.php, I added a filter for the_content (set at priority 999 so it would run after the JW Player plugin has already replaced my shortcode with the complete embed code), which finds the MEDIAID, and finds my [FIXME] placeholder, and assembles a good embed code. <embed id=”1″ /> is obviously not good embed code; that’s just for simplicity/illustration. You’ll want to replace that with your custom embed code, and here are some ideas on how to do that cleanly.

Theme functions.php

1
2
3
4
5
6
7
8
9
10
11
12
13

Caveat: This only fixes the players in the post body, and not the one generated for the og:video tag for playable embedding on Facebook. I’ll be figuring that out later, and eventually adding the code to this piece, for anyone that needs it.

Passing Query Variables To Facebook Fan Page Tabs

UPDATE: Apparently, you can pass variables in using Facebook’s app_data parameter, and then grab them by parsing out the signed request. Hard to say which is now the easier solution, but here’s another option, for whatever it’s worth. I guess it would be the way to go if you wanted to keep data out of the URL, or if you want a solution that also works outside of Facebook.

Here’s a trick to let you Facebook app developers do a couple of things that are typically considered impossible.

Let’s say you have a Facebook app with a Page Tab, and you want to pass it some dynamic variables from an external site or a share post. While you can link directly to a tab by appending an ?sk=app_ to the page URL (example), any custom, non-Facebook variables appended to the URL won’t be passed through to your tab page.

Another problem: Let’s say that tab page has links to sub-pages that load within the main tab iFrame (a la target=”_self”). That’s all easy enough, and pretty common. But what happens when you want to link to sub-sections of your tab page from an external site or share post?

You can’t get variables in through the “front door” so to speak, but you can pass them around the back, using what I call “the cookie trick” (or, inexplicably, “cookie party,” when it’s late in the office and we’re all loopy and/or drunk). The trick involves using a redirect that stores dynamic variables in a cookie, and then sends a user to the tab. When the tab loads, it grabs the data it needs from the cookie, and then deletes it. It’s completely transparent to the end-user.

Here’s all it takes. First, a redirect script:

1
2
3

$var = (empty($_GET['var'])) ? false : $_GET['var'];
if ($var) { setcookie('myapp_var', $var, time()+3600); }
header('Location: '.$fb_app_url);

Then, your main tab page just needs to check for the cookie, get what it needs, and then delete it:

1
2
3
4
5

$var = (empty($_COOKIE['myapp_var'])) ? false : $_COOKIE['myapp_var'];
if ($var) {
setcookie('myapp_var', '', time()-86400);
// Do stuff with $var...
}

Voila. You just send your vars to something like redirect.php?var=foo, and they’re slipped to your tab via the cookie.

If you want to link to a sub-page, just pass the sub-page path into your redirect.php as a variable, and then use a PHP header() redirect, or output a line of Javascript to send your users where they need to go.

Here’s an example of a deep-link to one of four mini-games in a Page Tab I built for The Black Eyed Peas Experience game: http://promethiumtorch.com/bep/redirect.php?goto=whatsyourgroove

Recent

I Read

Output

Custom Embed Code With JW Player For WordPress Plugin

Passing Query Variables To Facebook Fan Page Tabs