Embed JW Player into Facebook wall with plugins (OVA), flexible way

I needed to embed videos on users’ Facebook walls and used JW Player for this because it has many ways of embedding.

I’ll show you how to embed videos using external config file because this way is very flexible. If you use embedding jw player with adding player settings as parameters to URL this is not so good because you cannot change it in future when you need for example remove some settings or add some plugin.
Using approach of external configuration file you can manage all embedded videos when needed.

So here is steps:

1. Enable HTTPS on your server, JW Player should be accessible via HTTPS otherwise it will not work.

2. Get into Facebook Open Graph protocol and put necessary into your page (in head section):
[html]
<meta name="medium" content="video"/>
<meta name="og:video:height" content="260"/>
<meta name="og:video:width" content="420"/>

3. Create configuration config.xml file.

So, I needed to have in my embedded player:

video streaming via RTMP
skin GLOW
custom logo (available only for paid player)
advertisements in embedded videos (below the details, after code snippet)

[xml]
<config>
<autoStart>true</autoStart>
<wmode>transparent</wmode>
<dock>true</dock>

<streamer>rtmp://streaming-provider.com/_definst_/</streamer>
<file>mp4:flash/path/to/video/file.mov</file>
<provider>rtmp</provider>
<image>http://www.alexfilatov.ch/images/640x360_2yl59g8h.jpg</image>
<link>http://www.alexfilatov.com/path/to/your/video/page</link>

<skin>http://www.alexfilatov.com/jw-player/skins/glowglow.zip</skin>
<logo.file>http://www.alexfilatov.com/uploads/23.png</logo.file>
<logo.link>http://www.alexfilatov.com/some/link/on/logo/click</logo.link>
<logo.hide>false</logo.hide>
<logo.position>bottom-right</logo.position>
<logo.linktarget>_blank</logo.linktarget>
<logo.margin>30</logo.margin>
<logo.over>1</logo.over>
<logo.out>0.8</logo.out>

<ova.json>
{
"ads":{
"skipAd":{
"enabled":true,
"html":"CLOSE AD",
"region":{
"verticalAlign":3,
"horizontalAlign":3,
"backgroundColor":"#cccccc",
"opacity":0.8,
"borderRadius":15,
"padding":"0 1 1 13",
"width":90,
"height":16
}
},
"notice":{
"type":"countdown",
"message":"_countdown_ seconds left"
},
"clickSign":{
"enabled": "true",
"opacity":0.5,
"style":".smalltext { font-size:12pt; }",
"html":"Click to see the product",
"scaleRate":0.75
},
"schedule":[{"zone":23,"position":"pre-roll","showCloseButton":"true","server":{"type":"openx","apiAddress":"http://ad.alexfilatov.com/www/delivery/fc.php","allowAdRepetition":"true","playOnce":"true","failoverServers":[{"tag":"http://some.other.ad-server.com/ad.php?033c63539ff580e4c92bec34e5c78fcf;7;7;mp4;de;R16:CH23:SC927:V9336;1339067042"}]}},{"zone":"30","position":"post-roll","showCloseButton":"true","server":{"type":"openx","apiAddress":"http://ad.alexfilatov.com/www/delivery/fc.php","allowAdRepetition":"true","playOnce":"true","failoverServers":[{"tag":"http://some.other.ad-server.com/ad.php?033c63539ff580e4c92bec34e5c78fcf;7;7;mp4;de;R16:CH23:SC927:V9336;1339067042"}]}}]
}
}
</ova.json>

</config>
[/xml]
This is the working config.xml for the Facebook embedding purpose, you need just to change all URLs and JSON for <ova.json>

During browsing the internet for embedding with external configuration solution I’ve found way of embedding plugins by adding <pluginconfig><plugin name=”hd”>…</plugin></pluginconfig>. This approach doesn’t worked for me. But when I added in the config.xml line ‘<plugins>hd</plugins>‘ everything worked like a charm!

Useful links:

Ways of embedding JW Player, please note there are example with <ova.json> configuration.

OVA setup, there is info about JSON configuration

Facebook debugger, the checker for your video page, tells you whether it is ready for embedding or which issues you need to fix, very useful!

Fancy Glow skin