Publish Your Videos to Facebook with a JW Player

Blog 5 min read | Apr 13, 2011 | JW Player


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


Sharing your videos through Facebook and Twitter dramatically expands your reach across the web. Our newest HTML5 video player offers the flexibility for you to incorporate social sharing function via our API. The JW Player Sharing Overlay displays a customizable layer over the player which enables your viewers to click to share the video to social networks.

To get an overview of JW Player’s social sharing plugins and how to implement social sharing, please read this article on our support website.

Our live streaming product, JW Live, also offers a simulcast from Facebook Live, allowing all your live streams to be managed within one consolidated video CMS dashboard.

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

An Example

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 tag, and it will not show up in the browser’s title bar.</li> <li><strong>og:image</strong> – the poster image. This is what will be displayed on the viewer’s wall with the play button over it.</li> <li><strong>og:video</strong> – the URL to your JW Player, with the configuration passed in as part of the URL string.</li> </ul> <h3>Constructing the Video String</h3> <p>Coming up with a usable <em>og:video</em> 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:</p> <ul> <li>Start with the absolute path to your JW Player (ie, “”).</li> <li>Next, add a “?”. Everything after this will be interpreted as player configuration, and ensures that your web server will serve up your video player.</li> <li>For each <a href="">configuration option</a> you’d like to specify, add the name of the configuration option, then a “=”, and finally the <a href="">URL-encoded</a> version of the value you wish to specify (ie “”). Be sure to separate each configuration option with a “&”.</li> </ul> <p>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 <a href="">cross-domain security restrictions</a> in place.</p> <h3>Posting to Facebook</h3> <p>Thanks to all of your hard work, posting into Facebook is a snap! Simply drop your into the share box, like so:</p> </p> <p>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!</p> <h3>Security Limitations (HTTPS)</h3> <p>Recently, Facebook has received some <a href="">bad press</a> 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.</p> </div> </div> <script src="/wp-content/themes/unified/modules/blog-content-module.js?v=1685727045"></script> </section></div><div class="sidebar"><div class="select-wrap"> <form role="search" method="get" id="searchform" class="searchform" action=""> <fieldset> <label class="screen-reader-text" for="search"></label> <input type="text" placeholder="Search" name="s" id="s" /> </fieldset> </form> <div class="recent-posts"> <a href="" target="_self"> <div class="link-wrap"> <h4 class="post-copy-header">Securing Your Video Content: Best Practices for Video Security</h4> <div> <span class="date-section"><span class="resource-type">Blog</span> <span class="spacer"> | </span>Apr 12, 2024</span> </div> </div> </a> <a href="" target="_self"> <div class="link-wrap"> <h4 class="post-copy-header">Everything You Need for PPV Sports Streaming in 2024</h4> <div> <span class="date-section"><span class="resource-type">Blog</span> <span class="spacer"> | </span>Apr 11, 2024</span> </div> </div> </a> <a href="" target="_self"> <div class="link-wrap"> <h4 class="post-copy-header">CDNs? Multi-CDNs? How Are They Different and Which is Right for You?</h4> <div> <span class="date-section"><span class="resource-type">Blog</span> <span class="spacer"> | </span>Apr 10, 2024</span> </div> </div> </a> </div> </div></div></div> <section data-aos="fade-up" class="u4m-blog-post-cards " style=" margin-top: px; margin-bottom: px; "> <a class="anchor" id=""></a> <div class="top-wrapper"> </div> <div class="wrapper"> <div class="blog-post-card-wrap mix blog what to expect from jwp at nab 2024"> <a class="blog-post-card " href="" target="_self"> <div class="image lazy " data-bg="" > </div> <div class="post-copy"> <div class="top"> <span class="category-section blog">Blog</span> </div> <div class="bottom"> <h4 class="post-copy-header ">What to Expect From JWP at NAB 2024</h4> <span class="date-section">2 min read | 03/13/24</span> <p class="post-copy-excerpt">NAB 2024 is just around the corner and this year is slated to be the best yet.  Content professionals from across the globe in every sector of broadcasting will...</p> <button>Read More</button> </div> </div> </a> </div> <div class="blog-post-card-wrap mix blog unlock personalized streaming with identity management profiles"> <a class="blog-post-card " href="" target="_self"> <div class="image lazy " data-bg="" > </div> <div class="post-copy"> <div class="top"> <span class="category-section blog">Blog</span> </div> <div class="bottom"> <h4 class="post-copy-header ">Unlock Personalized Streaming With Identity Management Profiles</h4> <span class="date-section">2 min read | 12/1/23</span> <p class="post-copy-excerpt">User journey and personalization have taken center stage in today’s OTT scene. As the demand for personalized content grows, the need for streamlined and tailored viewing experiences becomes increasingly...</p> <button>Read More</button> </div> </div> </a> </div> <div class="blog-post-card-wrap mix blog how to set up a password-protected live stream"> <a class="blog-post-card " href="" target="_self"> <div class="image lazy " data-bg="" > </div> <div class="post-copy"> <div class="top"> <span class="category-section blog">Blog</span> </div> <div class="bottom"> <h4 class="post-copy-header ">How To Set Up A Password-Protected Live Stream</h4> <span class="date-section">7 min read | 05/18/23</span> <p class="post-copy-excerpt">With over 2,000 cyber hacks happening daily in 2023, it’s crystal clear that protecting the security of your content online has never been more crucial. And you don’t have...</p> <button>Read More</button> </div> </div> </a> </div> </div> </section><section class="blog-subscribe u4m-subscribe"> <div class="background-overlay"> <div class="content-wrap"> <div class="copy"> <h3 class="heading"></h3> </div> <div class="form-wrap"> <div class="form"></div> </div> </div> </div> </section></div><!-- /main-content --> <footer class="u4m-footer full-width "> <div class="center"> <div class="top"> <div class="logo"> <img src="" /> </div> <div class="main-footer-wrap"> <div class="menu-footer-menu-container"><ul id="menu-footer-menu" class="main-footer-menu"><li id="menu-item-259" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-259"><a>Products</a> <ul class="sub-menu"> <li id="menu-item-263" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-263"><a href="/web-player/">Web Player</a></li> <li id="menu-item-264" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-264"><a href="/ott-video-apps/">OTT Apps</a></li> <li id="menu-item-265" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-265"><a href="/outstream-player/">Outstream Player</a></li> <li id="menu-item-266" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-266"><a href="/live-vod-streaming/">Live & VOD Streaming</a></li> <li id="menu-item-267" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-267"><a href="/studio-drm/">Studio DRM</a></li> <li id="menu-item-268" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-268"><a href="/advertisers/">Programmatic Advertising</a></li> <li id="menu-item-5931" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-5931"><a href="">Subscriptions and Payments</a></li> <li id="menu-item-5930" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-5930"><a href="">Web App</a></li> <li id="menu-item-22742" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-22742"><a href="">FAST Channels</a></li> </ul> </li> <li id="menu-item-260" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-260"><a>Solutions</a> <ul class="sub-menu"> <li id="menu-item-269" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-269"><a href="/broadcasters/">Broadcasters</a></li> <li id="menu-item-270" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-270"><a href="/publishers/">Publishers</a></li> <li id="menu-item-271" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-271"><a href="/fitness/">Fitness</a></li> <li id="menu-item-272" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-272"><a href="/online-courses/">Online Courses</a></li> <li id="menu-item-273" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-273"><a href="/sports/">Sports</a></li> <li id="menu-item-274" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-274"><a href="/faith/">Faith</a></li> </ul> </li> <li id="menu-item-261" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-261"><a>Results</a> <ul class="sub-menu"> <li id="menu-item-275" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-275"><a href="/resources/#case-study">Case Studies</a></li> <li id="menu-item-276" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-276"><a href="">TEI Report-Publishers</a></li> <li id="menu-item-5356" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-5356"><a href="">TEI Report-Broadcasters</a></li> <li id="menu-item-5499" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-5499"><a href="/resources/#blog">Blog</a></li> </ul> </li> <li id="menu-item-262" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-262"><a>About</a> <ul class="sub-menu"> <li id="menu-item-277" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-277"><a href="/about-us/">Company</a></li> <li id="menu-item-278" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-278"><a href="/careers/">Careers</a></li> <li id="menu-item-279" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-279"><a href="/resources/">Resources</a></li> <li id="menu-item-280" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-280"><a href="">Developer Tools</a></li> <li id="menu-item-281" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-281"><a href="/partners/">Partners</a></li> <li id="menu-item-282" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-282"><a href="/resources/#press-release">Press Releases</a></li> </ul> </li> </ul></div> </div> </div> </div> <div class="bottom"> <div class="inner"> <div class="left"> <div class="menu-footer-bottom-links-container"><ul id="menu-footer-bottom-links" class="bottom-footer-menu"><li id="menu-item-592" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-592"><a href="/legal/privacy/">Privacy Policy</a></li> <li id="menu-item-593" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-593"><a href="/legal/dmca/">DMCA</a></li> <li id="menu-item-594" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-594"><a href="/legal/tos/">Terms of Service</a></li> <li id="menu-item-595" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-595"><a href="/legal/privacy/">Ad Choices</a></li> <li id="menu-item-596" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-596"><a href="">Support</a></li> </ul></div> </div> <div class="right"> <ul class="social"> <li><a target="_blank" href=""><i class="fab fa-facebook-f"></i> </a></li> <li><a target="_blank" href=""><i class="fab fa-twitter"></i></a></li> <li><a target="_blank" href=""><i class="fab fa-linkedin-in"></i> </a></li> <!-- <li><a target="_blank" href=""><i class="fab fa-youtube"></i> </a></li> <li><a target="_blank" href=""><i class="fab fa-instagram"></i></a></li> --> </ul> <span>Copyright © 2024 JW Player</span> </div> </div> </div> </div> </footer> <div class="simple-banner simple-banner-text" style="display:none !important"></div><!-- Google Tag Manager (noscript) --> <noscript><iframe src="" height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript> <!-- End Google Tag Manager (noscript) --><script type="text/javascript" defer src="//" id="Slick-js"></script> <script type="text/javascript" defer src="//" id="Mixitup-js"></script> <script type="text/javascript" defer src="//" id="iframeSizer-js"></script> <script type="text/javascript" defer src="//" id="fitvids-js"></script> <script type="text/javascript" defer src="" id="Menus-js"></script> <script type="text/javascript" defer src="" id="Magnific-js"></script> <script type="text/javascript" defer src="//" id="tooltipster-js"></script> <script type="text/javascript" defer src="" id="jsCookie-js"></script> <script type="text/javascript" defer src="" id="hcSticky-js"></script> <script type="text/javascript" defer src="" id="lazyload-js"></script> <script type="text/javascript" defer src="" id="aos-js"></script> <script type="text/javascript" defer src="" id="myscripts-js"></script> <script type="text/javascript" defer src="" id="MixitupPagination-js"></script> <script type="text/javascript" defer src="" id="Multifilter-js"></script> <script type="text/javascript" id="rtrar.appLocal-js-extra"> /* <![CDATA[ */ var rtafr = {"rules":""}; /* ]]> */ </script> <script type="text/javascript" defer src="" id="rtrar.appLocal-js"></script> <script type="text/javascript" defer src="" id="unified-for-wordpress-navigation-js"></script> <script type="text/javascript" defer src="" id="unified-for-wordpress-skip-link-focus-fix-js"></script> <script type="text/javascript" defer src="" id="comment-reply-js" async="async" data-wp-strategy="async"></script> <script type="text/javascript" defer src="" id=""></script> </div><!-- end #page --> </body> </html>