Date: April 13, 2011 Author: Zach Ozer

Publish Your Videos to Facebook with a JW Player

Please note, this is a legacy blog post, which only applies to JW Player version 5! (Note, JW5 does not support HLS)

Update: JW7 is now available. Check it out here.

Over the past few months, you may have noticed that an increasing number of items in your Facebook News Feed had a play icon in the bottom left hand corner, like so:

This is because Facebook recently opened the News Feed to third parties, allowing individuals to watch videos from all over the Internet without ever leaving Facebook. While getting this to work requires making some minor modifications to your website, publishers have been quick to implement the changes because of the number of video views Facebook can help drive (especially when a video goes viral).

In this blog post, we’ll describe how publishers can use the JW Player with the Facebook News Feed and enable viewers to have the same experience regardless of where they’re watching it.

What You’ll Need

Getting all of this to work is pretty simple, but it can be difficult to manage if you’ve got a large library of content. Additionally, Facebook does not store a copy of the content or player, so they will be loaded from your server every time they are watched on Facebook. If you’re worried about management or your ability to handle the load when your video goes viral, it’s worth taking a look at services like LongTail.tv and Bits on the Run, both of which support this type of Facebook integration natively.

Updating Your Site

Whenever someone publishes a post with a link to their News Feed, Facebook scans that page for metadata about that page. By including some specific metadata in the <head> of your page, you can instruct Facebook to embed your JW Player with your content in the News Feed. However, this also means that you’ll need a unique web page with this metadata for each piece of content, which can become quite difficult to manage if you’re not using a CMS like WordPress or Drupal.

When scanning a page, Facebook examines the <meta> tags. Specifically, it looks at Open Graph tags – those with with an og prefix to the property attribute – and uses the data contained in the content attribute.

An Example

<html>
  <head>
    <meta property="og:type" content="movie" />
    <meta property="og:video:height" content="260" />
    <meta property="og:video:width" content="420" />
    <meta property="og:video:type" content="application/x-shockwave-flash" />
    <meta property="og:title" content="Big Buck Bunny" />
    <meta property="og:description" content="Big Buck Bunny is a short animated film by the Blender Institute, part of the Blender Foundation." />
    <meta property="og:image" content="http://www.example.com/bunny.png" />
    <meta property="og:video" content="http://www.example.com/jwplayer/player.swf?file=http%3A%2F%2Fwww.example.com%2Fbunny.flv&autostart=true" />
  </head>
  <body>
    …
  </body>
</html>

So what do each of these tags mean?

  • og:type – The type of content described by this page, should always be “movie”.
  • og:video:height / og:video:width – the height and width (in pixels) of your video player will occupy within the news feed.
  • og:video:type – The type of video playback you’d like to use, should always be “application/x-shockwave-flash”.
  • og:title / og:description – the title and description of your video. Note that the title attribute is different from the HTML <title> tag, and it will not show up in the browser’s title bar.
  • og:image – the poster image. This is what will be displayed on the viewer’s wall with the play button over it.
  • og:video – the URL to your JW Player, with the configuration passed in as part of the URL string.

Constructing the Video String

