Playing back an embedded mp4 video in a Facebook like or share using Flash
I have an H.264-encoded mp4 file that I'm trying to get embedded into a Facebook post when the page that's serving it is Liked or Shared.
My understanding is that I simply need to have the right Open Graph <meta> tags in place on the URL that's being liked/shared. However, I've tried several different sets of <meta> tags and the video is still not embedding when I paste the URL into my Status Update and Post it. It does embed the image from the og:image property, but clicking on the image just passes the user off to og:url.
When I use the the Facebook Debugger tool, here's what it displays for Raw Open Graph Document Information:
Meta Tag: <meta property="fb:app_id" content="000000000000000" />
Meta Tag: <meta property="og:url" content="http://www.testdomain.com/path/to/shared/page" />
Meta Tag: <meta property="og:title" content="Example Page" />
Meta Tag: <meta property="og:description" content="Example Description" />
Meta Tag: <meta property="og:site_name" content="Example" />
Meta Tag: <meta property="og:image" content="http://content.example.com/images/example.png" />
Meta Tag: <meta property="og:type" content="video.other" />
Meta Tag: <meta property="og:video:width" content="400" />
Meta Tag: <meta property="og:video:height" content="300" />
Meta Tag: <meta property="og:video" content="http://static.example.com/flowplayer-3.2.15.swf?config=%7b%22clip%22%3a%22http%3a%2f%2fcontent.example.com%2fpath%2fto%2fvideo.mp4%3fv%3d0%22%7d" />
Meta Tag: <meta property="og:video:type" content="application/x-shockwave-flash" />
Meta Tag: <meta property="og:video" content="http://content.example.com/path/to/video.mp4?v=0" />
Meta Tag: <meta property="og:video:type" content="video/mp4" />
Meta Tag: <meta property="og:video" content="http://www.testdomain.com/path/to/shared/page" />
Meta Tag: <meta property="og:video:type" content="text/html" />
The values above have been replaced with dummy values, but they're all valid links.
Facebook seems to parse this out correctly, since it shows under Type of Share -> Video:
status: Video embedding on Facebook enabled
1: application/x-shockwave-flash
2: text/html
When I go directly to the flash player url (http://static.example.com/flowplayer-3.2.15.swf?config=%7b%22clip%22%3a%22http%3a%2f%2fcontent.example.com%2fpath%2fto%2fvideo.mp4%3fv%3d0%22%7d), the video plays correctly (embedded in the flash player).
Things I've tried/considered:
Skipping the flash player
Originally I didn't even have a flash player in the og:video list and was trying to just use the mp4 file first. Facebook didn't pick it up and treated the like/share as a plain link share.
Whitelisting
At one point apps/domains had to be whitelisted before embedded video was allowed. This is no longer necessary. I haven't whitelisted my domain.
HTTPS
Some sources say that the flash player being used needs to be hosted over HTTPS. My research indicates this should only apply if the user is browsing Facebook over HTTPS, which I haven't been when testing.
I'm currently running some tests with an HTTPS-served flash player to see if anything changes.
Older tags
For the heck of it, I tried adding older Facebook <meta> and <link> tags (e.g. title, video_src) to see if it would pick them up. It did not.
Cache refresh
I passed a ?fbrefresh=1 along with the URL in the Facebook Debugger to make sure the cached version of the URL got cleared. That did result in the newest meta information getting pulled in, but still no embed.
iPad
Since I've got the video/mp4 fallback in my og:video tags, I looked at my Facebook news feed in the iPad app. Excitingly, the thumbnail image had a little play button overlayed on it. However, touching the play button resulted in a redirect to the share URL instead of playing the video inline. Safari on the iPad had the same behavior (but with no play button overlay).
Document namespaces
I added the appropriate Open Graph / Facebook namespaces to my markup:
<html xmlns:og="http://ogp.me.ns#" xmlns:fb="http://www.facebook.com/2008/fbml">
<head prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# video: http://ogp.me/ns/video#">
But it didn't seem to have an effect. I don't think they're required.
Is there something that I'm missing here? I feel like a lot of resources I've found so far could be outdated since Facebook has changed their API several times, so it's possible that I've missed a newer requirement.
How can I get the video to embed and play back within the Facebook timeline?
Having a look at YouTube's og: meta tags, the only differences I can spot are:
- YouTube's
og:urlandog:videoare served from the same domain and subdomain (www.youtube.com). Mine are served from the same domain, but different subdomains (media:content.example.com, player:static.example.com). Does the subdomain have to be the sam across all of theog:meta information? YouTube's share URL isn't a straight
.swfper se, but it is flash content:rob@uvm:~$ curl "http://www.youtube.com/v/oHg5SJYRHA0?version=3&autohide=1" > yt % Total % Received % Xferd Average Speed Time Time Time Current Dload Upload Total Spent Left Speed 100 4242 100 4242 0 0 43522 0 --:--:-- --:--:-- --:--:-- 55815 rob@uvm:~$ file yt yt: Macromedia Flash data (compressed), version 10
Just realized that one of my URLs is actually on a different domain. I have a feeling that's the culprit. I'm moving some stuff around now to try it out. I've updated my meta tag data above. Feel a bit sheepish for not making this observation up front.
Answer
Here's what ended up working for me.
<!-- These two aren't necessary for embedding. -->
<meta property="og:site_name" content="Example">
<meta property="fb:app_id" content="000000000000000">
<!-- These are mostly needed. A few are probably still optional, but they're all good to have. -->
<meta property="og:type" content="movie">
<meta property="og:title" content="Example Page">
<meta property="og:description" content="Example Description">
<meta property="og:url" content="http://www.testdomain.com/path/to/shared/page">
<meta property="og:image" content="http://content.example.com/images/example.png">
<meta property="og:video" content="http://static.example.com/player.swf?file=http%3a%2f%2fcontent.example.com%2fpath%2fto%2fvideo.mp4%3fv%3d0&autoplay=true">
<meta property="og:video:type" content="application/x-shockwave-flash">
<!-- Not necessary, but might (can't find up-to-date docs) be used for iOS fallback. -->
<meta property="og:video" content="http://content.example.com/path/to/video.mp4?v=0">
<meta property="og:video:type" content="video/mp4">
Some observations and useful information:
Flash player
- I switched to using JWPlayer since its query parameter flashvars configuration was slightly simpler than FlowPlayer's. I think I could have gotten FlowPlayer to work with a bit more effort. JWPlayer also has a nice instructional page for Facebook embedding. (Note: many Flash players require a purchased license for commercial use - make sure you get one if necessary.)
Open Graph <meta> tags
- Using movie worked for for
og:type. I was originally usingvideoandvideo.other. Those probably work as well, but using movie definitely worked for me. - The following
og:properties were not necessary for embedding:fb:app_id,og:video:width,og:video:height. - Note the URLEncoded
filequery parameter. Needing to do this should be fairly obvious, but keep in mind to encode the parameter values separately. The ampersand (&) beforeautoplay=truewas XMLEncoded before getting added to the page markup. The ampersand was correctly decoded when viewing it in the Facebook Debugger's "Object Properties" section. - Hosting the content and shared url on separate subdomains didn't matter. The only domain concerns that might cause problems are within the flash player itself, and can be avoided with a correctly-configured
crossdomain.xmlon the content server.
Facebook Debugger Tool observations
- The Debugger Tool's "Type of Share" section was slightly misleading:
This is what it showed when I had both application/x-shockwave-flashandvideo/mp4types. I would have expected it to have two items in this list, but it just had the second. Despite that, the flash player still embedded. - I was initially wondering if Facebook was getting caught up with the URLEncoded parameters when I saw that it was showing everything represented as unicode:
However, looks like that's not a problem. Don't let it confuse you.
HTTPS
The code above doesn't embed with https Facebook browsing. Additionally, the
og:video:secure_urlmeta property didn't work (maybe due to this). What I ended up doing was serving both the flash player and its source mp4fileparameter over https. The resulting meta tag looked something like:<meta property="og:video" content="https://static.example.com/player.swf?file=https%3a%2f%2fcontent.example.com%2fpath%2fto%2fvideo.mp4&autostart=true" />The
og:videowas the only one that needed to be over https;og:image,og:url, etc. were okay still being served over http.
Hopefully this'll help others avoid the dead ends and red herrings that I ran into while debugging and learning about all of this.