Custom video player on Facebook

There are 50 comments.

Custom video player on Facebook

Embed your own video player on Facebook

Facebook and the Open Graph Protocol allows you to define special meta data on your web pages that defines them in Facebook’s social graph. In this post i’ll show you how to set up the meta tags required for you to use a custom video player on Facebook, styled exactly like you want it. It will show up, and play, directly within Facebook status updates whenever someone shares the web page containing that meta data. Pretty cool, huh?

iPhone and iPad support

This method allows for HTML5 fallback which makes the video work on iPhones, iPads and other non-Flash devices. Even inside the native Facebook iPhone app — My example is set up with a HTML5 fallback to show that functionality.

Step 1: Prepare your flash video player

There are two ways you can go here: Either set up your video player to accept a flashvar with the URL to the video file, or hard code the URL into the source code of the flash player, so that it keeps track of it internally. Naturally, going with flashvars is much more dynamic, as you can use the same video player with different video’s if you have more than one on your website. In my example I’ve used the flashvar “url” to supply the video file URL. Learn how to use flashvars in this video tutorial by Lee Brimelow

Step 2: Utilize Open Graph tags

I’ve put up an example at http://ahrengot.com/playground/circular-scrubbing that has the correct meta tags. If you post the URL to Facebook you’ll see the player embeds correctly. You can view the source and look out for the open graph tags. In my example they are as follows:

Selec All Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14

<!-- Open Graph tags -->
<meta property="og:title" content="Circular scrubbing video player" />
<meta property="og:description" content="A video player interface experiment, which features circular scrubbing and a very minimal design." />
<meta property="og:type" content="video" />
<meta property="og:url" content="http://ahrengot.com/playground/circular-scrubbing"/>
<meta property="og:image" content="http://ahrengot.com/playground/circular-scrubbing/thumb.jpg"/>
<meta property="og:site_name" content="Ahrengot's Playground"/>
<meta property="fb:admins" content="100000936142315"/>
 
<!-- Video player specific OG tags -->
<meta property="og:video" content="http://ahrengot.com/playground/circular-scrubbing/video-player.swf?url=http://ahrengot.com/playground/circular-scrubbing/assets/video/example.mp4" />
<meta property="og:video:width" content="374" />
<meta property="og:video:height" content="202" />
<meta property="og:video:type" content="application/x-shockwave-flash" />

The tags are quite self-explanatory, but if you need any help, refer to the documentation.

View on Envato

