If like me you self-host your own videos, and you want them to play on Facebook, here's a rundown of how I managed to achieve it. It came after a long slog and a lot of reading of articles that only answered part of the question, some of the time.
The bottom line really is that most of the legwork is not done when you post your video (using for example the Facebook Graph API), but in the HTML of the page you're posting.
The page hosting the video
On Poddle.tv, that would be something like this: http://poddle.tv/web90/1/. It's a page that has a single video on it. If you take a look at the meta tags for that page, you'll see something like this:<meta property="og:site_name" content="Poddle.tv" /> <meta property="og:description" content="..." /> <meta property="og:title" content="..." /> <meta property="og:url" content="http://poddle.tv/web90/1/" /> <meta property="og:image" content="..." /> <meta property="og:image:width" content="200" /> <meta property="og:image:secure_url" content="..." /> <meta property="og:image:height" content="200" /> <meta property="og:video" content="..." /> <meta property="og:video:width" content="640" /> <meta property="og:video:type" content="application/x-shockwave-flash" /> <meta property="og:video:height" content="320" />Let's break it down.
og:site_name |
The name of your website |
og:description |
A description of the video |
og:title |
The video or page title |
og:url |
The page URL (in this case, http://poddle.tv/web90/1/) |
og:image |
The URL of a thumbnail image, which should be 200x200 square |
og:image:secure_url |
The same URL, but available at a secure URL, if you have one (ie: a URL starting with https://) |
og:image:width |
The width of your image |
og:image:height |
The height of your image |
og:video |
The URL for the SWF player with the parameters to play the video. I shall explain. |
og:video:type |
application/x-shockwave-flash |
og:video:width |
The width of your video |
og:video:height |
The height of your video |
og:video and og:video:type. When you play videos using Flash, you're using two files: a SWF file (which is the player) and the video file (usually an FLV or MP4 file). Your SWF should be able to take the URL of your video as a query string parameter. If you don't know what that means, consult the docs behind your player. I use JWPlayer, and found it quite easy to create a long URL which had all of the options that would normally be passed to the SWF via the <object> and og:video.
Because you're giving Facebook the URL to a Flash resource, you need to let it know what to expect, so we specify the SWF MIME type in the og:video:type tag.
Security
I'm lucky in that all my static content is hosted by Amazon, which allows me to use http:// and https:// URLs. You really need to use URLs starting with https:// with Facebook, as often transactions happen entirely over SSL, and so the site won't pick up resources that are not delivered over SSL. If it's too much faff to get an SSL certificate, I'd recommend using something like Amazon S3 to host your SWF and video files.Posting the link
If you get the above right, you should be able to go to Facebook, type in the URL to your video page and - after a couple of seconds - see a thumbnail and a description for your post. When you click the button to post it to your timeline, you should then see that the thumbnail becomes a play button which you can click to play the video.If you see a thumbnail button but it links off to your page rather than embedding it, Facebook may not understand your metadata correctly.
If you get the thumbnail button but it just disappears and you get a white box where your video should be, Facebook's understood your metadata but can't download the SWF. Make sure you've specified the correct URLs, and that they begin with https:// if your Facebook address does.
If all is present and correct, you've done the hardest part (assuming your app is already setup to post to Facebook, which is out of the scope of this post).
When you're ready to post your link via the API, you need to send a POST to https://graph.facebook.com/me/links?access_key=.... To use this URL your app will need to ask for the share_item permission when you first get the user's access token. Then post the following:
message |
The same kind of thing as you might post to Twitter: the title of the video, then the URL. I'm not certain ('cos I've tried so many combinations that have failed) but I think you do need to add the URL into the message. If you've had success without it, do leave me a comment. |
link |
The URL of the page hosting the video (the one with all the swanky metadata we hooked up earlier). |
picture |
The thumbnail image. Again, because of the metadata setup, this might not be essential, but it works fine with it in. |
Some final advice
Try not to post the same URL twice if you can help it, as Facebook caches the metadata for the pages you link to.Don't post tracking URLs that redirect to your page, as Facebook won't bother following the redirects to pick up the metadata at the final stop. Just post the original page URL.
I haven't found a definitive guide on this, so if you find something that says different, take it with a pinch of salt first. (That's not 'cos I'm infallible or anything, it's just that I have Googled around the issue a lot and no one article has got it 100% right).
This might not work for your setup, but for whatever reason it seems to work for mine, so it's the method I'm going for. If you do find another method that works, do let me know.
And if you're at all curious, the OG stands for Open Graph.
Post a comment