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)

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.

    • 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

    • 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 .

    • 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:

      @Peter – If you link to a BotR preview page, ie http://content.bitsontherun.com/previews/content-id-player-id, 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?

    • 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: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

      for youtube playlist:
      h**p://jerome.sevestre.free.fr/jwplayer/5/jwplayer-youtubeplaylist.html

      it should be cool to enable this for the jwplayer6.

    • 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.

    • DJOLE

      April 6, 2013 at 12:10 am


      justin – JWPlayer 5 read m3u8


    • 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 !! ^^ :)

      • Ethan Feldman

        January 7, 2014 at 1:51 pm


        Facebook requires HTTPs for their embedding now.

    • Shock

      April 15, 2011 at 2:59 am


      Zach,

      Very nice… I have several questions.
      1) Is there any way to automatically add those meta into a post?
      2) does the meta codes have to be embedded in the post via HTML editor ?
      3) or does the codes have to be embedded into the header.php file ?

      I am using WORDTUBE plugin for wordpress and videos are hosted on my site.

    • Ethan LongTail

      August 15, 2011 at 5:13 am


      In your header…

    • Nicolas

      April 18, 2011 at 4:02 pm


      Is that possible to implement that in the WordPress plugin. Thanks.

    • John Dentino

      August 16, 2011 at 12:16 am


      I can’t get JWPlayer to play within the news feed of my Facebook page, although upon checking the URL in Facebook’s developer debugger, it seems to have no major issues. Could someone who knows code (I certainly don’t; I just cut and paste) tell me where this page’s code goes wrong? After sharing, there is only a link to the site, but no play button. Any help is greatly appreciated. Here’s the code:
      < !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">










      />





      Musical Score




    • Cameron

      April 18, 2011 at 8:57 pm


      Hey guys,

      We’ll be adding this functionality in the next update of the WordPress plugin.

      Thanks.

    • Roberto

      April 19, 2011 at 10:32 am


      Works great. Very easy to implement. Just put it in your header and modify. The only problem now is that before people came to my site to watch the video (hits for me) but with this they never have to leave facebook. Not sure if I like that ;-)… I want the traffic… but it is a pretty cool feature never the less.

    • Issy

      August 19, 2011 at 3:09 pm


      RTMP works fine for me. But not, if I want to use dynamic bitrate switching. Is there a solution for facebook?

      My flash player url looks like this:
      http://www.erf.de/v2012/player/flash/player.swf?image=http%3A%2F%2Fwww.erf.de%2Fv2012%2Fplayer%2Fvideo%2Fpreview.jpg&streamer=rtmpt%3A%2F%2Fc14000-o.f.core.cdn.streamfarm.net%2F14000cina&levels=%5B%5BJSON%5D%5D%5B%7B%22bitrate%22%3A1500%2C%22width%22%3A768%2C%22file%22%3A%22ondemand%2F3492iptv%2F57_ERF_Hoerbar%2F57_11_017_h264_1500kb.mp4%22%7D%2C%7B%22bitrate%22%3A750%2C%22width%22%3A512%2C%22file%22%3A%22ondemand%2F3492iptv%2F57_ERF_Hoerbar%2F57_11_017_h264_750kb.mp4%22%7D%2C%7B%22bitrate%22%3A200%2C%22width%22%3A256%2C%22file%22%3A%22ondemand%2F3492iptv%2F57_ERF_Hoerbar%2F57_11_017_h264_256kb.mp4%22%7D%5D&skin=http%3A%2F%2Fwww.erf.de%2Fv2012%2Fplayer%2Fflash%2Fskin%2Fglow_video%2Fglow.zip&controlbar.position=over&controlbar.idlehide=true&autostart=true

    • akeem

      April 19, 2011 at 10:35 am


      nice one zachary! i tested this just a few weeks ago (failed) and now it works :)

      it seems that facebook has relaxed some flash-limitations, as before you had to ask them to white-list your domain (i hope they are going to keep it like this)…

      rock on, akeem

    • Victoria

      April 19, 2011 at 10:36 am


      Thanks, am going to try this out today. Cameron, Zachary and crew, you guys rock!

    • MAXX

      March 13, 2012 at 8:35 pm


      I could not load the Viral plugin inside FB, I hope someone will fix for this important traffic-driving feature soon.

    • akeem

      April 19, 2011 at 10:58 am


      what roberto says is totally true and a problem for many of us :(

      i think the best will be to offer the facebook-users just a short version of the video in the og:video-tag. the full-length version will remain on our sites :) haven’t tried it out but maybe with some start/end-point limitations as params this might work too..

      best, akeem

    • Postoronniy

      April 19, 2011 at 11:38 am


      Hey guys,

      Well done. I think it would be great to see an update to the drupal module and adding this functionality!

      Thanks.

    • actionscript

      April 9, 2012 at 3:32 pm


      Is it possible to use the og tags like

      in ActionScript 3 code, so they are read from the ActionScript code and not the meta tag from head, or is there some replacement for them

    • akeem

      April 19, 2011 at 11:49 am


      sorry to spam this page, but with “&duration=15″ one can limit the viewing to the first 15 seconds using the same full-length-source-file from the server – works great!

      this might be an acceptable compromise for people who don’t want the whole video to be seen on facebook…

      cheers, akeem 😉

    • Ethan LongTail

      April 9, 2012 at 4:07 pm


      I don’t believe so.

    • Eike

      April 27, 2011 at 6:53 pm


      Hi there,
      I installed the latest Version of the WP Plugin and as i read in the Changelog the plugin shoud do the work for me regarding updating my site.
      But which is the link to post on Facebook? The Site Url?

      Regards

    • Nabil

      May 31, 2013 at 8:22 pm


      Hi, when i post the video on my FB page, it takes it to the source website…how can i fix the error so the posted videos play within FB.

      Regards

    • Eike

      April 27, 2011 at 7:17 pm


      I finally made the player to appear in Facebook. But if i press the PLay button the JW player shows up, but the playback doesn’t start.

    • eddie

      April 28, 2011 at 3:41 am


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

      How do you set the parameters of the plugin in the url string?

    • Zach

      April 28, 2011 at 10:27 pm


      @Frank – You need to encode the streamer.















      @Eike – Are you still using the WordPress plugin? If so, you should link to a post that contains the video. Have you embedded the video in a post and confirmed that it plays there?

      @Eddie – you’ll want to do something like:

    • Eike

      April 29, 2011 at 5:24 pm


      I have a page with a video in my blog and it does work in the blog
      http://spotterblog.de/2011/04/28/facebook-test/

      It is a playlist, but in the posts user fields i have specified one video to play on facebook via
      jwplayermodule_fb_headers_id

      An I have learned from this site
      http://developers.facebook.com/blog/post/486
      that the page doesn’t have to be whitelisted any more by facebook.

      So what is wrong?
      Do i have to insert the og:type and other meta data “by hand” into the post?
      I thought the plugin would do that for me. And if i have to insert the stuff, so i have to so it in very single page woth a video?
      I can post the video to Facebook, the player is showing in fb, but the playback doesn’t start.

    • Zach

      April 29, 2011 at 6:09 pm


      The issue is that the WordPress plugin only supports embedding single videos within Facebook at this time.

    • Eike

      April 29, 2011 at 6:36 pm


      With jwplayermodule_fb_headers_id i specified i single video. And before i tried it with a single video, also with no luck.

    • Frank

      April 30, 2011 at 4:22 am


      When I press the play button the JW player shows up, but the playback doesn’t start. I did it exacly as your post :

    • Cameron

      May 2, 2011 at 5:34 pm


      @Eike,

      This looks like a bug actually. Stay tuned for an update in the next little while.

      Thanks.

    • Ted

      May 2, 2011 at 10:07 pm


      Every works perfectly, the only thing is that the height and width properties are not being recognised on facebook and leads to a video player that is 247 x 463 and im using


    • Ted

      May 2, 2011 at 10:11 pm


      Scrap that I placed the properties at the top of the head content.

    • Frank

      May 13, 2011 at 9:31 pm


      Can someone post a link with an RTMP that is working??? Also if is for a livestream is better but if not thats fine.

    • Tim

      May 14, 2011 at 10:58 pm


      Hi, I have the a video on my wordpress site that plays fine on my site. Here is the link to the post that contains the video: http://funkytonkrecords.com/library/?p=26 When I attach that exact link to my facebook share box it brings up the preview just fine with the appropriate thumbnail, just like what is pictured up in the instructions above. When I click share, it will post to my wall just fine, with thumbnail and play button. When I click play though, no video?? In fact the only buttons that work are full screen and volume. The video never starts.

    • Eike

      May 15, 2011 at 12:05 pm


      That is the same Problem i have

    • vCopia

      May 16, 2011 at 3:27 pm


      Zachary’s meta instructions work well, and is easy to follow. However, in my experimentation I noted that FaceBook’s handling of the meta data merits further exploration. What do I mean???

      I created a simple page, added a tweaked version of the example data shared above to incorporate my own file names, etc. Then, I wanted to play with the meta lines of code relative to the following options:

      a. controlbar backcolor,
      b. controlbar display,
      c. autostarting, and
      d. looping (repeating).

      That way I could create a template file to store all meta data choices for future use, and cut n paste as needed. I used the Longtail jwplayer Wizard to get all the code I needed, and began testing. Note: I currently use my player with .mov, .mp4, .flv, and mv4 video files. Here’s what I discovered…

      1. No matter what code I used, I couldn’t get a .mov file to repeat (loop) or display without a control bar. Current conclusion, .mov files cannot be used in FaceBook this way using a jwplayer. Same options did work with the other file formats I used.

      2. If you have a typo in your code, or use the wrong code string, then add the page url containing the incorrect meta code to a Facebook post and save it, you cannot use that url again to display your video – EVEN AFTER YOU FIX THE CODE. In playing around with the various options a-d above, there was the standard trial and error to see how exactly to present it in the string. Once I found a certain order, presentation, etc., didn’t work, I’d correct, try again to add the url to Facebook (pointing to the same page with the revised meta code) but Facebook didn’t recognize the changes. It continued to present the new post, errors and all, when saved. For example:

      In the original Facebook post I saved using this url (http://vcopia.s3.amazonaws.com/bethisaliveFB2.html) I had an error in the meta code used to display the controlbar’s backcolor. I’d typed ” &backcolor=#c3773e ” into the string instead of ” &backcolor=c3773e ” , so that part of the code was ignored by Facebook when posted, and FB displaying an off white bar instead. Once I corrected the meta data (removing the #) and reposted the url to Facebook, it still displayed the off white control bar.

      Same thing held true for a url I used that just had a typo in the vid’s filename. (http://vcopia.s3.amazonaws.com/bethisalive-4FB.html) I’d typed …nethisalive instead of …bethisalive. Once I corrected it and retried, Facebook still remembered and displayed the old error.

      Figured it was a cache issue that would rectify itself in a few hours or a day, but here we are 24 hours later and when I repost those urls, even though they’ve been corrected, Facebook still displays them as if the errors still exist. Now… interesting enough, I opened a dummy FB account I have and tried to post them there, thinking surely Facebook wouldn’t associate any cache with a different account. I even used a MAC instead of the PC I’d originally used, and a different browser to be sure there was no overlapping. Sure enough, Facebook still recalls the incorrect data instead of the actual data.

      In the end, after I figured all this out, I was able to post the test entries successfully. I just had to save the corrected files with a different file name (url name) and viola! they worked just fine.

      See for yourself. Try to post these links to your FB account:

      http://vcopia.s3.amazonaws.com/bethisaliveFB.html (FB displays NO control bar and REPEATS the vid even though I took those out of the current page)

      http://vcopia.s3.amazonaws.com/bethisaliveFB2.html (FB incorrectly displays a white control bar)

      http://vcopia.s3.amazonaws.com/bethisalive-4FB.html (FB thinks vid url is incorrect when it isn’t. Orig had a typo)

      And, feel free to open them in a browser and check the source code. You’ll see that the meta data is different than what FB shows.

      Now, I have no idea if there is a way to clear this Master FB cache, or whatever FB uses to store this info, but I can, at least share these outcomes with you so you can save yourself a little time and a few aspirins.

      vCopia

    • coastside

      May 22, 2011 at 2:15 pm


      Submitting a URL to Facebook on this Facebook developers’URL Linter':
      http://developers.facebook.com/tools/lint/
      has always cleared the Facebook cache for me. So if you’ve made a mistake in code that Facebook read, and now Facebook just can’t seem to forget, try submitting your URL to this URL Linter. It also does some diagnostics on your page.

    • Alex

      May 23, 2011 at 3:43 pm


      What if you have more than one video on one page? How would i set up the metatags then? Just duplicate it and rename it?

    • Ken

      May 24, 2011 at 2:19 am


      Thanks for that linter site. It was very helpful.

    • dwits

      June 13, 2011 at 4:57 pm


      looking for a way to add this dynamically to drupal… any thoughts?

      plans on adding it to drupal module?

    • Lynda Mangoro

      June 24, 2011 at 9:40 am


      I have installed the WordPress Plugins and I can get my audio file to work fine in my post:http://www.mangoro.co.uk/?p=474 but when I copy the url to facebook it just posts the link…. also when I click the facebnook button in the video it opens the page to share on facebook but with no content to post, please help.

      I am a bit confused. I haven’t made any changes to the META tags in the header as we wish to post multiple videos in multiple posts all of which will be able to be posted to facebook… so where do I put this meta code?

    • Ethan LongTail

      June 24, 2011 at 7:37 pm


      You need to put that in. It will have to be done in your theme’s source code.

    • Michael Towe

      June 25, 2011 at 6:15 pm


      Is there a step by step guide anywhere on how to ad this functionality using the WordPress plugin and JW Player?

      Thanks

    • Ethan LongTail

      June 25, 2011 at 10:52 pm


      You are reading the only tutorial we have on this matter.

    • Lynda Mangoro

      June 27, 2011 at 3:23 pm


      Thank you for your resopnse… if I add this META code in the themes header file… I have to specify one video file only yes? Then how do I create multiple posts with different video files to post to facebook?

      thank you for your help.

    • Jayson

      June 29, 2011 at 10:18 am


      Can this play other video types like m4v and mp4?

    • Jayson

      June 29, 2011 at 10:34 am


      Can i use php code for the og values? Im using wordpress with custom values defined.

    • Ethan LongTail

      June 29, 2011 at 3:48 pm


      Yes you can, and I believe that will work.

    • Jayson Pimentel

      June 30, 2011 at 5:01 am






      &autostart=true” />

      Please check, when i share my videos the play button is there but the video is not appearing?

      will this work? = file=< ?php $values = get_post_custom_values("videourl"); echo $values[0]; ?> the file is defined with custom values?

    • Jayson Pimentel

      July 1, 2011 at 7:21 am


      Hello

      (file=http%3A%2F%2Fwww.example.com%2Fbunny.flv) I see that the video file name is URL-encoded do i have to do this too on my custom values?

      Thanks,

    • Jayson Pimentel

      July 1, 2011 at 7:24 am


      Hello

      (file=http%3A%2F%2Fwww.example.com%2Fbunny.flv) I see that the video file name is URL-encoded do i have to do this too on my custom values?

      Thanks,

    • Ethan LongTail

      July 1, 2011 at 11:02 pm


      Just email us a link at this point…ok?

    • Liander

      July 4, 2011 at 9:19 am


      How do you add this for wordtube plugin in wordpress?

    • Ethan LongTail

      July 5, 2011 at 3:59 am


      In the source code of your blog itself.

    • Teresa

      July 18, 2011 at 8:56 pm


      Is there a problem with trying to share and play a you tube video embeded into your webpage? Right now I have all the correct metadata in the page I think. but when I share it on facebook….all the metadata comes up including the thumbnail but the video won’t play there in facebook. So will this not work because I am embedding these videos from you tube?

      Sample here……http://www.islandbeats.com/videos.php?video_id=310

    • Eric Bowman

      July 31, 2011 at 8:11 am


      WordPress Help
      Guys and gals. I’ve figured out one solution…I think…for anyone wanting to add the meta data using WordPress, but not in the header.php file. I’m amazed that Ethan and others are saying to just “put this in the source code”. That’s just not helpful because the meta properties need to be included via PHP and are obviously going to be different for each post.

      So, in the header.php file right after , you COULD place the following PHP code:

      < ?php if ( get_post_meta($post->ID, 'fb_og_title', true) ) : ?>

      < ?php endif; ?>
      < ?php if ( get_post_meta($post->ID, 'fb_og_video', true) ) : ?>

      < ?php endif; ?>
      < ?php if ( get_post_meta($post->ID, 'fb_og_description', true) ) : ?>

      < ?php endif; ?>

      Couple of notes on this:

      – This checks to see if you have a custom field created for the post, and if so it “echos” an appropriate meta property. The name of the custom fields for this example MUST BE fb_og_title, fb_og_description, and fb_og_video.

      – If a custom field is not specified for the post, this code will simply leave it blank.

      – You can AND SHOULD add more to this by using the PHP if statements above for the properties you need to specify. Please see this link for all the available open graph properties: http://developers.facebook.com/docs/opengraph/

      – This may not be the best way to accomplish this…I’m not a PHP guru by any means. This worked for me though.

      – FINALLY. I noticed that most of these values were automatically added when I added my video using the JWPlayer button found inside the Media overlay window when editing a post. However, sometimes it worked, sometimes it did not. You should be able to specify the thumbnail for the video in that Media overlay window, as well as the title, caption and description. If you find it works only part of the time or want more control use the code here and elaborate on it.

      I hope this helps someone…I scratched my head till it bled trying to figure this out.

    • Chau Promotions

      August 12, 2011 at 4:17 pm


      Ok… 2 things….

      I’ve found that an easy way to work with CMSs (Joomla, WordPress, Drupal, etc) would be rather than trying to tweak php code, u can create a folder in ur video folder (or wherever) and create individual HTML files for each vid… that way u can use one as a template and copy to other files and modify as u go along….

      2nd thing – I did a lot of tweaking (largely due to my own typos :P) and got the link to display witht he thumbnail and all…. but there is no “play button” when I share it…. is there some meta property or an option in the video string that controls this?

    • Hassan

      August 14, 2011 at 9:36 am


      Hi guys,
      I am using php motion which is a content management system also. Now, I am confused that where should put these meta tags in the code. I mean, in which file?
      Thanx

    • Sam

      August 21, 2011 at 1:38 pm


      Hi,

      Thanks Longtail for this article, this worked like a charm in the 1st try.

      One question though, each video on our website (http://www.tripvids.tv) is using the gapro-2 plugin to send video views to google analytics. Is there a way to do the same when users play the videos shared on facebook?

      Sam

    • Ethan LongTail

      August 22, 2011 at 2:18 am


      You would have to pass the plugin in as part of the “og:video” meta-tag.

    • Ethan LongTail

      August 22, 2011 at 7:45 pm


      You would have to use gapro-1 for the Facebook embeds, since it uses Flash only, and gapro-2 only works in the JW Embedder.

    • Jayson Pimentel

      September 6, 2011 at 4:10 am


      Is the views in facebook embeded videos will be counted to your views in wordpresS?

    • Nico

      September 6, 2011 at 5:10 am


      Is there something similar to publish videos to Google+ ?

    • Ethan LongTail

      September 6, 2011 at 6:29 pm


      @Jayson – I replied to your thread.

      @Nico – Does Google+ allow for videos to be embedded inside of a news feed?

    • Jayson

      September 15, 2011 at 2:50 pm


      I have managed to make it work just 2 days ago i dont know what happened but the embed doesnt work now , it shows the info in the facebook linter but just showing links on facebook.

      http://www.flippish.com/super-bass-by-ashley-gosiengfiao/2011/09/13/

      PS : it works on comments on the wall not the wall itself.

    • Ethan LongTail

      September 15, 2011 at 5:39 pm


      Under:

      AddL

      Also, if you continue to have issues, please email support directly, thanks.

    • jason

      October 16, 2011 at 10:44 am


      Everything goes fine until i click play. Then nothing shows up.

    • Ethan LongTail

      October 17, 2011 at 4:14 am


      Contact us with a link please.

    • Metacowboy

      November 8, 2011 at 6:34 pm


      Finaly the Facebook embed stuff is working very well only the next steps to get conform with google+ it would need oEmbed json link to get embed . Same like vimeo and youtube are providing . Mansur just made a chrome plugin that renders additional Flash like slideshare and soundcloud content player inside google+ any chance that we get a simple api script to parse the Json xml needet for the Jwplayer .
      Also Facebook support now oEmbed

    • Ethan LongTail

      November 8, 2011 at 9:38 pm


      We don’t support Google+ yet, but good idea.

    • Victoria

      November 29, 2011 at 6:21 am


      I suggest adding a facebook like button for the blog!

    • Mohammad

      December 14, 2011 at 6:24 am


      Hi.Im using wordpress

      Im cant share Videos to Facebook with a JW Player.
      Pls help me :(

    • Compare Ellipticals

      December 16, 2011 at 4:50 pm


      Strongly suggest adding a “google+” button for the blog!

    • Meagan

      December 16, 2011 at 8:06 pm


      @Ellipticals, we have this on our roadmap for the blog. Thanks for the suggestion! Best, Meagan.

    • helpful hint

      March 9, 2012 at 9:08 pm


      For those struggling, recently FB made it required to have the video:secure_url in order to have videos properly embed.
      This means you need to have your player be on HTTPS – SSL.

    • indalab rep

      March 9, 2012 at 10:27 pm


      hey guys i have a issue let me know if you think this would work….im trying to get my flash player to open on fb wall but its just spinning can some one take a look at my code and let me know what i could be leaving out















      In order to view this object you need Flash Player 9+ support!


      Get Adobe Flash player

    • indalab rep

      March 9, 2012 at 10:27 pm


      when i post it to facebook it just loads and spins on the wall

    • MAXX

      March 11, 2012 at 9:42 pm


      Is there a way to pass the Related Videos XML of the Viral plugin to the player on Facebook?

    • Ethan LongTail

      March 12, 2012 at 5:17 am


      I don’t know if the plugin will load correctly inside of FB.

    • Antonio Espinal

      May 7, 2012 at 6:09 pm


      I upgraded. Thanks.
      But the site does not show de stream…

    • Anthony

      May 31, 2012 at 5:06 pm


      I successfully got the player to show up on facebook how ever i get an access denied when i press play. here is what my meta tags look lik








      need some help

    • Anthony

      May 31, 2012 at 5:54 pm


      Also what syntax do i use to properly set the colors? here how mine looks but it doasents eem to add it.








    • Curtis

      July 30, 2012 at 6:15 pm


      Im using the latest wordpress plugin and I have it set to add the settings for facebook video posting. When I add a link on FB it shows the image and the play button but when its clicked nothing happens. It just turns white. Please help.

    • Ethan LongTail

      July 30, 2012 at 6:36 pm


      Please contact us with a link…

    • Curtis

      July 31, 2012 at 3:41 pm


      Just did. Thanks.

    • Ethan LongTail

      July 31, 2012 at 3:48 pm


      Np

    • Denis G - Blue Cat Pro

      October 12, 2012 at 2:54 pm


      AGain about RTMP, if anyone has a proper code working (I still can’t get mine to work) please give me a working example!!!

    • Denis G - Blue Cat Pro

      October 23, 2012 at 1:18 pm


      Yes, great, still can’t get RTMP working on FB with our CND provider. anyone with working example of the code?

    • Ethan LongTail

      October 23, 2012 at 4:52 pm


      Please email us a link.

    • Denis G

      November 1, 2012 at 9:07 pm


      Here is the link: http://www.facebook.com/BlueCatProductions try anything on that timeline that has rtmp, looks for shared ‘videos’ they are all real rtmp streams via JWPlyaer.

      It kind of works only after you click on the link itself and video is playing.

      Also you can see html code of the actual page in browser if you need it.

      Besides that after spending hours and hours to try and fix this, its not working!!

      Really sad to say but.need it to work! anyone???

    • Ethan LongTail

      November 1, 2012 at 9:31 pm


      I just went to the first video on the page:

      I notice I have to press play, but this is because this link, where the video comes from, is broken – http://www.webvideostreaming.co.uk/livefeed/index1x.html

      They have:

      "http://www.webvideostreaming.co.uk/JWPlayer/player.swf?&type=rtmp&streamer=rtmp://fml.4984.planetstream.net/204984&file=bluecat&autoplay=ture"/>

      But it needs to be:

      "http://www.webvideostreaming.co.uk/JWPlayer/player.swf?&type=rtmp&streamer=rtmp://fml.4984.planetstream.net/204984&file=bluecat&autostart=true"/>

      They used autoplay instead of autostart, and also spelled the word true wrong…

    • Michael

      November 2, 2012 at 6:48 pm


      Hi All,

      JW Player can play Video and Audio, can anyone post an example for playing audio files?

      Thanks,
      Michael

    • Brendan Eamer

      November 6, 2012 at 10:27 pm


      Hey everyone,

      So I’ve got a plugin that works great when I’m embedding the code in my site, but when I try to use a query string, ie:


      https://eamer.ca/public/test_video/player/player.swf?file=http://www.youtube.com/watch?v=WPZW8_ID-l4&skin=maketree.zip&plugins=player5plugin.swf

      it loads the skin but not the plugin. I’ve tried every possible iteration I can think of:
      plugins=plugin5plugin
      plugins=plugin5plugin.swf
      plugin=plugin5plugin
      plugin=plugin5plugin.swf

      Nothing seems to take. Any suggestions?

      Thank you!

      Brendan

    • Ethan LongTail

      November 6, 2012 at 11:39 pm


      Do you have a link?

    • Brendan Eamer

      November 12, 2012 at 4:35 am


      Are you asking me Ethan? If so, is the link that I posted not showing up?


      https://eamer.ca/public/test_video/player/player.swf?file=http://www.youtube.com/watch?v=WPZW8_ID-l4&skin=maketree.zip&plugins=player5plugin.swf

    • Ethan LongTail

      November 12, 2012 at 5:33 am


      @Brendan – Yes, I am asking you. I want a link to where the player is embedded in a post on your site, do you have that? The link you supplied is just a direct path to the .SWF file…

    • Brendan Eamer

      November 13, 2012 at 4:08 am


      @Ethan Ahh sorry about that, here it is:


      http://eamer.ca/public/test_video/index.html

      Just to be clear (I’m sure you already understand this), its the link that points to the actual .swf file that I need to get working, as its what will be in the tag.

      B

    • Brendan Eamer

      November 13, 2012 at 4:10 am


      @Ethan

      Lol well I must have been staring at it too long, I figured it out, sorry to waste your time

    • Eitan

      January 23, 2013 at 3:08 pm


      Any Idea Why this does not work when facebook is in a secured connection mode?













      and @ Ethan:
      Is there a way to post something like this with JW6?

    • Ethan LongTail

      January 23, 2013 at 7:24 pm


      V5 only. Provide a link.

    • Ethan LongTail

      January 24, 2013 at 6:16 pm


      Your video OG tag is not https, and it needs to be, since the other ones are.

    • David

      February 5, 2013 at 2:57 am


      Any timeframe for JW6 support?

    • David

      February 5, 2013 at 2:58 am


      Or a work-around?

    • Ethan LongTail

      February 5, 2013 at 6:46 pm


      Use JW5 for the time being.

    • Paul_

      February 9, 2013 at 6:56 pm


      Hi,

      I can’t make it work for now with AWS Cloudfront rtmp.

      Here is my code:







      I tried to debug here: http://developers.facebook.com/tools/debug
      and got these results:
      – Critical Errors That Must Be Fixed
      Code de réponse erroné : URL returned a bad HTTP response code.
      – Errors That Must Be Fixed
      Missing Required Property : The ‘og:url’ property is required, but not present.

      What should I do?
      Paul

    • Paul_

      February 12, 2013 at 9:08 pm


      Nobody can help?
      I don’t see what’s the problem. I use mediaplayer-5.10 licensed version.

    • ospn2012

      February 17, 2013 at 11:38 am


      @Paul

      Need https:// SSL to embed.

    • Ethan LongTail

      February 19, 2013 at 2:53 am


      That is correct.

    • Justin

      February 28, 2013 at 12:57 am


      I need JW6 for HLS support, but I also need to embed in Facebook. Why not simply add flashvars support so I can pass the url of the m3u8 asset I want to play?

      In the meantime, I’ll be working on implementing OSMF + HLS plugin and bypass my need for JW Player.

    • Ethan LongTail

      February 28, 2013 at 4:57 pm


      Id use JW6 on your site, and JW5 in the OG tag.

    • Justin

      February 28, 2013 at 10:30 pm


      Where can I download JW5 to see if that will even work, Ethan?

    • Justin

      March 5, 2013 at 3:37 pm


      Thanks for the help, Ethan. Unfortunately, I need m3u8 support in Facebook. JWPlayer 5 gives me Facebook support. JWPlayer 6 gives me m3u8 support. Neither provides both.

    • Ethan LongTail

      March 5, 2013 at 7:02 pm


      I’m afraid we don’t have a solution for both.

    • STV1

      March 24, 2013 at 3:41 pm


      Hi Ethan,

      How do we get round the HTTPS issue with OG TAG sharing on Facebook….

      Our code works fine on Facebook and displays our live streaming video but only when viewing Facebook in HTTP….

      When the security settings are set back to HTTPS the video will not play and instead just links to our site….

      Is there a workaround so everyone sees the video regardless of their security settings?

      Regards

      Danny

    • Javed

      March 25, 2013 at 3:50 am


      Hi Ethan,

      I’m hoping you can take a look at my page: http://www.test-promoki.com/entries/42

      I’m trying to get the player (version 6) to embed and play the file but no luck for days now. The player file and video file is hosted on rackspace CDN in the FB feed the player displays but the file does not play.

      Please help!

      Regards,

      Javed

    • Ethan LongTail

      March 25, 2013 at 3:25 pm


      @Javed – This is a blog. Please actually email us for support inquires. That being said, your link plays the video fine, but the OG method of implementation only works with JW5, not 6.

    • dan

      March 26, 2013 at 6:19 pm


      hello – been trying all day to get facebook to recognise the meta tags and play it as a video once shared on a wall.

      http://www.independ.net/?attachment_id=3413

      followed your code exactly but no joy –








      any suggestions welcome!

      JWplayer 5.10, licensed.

      best, Dan.

    • Ethan LongTail

      March 26, 2013 at 8:05 pm


      Do you have anything else on your page that might be conflicting perhaps?

    • Thushan Amarasiriwardena

      March 29, 2013 at 8:58 pm


      Howdy. Are there any plans to make the JW6 Player and all the customizations that we are using via the XML config file work in Facebook? Also are there anyways to get view counts from FB embedded plays?

    • Ethan LongTail

      March 29, 2013 at 9:24 pm


      Not sure on an ETA…

    • Ethan LongTail

      May 28, 2013 at 6:12 am


      @Himura – Glad you got it.

      @Yash – You are going to need to give us a link to debug.

    • Ethan LongTail

      June 26, 2013 at 9:27 pm


      Facebook might have changed some things.

    • Cam at MyFleye

      June 27, 2013 at 1:44 pm


      Thanks Ethan
      Anyone else having any luck playing video within Facebook?

    • Ethan LongTail

      June 27, 2013 at 4:08 pm


      Np

    • DL

      June 29, 2013 at 11:42 pm


      Will this no longer work or what? If it’s still working, Ethan, will you please confirm that. And if not, can or will you confirm that your team is investigating? This is a pretty big deal for me — as I’m sure for others.

    • Ethan LongTail

      July 1, 2013 at 3:10 am


      Facebook has updated something on their end, it seems.

    • Ethan LongTail

      July 10, 2013 at 4:05 pm


      Fb updated something on their end.

    • Mike

      July 19, 2013 at 11:32 pm


      Anyone solve the embed in FB timeline yet? Could it be that you must serve up the swf via https ?

    • Alex Lopez

      July 22, 2013 at 5:04 am


      I got it working with jwplayer 5.10, please let us know once it work with version 6

    • Ethan LongTail

      July 22, 2013 at 4:33 pm


      This is only supported with V5. Yes, HTTPs is required.

Leave a comment

Your email address will not be published



We are glad you have chosen to leave a comment. Please keep in mind that comments are moderated according to our Comments Policy