Coming up with a usable og:video tag is a bit of a challenge. Since many of our plugins require similar configuration, we’ve got some documentation that should come in handy. However, you can also follow these steps to build the string:

  • Start with the absolute path to your JW Player (ie, “http://www.example.com/jwplayer/player.swf”).
  • Next, add a “?”. Everything after this will be interpreted as player configuration, and ensures that your web server will serve up your video player.
  • For each configuration option you’d like to specify, add the name of the configuration option, then a “=”, and finally the URL-encoded version of the value you wish to specify (ie “file=http%3A%2F%2Fwww.example.com%2Fbunny.flv&autostart=true”). Be sure to separate each configuration option with a “&”.

As always, you’ll need to make sure that you’re using absolute paths to reference your content and skins. Also, you’ll need to make sure that you have the proper cross-domain security restrictions in place.

Posting to Facebook

Thanks to all of your hard work, posting into Facebook is a snap! Simply drop your into the share box, like so:

You’ll notice that there’s no play button in the preview image. Once you hit the share button, the play button will be added and your content will be posted for the whole world to view and enjoy within their News Feed!

Security Limitations (HTTPS)

Recently, Facebook has received some bad press because the site’s login is not encrypted, making it easy for someone using the same WiFi as you to take over your Facebook account. To get around this, Facebook began offering the option to use a secure version of the site (HTTPS). When using this version of the site, Facebook does not always allow you to view content within the News Feed and may link you off to the original source of the content to view it. This is because most sites do not serve up their content via HTTPS, and loading standard HTTP content in an HTTPS site will result in an aggravating mixed content warning in all browsers.

200 comments

    • JABevan

      April 19, 2011 at 11:50 am


      Are ads played or does the integration strip ads from the video?

    • Alex

      April 19, 2011 at 12:25 pm


      I use this system and it’s true that I prefer people going to visit my website rather then staying on Facebook.

      Is it possible, as youtube emdded player, that when people choose full screen, want to replay the video etc… it open my website as when they click en my logo ?

    • Gilbert

      April 19, 2011 at 12:38 pm


      Will this work with any type of video files or only .flv ones?

    • Carl-Fredrik Herö

      April 19, 2011 at 12:39 pm


      We’ve implemented it on our movie trailer website http://hdtrailers.se/. If works like a charm, although we built our own theme with a specific trailer post type. The JW player work like a charm!

    • DCP

      April 19, 2011 at 2:33 pm


      This is great! So, I know this isn’t necessarily JW related, but how would you edit the of each page individually in Drupal? Injecting code for the JW embedder javascript is a snap to do globally via my template files, but for this, the og: tags need to be unique for every page – so somehow they need to be edited when I create specific content. Anyone know how to go about doing this?

    • Chris Herdt

      April 19, 2011 at 2:51 pm


      I’ve tried this with a couple videos that use RTMP streaming (via a Wowza server). The preview image shows up with a play button added over it, but clicking on it sends the user to the page on my server (rather than playing it within Facebook).

      Is this a limitation of streaming?

    • Chozen

      April 19, 2011 at 3:30 pm


      This is not new though, I’ve been doing this with the JW Player for almost 2 years now with my site ComeWatctMe.com.

      I’ve even gotten playlists from my site Mixtapes.tv to play work on Facebook, it’s quite simple to setup especially if your using WordPress, all you have to do is store your video url in a custom field and then you can call from within the theme for a specific post.

    • Zach

      April 19, 2011 at 4:17 pm


      @Alex – using a licensed JW Player, you can update the logo to link back to your site. There’s no way to have it link back on other actions.

      @Gilbert – This will work with any file format that the JW Player can play in Flash mode.

      @Chris – streaming should work. We’ve found that you sometimes get bounced if you’re using the HTTPS version of Facebook, but nothing else should really affect it.

    • Mark

      April 19, 2011 at 5:01 pm


      I tried this, but didn’t have the correct link to my player.swf at first. Now, on subsequent tries, it fails in Facebook, even though I’ve corrected the link. It appears facebook has somehow cached the Meta information.

      I was able to use Firebug in Firefox to drill down to the iframe in Facebook, and that’s how I found out the link was wrong. I used Firebug to edit the link to player.swf in the HTML and sure enough the video showed up in facebook.

    • master

      April 19, 2011 at 6:36 pm


      it is all nice , bt if we have file=…$videoid, it is problem

    • Alex

      April 19, 2011 at 7:03 pm


      @ZACH I have licensed player and I use my logo to link back to my website.
      It could be a great things that just with a variable for embded JW player, we can activate that some actions (fullscreen..) link back to the website :-)

    • Ken

      April 19, 2011 at 10:17 pm


      I have gotten it to work with a file I hosted directly but I cant get it to work with RTMP streaming. Any one wanna give an example how your RTMP url is constructed? I also have been getting a facebook error randomly stating I dont have the “f b:app_id” meta tag even though I do and it has worked previously.

    • Ken

      April 20, 2011 at 10:12 pm


      Ive gotten the rtmp working. Pretty simple once the url was encoded. Just copied it from the embedded code. The facebook error looks like its a bug. The work around was to change the type from movie to article.

    • eddie

      April 22, 2011 at 12:37 am


      can you use plugins if you embed them in to video url?

    • Peter Frimer

      April 22, 2011 at 1:08 pm


      You write that the Facebook-function also works for us using BitsOnTheRun. I’ve just tried last week:
      http://bymusen.net/ofe/cirkus-stjerneskud

      But when using the share on FB-function in the BOTR-player, it does not let the user share the video as a ‘Play at FB-video’, and it does not suggest the video-thumbnail as thumb, but only an irrelevant picture from the webpage. Can you see whats wrong?

      Peter

      peter[at]bymusen[dot]dk

    • splatterMUSIC

      April 23, 2011 at 3:19 am


      I have the latest JW Player, latest WP install, everything. When I post one of my videos to FB it show with the play arrow, but when someone clicks it, it opens my custom JW Player… but that custom player doesn’t play the video. So I likely lose views and fans.

      Any thoughts anyone? Is my JW Player skin not up to apr, perhaps?

    • thomseye

      April 23, 2011 at 3:28 pm


      I’m confused. I have a Facebook “Fan Page” for my company and also a “Personal” Facebook account. When implementing the video on my company page, the implementation works great. When posting to my personal account, clicking on the thumbnail opens up a new window that shows the page the video is embedded on.

      Is there an account setting on facebook that causes this? Does the video only show on “Fan Pages” but not personal accounts?

      If someone could shed some light I’d be really happy. Thank you!

      thomseye

    • splatterMUSIC

      April 23, 2011 at 4:17 pm


      Thomseye… disable the security setting in Facebook where you chose to view “https wherever possible.” Or, just be aware that this is okay and will work for others consistently.

    • @Metacowboy

      April 25, 2011 at 4:25 am


      Thanks for these Update these was the main reason for buying a Licesnse on JW- Player. Have included that in 2 of our Blogs and it works incredible good.
      There is just one major leek in the Plugin section as the Share update to Like .
      It should be simple possible to Like inside the Video without a popup box similar to the video overlay like of Facebook . That would even spread the viral quality of the embedded player much more .

    • ManiG

      April 26, 2011 at 8:50 pm


      Any list of which plugin works and which plugin doesnot work on facebook feed.
      Can we use different skin, set options like streching, right click menu disable etc?

    • Zach

      April 26, 2011 at 9:40 pm


      All plugins, skins and configuration options should work.

    • Frank

      April 27, 2011 at 4:08 pm


      I cant get it to work with RTMP streaming. Any one wanna give me an example on how your RTMP url is constructed? Please!!!

    • Sam

      April 14, 2012 at 5:25 pm


      Is there anyway I can get my hands on the non-commercial (free) version of the facebook like add-on?

    • MAXX

      April 15, 2012 at 10:25 am


      I’ve noticed that this function of playing the JW player inside FB stopped working about a week ago. FB simply links to external pages instead of playing JW player content. I tried it by pasting your own example on my facebook page: http://www.longtail.tv/x/mwGw1
      Youtube and Vimeo videos work ok. What happened?

    • Regina

      April 17, 2012 at 5:18 pm


      MAXX is right. Paste this in your Facebook: http://www.longtail.tv/x/mwGw1 – for me it shows the video thumbnail as if as video is going to play, but clicking the thumbnail just links to the page, it does not play on Facebook anymore. Anyone knows what happened?

    • Ethan LongTail

      April 17, 2012 at 7:22 pm


      Will need to ask the developers of LongTail.TV, thanks for pointing it out.

    • Ethan LongTail

      April 17, 2012 at 7:32 pm


      Guys, this worked for me…

    • Ethan LongTail

      November 13, 2012 at 6:32 pm


      :) Glad you got it working.

    • Adrian

      November 27, 2012 at 9:48 pm


      what version of jw player is this? I downloaded jwplayer 6 and I can’t find player.swf.

    • Adrian

      November 27, 2012 at 10:26 pm


      @Ethan

      Thanks! That was fast response!

    • Ethan LongTail

      November 27, 2012 at 10:33 pm


      Np!

    • jerome

      December 28, 2012 at 11:53 am


      a mistake in the post above,
      the good url for xml playlist is:
      h**p://jerome.sevestre.free.fr/orelsan/index3.html

    • Ethan LongTail

      December 28, 2012 at 5:22 pm


      Thanks.

    • Eitan

      January 21, 2013 at 9:59 pm


      Is there a post on how to convert this trick to JW6?

    • Ethan LongTail

      January 22, 2013 at 3:35 am


      This won’t work in JW6.

    • Ethan LongTail

      April 6, 2013 at 10:18 pm


      Note – adaptiveProvider.swf is quite old, was not totally finished, and definitely is not tested entirely.

    • Ethan LongTail

      May 6, 2013 at 6:17 pm


      It looks like Facebook has changed something on their end, we are going to take a look.

    • Malcolm

      May 6, 2013 at 6:29 pm


      ok thank you !! I had spotted an error in my url which I have now fixed and it and in facebook developer debug page comes with :

      status Video embedding on Facebook enabled

      so I have no errors at all there now but not sure if thats the correct message I should see or how I test it further.

      Thanks for your help!

    • Ethan LongTail

      May 6, 2013 at 6:35 pm


      Np, that I am not sure of.

    • Yash

      May 22, 2013 at 3:20 pm


      We have tried a lot but facebook is showing the video icon once we paste the link but when we try to play the video its showing just white box.

    • Himura Kenshin

      May 23, 2013 at 12:35 am


      Well, great, helped me a lot, thank you :)
      , worked for my timeline, hack-facebook-password.org, keep it up !! ^^ :)

    • Mike

      April 20, 2011 at 2:21 am


      I have a licensed player on my Word Press site with a logo on the player. I don’t understand how to use this feature, unfortunately I don’t know a lot about code. Here is a sample code for a player I have on my site. Here is the post: http://reelscreenreviews.com/2011/04/rio-movie-review-2/ Can you help me out more? Thanks

      <object classid='clsid:D27CDB6E-AE6D-11cf-96B8-444553540000' width='800' height='400' id='single1' name='single1'><param name='movie' value='http://reelscreenreviews.com/wp-content/uploads/player.swf'><param name='allowfullscreen' value='true'><param name='allowscriptaccess' value='always'><param name='wmode' value='transparent'><param name='flashvars' value='file=http://reelscreenreviews.com/wp-content/uploads/Rio.flv&plugins=fbit-1,tweetit-1&dock=true&image= http://reelscreenreviews.com/wp-content/uploads/2010/10/Rio.jpg&title=RIO MOVIE REVIEW &backcolor=8b0000&frontcolor=CCCCCC&lightcolor=CCCCCC&screencolor=000000&logo=http://reelscreenreviews.com/wp-content/uploads/2011/01/Logo.png&logo.link=http://reelscreenreviews.com/&logo.hide=false'><embed type='application/x-shockwave-flash'id='single2'name='single2'src='http://reelscreenreviews.com/wp-content/uploads/player.swf'width='800'height='400'bgcolor='undefined'allowscriptaccess='always'allowfullscreen='true'wmode='transparent'flashvars='file=http://reelscreenreviews.com/wp-content/uploads/Rio.flv&plugins=fbit-1,tweetit-1&dock=true&image= http://reelscreenreviews.com/wp-content/uploads/2010/10/Rio.jpg&title=RIO MOVIE REVIEW REVIEW&backcolor=8b0000&frontcolor=CCCCCC&lightcolor=CCCCCC&screencolor=000000&logo=http://reelscreenreviews.com/wp-content/uploads/2011/01/Logo.png&logo.link=http://reelscreenreviews.com/&logo.hide=false'></object>
    • Zach

      April 25, 2011 at 7:43 pm


      @Eddie – You can use plugins. Simply add the plugins flashvar to the video string, vis-a-vis:

      <meta property="og:video" content="http://www.example.com/jwplayer/player.swf?file=http%3A%2F%2Fwww.example.com%2Fbunny.flv&autostart=true&plugins=like-1" />

      @Peter – If you link to a BotR preview page, ie http://content.bitsontherun.com/previews/%5Bcontent-id%5D-%5Bplayer-id%5D, it automatically adds the Open Graph data. The BotR embed JS does not do this.

      @Splattermusic – Not quite sure what you mean by “but when someone clicks it, it opens my custom JW Player… but that custom player doesn’t play the video.” Can you post a link?

    • jerome

      December 28, 2012 at 11:35 am


      hello, you can also publish playlist directly on facebook profile pages using the open graph.

      but only from jwplayer5, it works on xml and youtube playlist.

      your can have a look here (or paste the link on facebook to see the result)
      for xml playlist:
      h**p://jerome.sevestre.free.fr/orelsan/index.html
      <meta property="og:video" content="http://URL OF YOUR SITE/player.swf?file=http%3A%2F%2FYOUR SITE%2FSUBFOLDER%2Fplayer%2Fmrss.xml&autostart=true">

      for youtube playlist:
      h**p://jerome.sevestre.free.fr/jwplayer/5/jwplayer-youtubeplaylist.html
      <meta property="og:video" content="http://URL OF YOUR SITE/player.swf?playlistfile=http://gdata.youtube.com/feeds/api/playlists/CODE YOUTUBE PLAYLIST (Without PL for new playlist mode) ?&controlbar=over&playlist=bottom&autostart=true&icons=false&repeat=list&stretching=uniform">

      it should be cool to enable this for the jwplayer6.

    • DJOLE

      April 6, 2013 at 12:10 am


      justin – JWPlayer 5 read m3u8

      <script type='text/javascript' src='https://1n469r2k28cd3i0ovv1yqnaz-wpengine.netdna-ssl.com/jwplayer.js'></script>
              <div id='xxxx'></div>
              <script type="text/javascript">
                jwplayer('xxxx').setup({
                  'flashplayer': '/player.swf',
                  'id': 'xxxx',
                  'autostart': 'true',
                  logo: {
                      file: "/images/playerlogo.png",
                      link: "http://www.yoursite.com",
                      hide: false,
                      position: "top-right"
                      },
                  'width': '780',
                  'height': '540',
                  'playlist.position': 'right',
                  'playlist.size': '240',
                  'controlbar.position': 'bottom',
                  'stretching': 'exactfit',
              'skin': '/skins/NewTubeDark.zip',
              
              'playlist': [{
                          'file': 'http://your_video_stream.com/anything.m3u8',
                          'provider': '/adaptiveProvider.swf',
                          'title': 'video stream name'
              
              
                      }],
                });
              </script>
    • Malcolm

      May 6, 2013 at 5:42 pm


      Hi, I have an embedding problem similar to others. I have got facebook developer site saying :

      status Video embedding on Facebook enabled

      But it doesnt appear with the play button and just external links to the content. Here are the tags I have set :

      <head>
              <title>KrisisDnB Video Player - 01.05.2013 - Sublo Showcase</title>
              <meta property="og:type" content="movie" />
              <meta property="og:video:height" content="260" />
              <meta property="og:video:width" content="420" />
              <meta property="og:video:type" content="application/x-shockwave-flash" />
              <meta property="og:title" content="01.05.2013 - Sublo Showcase" />
              <meta property="og:description" content="Recording of 01.05.2013 - Sublo Showcase" />
              <meta property="og:video" content="http://app.krisisdnb.com/player/player.swf?file=http://cds.krisisdnb.com/vod/flv/01.05.2013 - Sublo Showcase.flv&amp;autostart=true" />
              <meta property="og:image" content="http://app.krisisdnb.com/images/kdnb_logo.jpg" />

      The one thing from the original article I wasnt sure about was the https part at the end. Is it needed? Simple answer if it is then I will have to sort that bit out and give it a go just not sure if someone can let me know.

      Here is the url to the page im trying to share :

      http://app.krisisdnb.com/player/vplayer.php?title=01.05.2013%20-%20Sublo%20Showcase&name=http://cds.krisisdnb.com/vod/flv/01.05.2013%20-%20Sublo%20Showcase.flv

      Any help would be appreciated !!!

      • Ethan Feldman

        January 7, 2014 at 1:51 pm


        Facebook requires HTTPs for their embedding now.

Comments are closed.