That’s it – If this was of any help to you, or you have any questions, I’d really appreciate your feedback in the comments. Oh, and if you like the video player in my example it’s available on Envato marketplaces: Video player with circular scrubbing.

  3. DoniaEsa said:

    Is there a way to count the number plays? How could I know how many times has it been played?

    Some of the videos I use with these method are hosted in partners YouTube Channels so I can’t have access to their Insights.

    Thanks!

    • Jens Ahrengot Boddum replied with:

      Good question!

      I’m not sure there’s an easy, built-in, way to do it. However you should be able to set up a simple system where your Flash file adds +1 to a database whenever it’s played. You could expand on this method tracking the how many viewed the video to completion, how many viewed it more than once and so forth.

      If you just want basic insights, there’s the insights area on Facebook (http://facebook.com/insights). It gives you analytics for all the pages(web pages included) you are an admin of. It will provide you with a share count, like count, impressions et cetera for the webpage your flash video is embedded on with the open graph tags.

    • David replied with:

      You could also query your web logs to find out how many times a url was requested.

  5. Bill Elberg said:

    When you set your security settings in Facebook to “browse https whenever possible”, which many users do, this demo does not work…i.e. the PLAY button does not show.. YouTube and other video embeds do NOT have this problem.

    Is there STILL a requirement for white-listing to allow for users who are browsing Facebook via https?

  7. VC said:

    Hi Ahrengot,
    I too have tried testing with your link.. http://ahrengot.com/playground/circular-scrubbing/
    “secure browsing off” = link plays video within my wall
    “secure browsing on” = link is only image (click opens new tab to your link page) 

    In Facebook.. go to Account Settings then scroll down to Account Security and click change. If the “Secure browsing (https)” option is ticked then there is NO play button.. If disabled then its visible and can play your video link from within my wall.

    I think the problem comes from not having a HTTPS server. YouTube videos work because ultimately the files are served from an HTTPS location (even though viewed from http://www.youtube.c0m…etc)..

    Don’t know what a good workaround is.. I’m considering free https storage just for the swf’s as targetted by the meta tags (that Facebook reads in html).. or making a sub-domain with own self-signed SSL certificate. Yes they give a scary message like “Site cannot be trusted as it has a self-signed certificate” but who cares.. no one would see an actual html page here.. just Facebook loading from there. Wether this will trick Facebook into thinking my swf is HTTPS i do not know.. Any input from you or the readers is welcome. Thanks

  8. Curious said:

    I’m currently using the JW 5 Player to play an MP3 file w/HTML 5 fallback. Do you know if this player can embed into Facebook as well?

  9. VC said:

    Hey Ahrengot, just a quick update for any readers who had probs with custom Flash not working on FBook wall. I was correct in saying the swf had to hosted on a HTTPS server. Now my host is so cheap that all I get for the low price is webspace (plus other features but no fancy secure SSL). So I signed up for Amazon’s Simple Storage Service (aka S3) and put just only my swf and jpeg there.. Voila!! Now it works with “secure browsing” enabled on FB. You can test by pasting this link in your FB walls:

    http://www.vcone.co.uk/labs/index_pbs.html
    (view source code to see what the “video_src” meta-tags is doing. Actually two copies of the swf are mentioned here. One in meta tag is from S3 server location for FBook’s benefit, The other is just together with the html file on my server for the benefit of the html’s actual page display).

    This swf loads an mp3 (from my http server) and everything is ok, so I assume .flv files from your servers will be ok too. FB just wants a secure swf… what/where the data that swf access does NOT have to be from https location. OK I’m off to eat a McDonalds bcos I lost weight over this, dammit!! Thanks & hope it helps someone. VC

      • VC replied with:

        Hi, I chose S3 because its free for 1 year. This way if Facebook changes to work without https hosted files etc, I can cancel without any loss. Although I have to admit I now like the idea of secure hosting anyway so will most likely become a customer when the 1-year trial ends. Thanks

  10. Ed Nerz said:

    Can anyone confirm that the open graph tags stuff still works with fb? I have no luck with any of the examples listed here which are supposed to work – they ALL show just a preview picture and open in a new tab or window, no embedding. Same for any other method i found via google so far – either they never worked in the first place or they stopped working, kinda frustrating.

  11. Ed Nerz said:

    I apologize, actually they do work – at least your example and VC’s as well. Might have been a mixup with code from different (outdated) methods. Thanks for the fast reply and for the code of course – this was driving me crazy! Cheers.

  12. rootsical said:

    wow! thanks for this. only thing is I’d echo what VC:One said – best to get your swf onto a https secure host so that the video is always available even if facebook user has enabled secure browsing. Also it wasn’t clear to me that you have to ‘like’ the page you are putting the video and metatags on. I couldn’t get it to work for ages and that was the reason. So after having put my id metatag in I also got a like button on the page by using the facebook generator here, http://developers.facebook.com/docs/reference/plugins/like/ . I also had to have apps enabled (which I didn’t). Now it all works a treat. I guess you can remove the like button if you don’t want it after facebook has linked your id and the page. In any case thanks a lot for this excellent tutorial. blessings

    my version is here:
    http://www.examplesproject.org.uk/facebook/videoPlayer.html

  13. rootsical said:

    actually – i cannot get it to work if I put the link in the status update – only if I like the page! why?!

  14. rootsical said:

    thanks – i did – looks just like yours – but I have 2 different video types as fallback as well.. only difference I can spot.. other than that – it doesn’t come up with any errors – weird because I can ‘like’ it and the video embeds but any other way of sharing the link misses the video out completely – unlike yours.. sttrange! nice one tho

  15. rootsical said:

    only other thing I can think of is that I have 2 flashvars on the end of my swf link, whilst you only have one.. or that I have tried doing it as html5 page?? or that my admin id is still not working properly as to be honest I don’t really understand ‘pages’..

  16. Stefan said:

    Thanks so much for this :D
    Client came saying is it possible and every link I found said no except for yours.

    All I’m needing to do now is move my swf to a secured server -.-

    VC that music player is wicked man

  17. rootsical said:

    thanks! got it to work – be careful of the size of the thumbnail you provide – mine was too small apparently – all working beautifully now (after trying god knows how many different permutations!)

    http://www.examplesproject.org.uk/facebook/videoPlayer.html
    http://www.examplesproject.org.uk/facebook/videoPlayerExplanation

    Anyone got the mp4 fallback to work on the wall? I have supplied appropriate og tags but when I disable flash, the wall does not like it… anyhows – thanks again..

  18. noom said:

    Dear sir, we are bunce of noname musicians in thailand and currently been working on a joomla music player in order to make it works in facebook profile post justlike mixpod, myspace and youtube . here is my site http://www.facebook.com/pages/test123/274873759189462?sk=app_260162337347656 the reason we want to use this audioplayer because it has the buy button link which can link to the sms gateway in my country. Can you give me the idea how and where to insertt a Facebook Opengraph Protocal coding in my Player sir!!

  19. VC said:

    Hi Ahrengot,
    No worries on the link back to here. Made sense..
    Wow looks like I missed a lot. I only get notified if there is a direct reply to my comment so yeah I’ve been clue-less. Thanks Stefan & Rootsical for the big-ups.

    So now we know… get your .swf file and thumbnail image on a HTTPS location and its all good. (start by asking your webhost if you can mark a folder as secure or https. If they say its not possible on your package, then upgrade or search an “https file hosting” service to store the files.

    Only thing I can add is that be aware when testing the HTML link on Facebook that it will cache (record) the link per user-account. It can also recognise previously posted links and will show the already cached version if the link name is exactly the same as old. The solution is rename your testing html file to something new (eg: Test-2.html) with each test until you have it working. Thanks

  20. Ian said:

    This worked great for me a couple of weeks ago, but now Facebook opens it in a new tab instead of playing in the stream.

    Is it just me, or has something changed in Facebook?

    • Ian replied with:

      Found out the issue: when using Facebook secure browsing, the link to the player needs to be https

  21. Cristian Rusu said:

    Hello

    I did the whole thing you described here, but for some reason it’s not showing up as a player but a popup link on my facebook wall…

    I even checked with facebook debugger, all meta is in place and the page is detected as video type. The thumbnail on facebook show up with a play overlay icon just like any youtube link, but it’s not playing inside facebook no matter what I do…

    Any suggestions?

  23. Donatas said:

    My mission is to embed a video (custom player) into a facebook wall and track the users events (play count etc.), also gather other relevant data. I was wondering is this at all possible, if so, can you comment on that briefly?

    TA

  25. Donatas said:

    That means, that if using a 3rd party video player, then there is no way to track? Is that right?

  27. Elena said:

    Guys!
    I really need some help in here!
    I am trying to follow the link for filling in the white listing request, but i only find a facebook help center page (where there is nothing like request form exists)
    What do I do?