Menu
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:
og:url and og:video are 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 the og: meta information? YouTube's share URL isn't a straight .swf per 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.
686
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
Open Graph <meta> tags
og:type. I was originally using video and video.other. Those probably work as well, but using movie definitely worked for me.og: properties were not necessary for embedding: fb:app_id, og:video:width, og:video:height.file query parameter. Needing to do this should be fairly obvious, but keep in mind to encode the parameter values separately. The ampersand (&) before autoplay=true was XMLEncoded before getting added to the page markup. The ampersand was correctly decoded when viewing it in the Facebook Debugger's "Object Properties" section.crossdomain.xml on the content server.Facebook Debugger Tool observations
This is what it showed when I had both application/x-shockwave-flash and video/mp4 types. 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.
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_url meta property didn't work (maybe due to this). What I ended up doing was serving both the flash player and its source mp4 file parameter 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:video was 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.
137
FYI video/mp4 is currently valid here in 2014.
See the meta provided on this page (ctrl-f mp4):
26
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
