How to Embedded Facebook Video in your Blog or Website

bywebmaster -
How to Embedded Facebook Video in your Blog or Website

Getting your Code from a Video Post

1. Navigate to your Video Post

If you post a public video, you can get the embed code directly from the video post itself.
Choose Embed Video from the options menu:
Or when viewing a video in the full-page view select the Embed Video button on the bottom right:

For Pages only

When posting a public video on a Page you can get the embed code directly from the Timeline. Click on the icon that appears in the top right corner of the post on Facebook.
Choose Embed Video from the drop down menu: (For Pages only)

2. Copy and Paste Code

You will see a dialog appear with the code to embed your video post in it. Copy and paste this code into your web page in the place where you want it to appear.
For technical details please refer to the section Add Code Manually

Add Code Manually

Besides the Code Generator, you can also embed the code manually.

1. Get Video Post URL

First you need to get the URL of a video post you wish to share. The video post must be public, which is indicated by the gray world icon, right next the post's publishing time: 
For testing you can use this example URL:
"https://www.facebook.com/FacebookDevelopers/videos/10152454700553553/"

2. Load JavaScript SDK

To use the Embedded Video Player Plugin, or any other Social Plugin, you need to add the Facebook JavaScript SDK to your website. You need to load the SDK only once on a page, ideally right after the opening <body> tag:
<div id="fb-root"></div>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.3";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
You can find more help on implementing the JavaScript SDK in the JavaScript SDK - Quickstart.

3. Place Embedded Video Player Tag

Next place the Embedded Video Player tag at any place of your website. Replace {your-video-post-url} with your posts' URL.
<div class="fb-video" data-href="{your-video-post-url}"  
  data-allowfullscreen="true" data-width="500"></div>

4. Testing

Once you completed these steps you're able to test your Embedded Video Player. A completed integration will look like something like this:
<html>
    <title>My Website</title>
<body>
    <div id="fb-root"></div>
  <script>(function(d, s, id) {
    var js, fjs = d.getElementsByTagName(s)[0];
    if (d.getElementById(id)) return;
    js = d.createElement(s); js.id = id;
    js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.3";
    fjs.parentNode.insertBefore(js, fjs);
  }(document, 'script', 'facebook-jssdk'));</script>
  <h1>My Video Player</h1>
  <div class="fb-video"
    data-href="https://www.facebook.com/FacebookDevelopers/posts/10151471074398553"
    data-width="500"
    data-allowfullscreen="true"></div>
</body>
</html>
The result of our test example is shown in the screenshot below.

5. Customizing

Follow the instructions further down this page to adjust size, language and other settings.

Getting a video post's URL

There may be scenarios in which your embed code is created by a CMS and you just need the raw post URL. There are two ways to get a post's URL:
  1. Copy the URL of the permalink from your browser's address bar.
  2. Right-click the post's publishing time and copy the link address.
Both methods are highlighted in red in the screenshot below.

Via Graph API

If you wish to automatically integrate embedded video players into your website, you probably use the Graph API to aggregate videos. For example you may use the Page Videos API endpoint, which will send you a response for your request to /{page-id}/videos in the following format (shortend):
{
  "data": [
    {
      "id": "1234567890",
      "created_time": "2015-02-25T23:22:06+0000",
      "description": "My Video Caption",
      "embed_html": "<iframe src=\"https://www.facebook.com/video/embed?video_id=1234567890\" width=\"1280\" height=\"720\" frameborder=\"0\"></iframe>",
      "format": []
    }
   ]
}
To get the video's URL:
Use the id value to create a URL following the structure:
"https://www.facebook.com/video.php?v={id}"
Do not use the property embed_html for embedding videos. For more information about this topic, please refer to the FAQ section

Layout on Desktop

You can adjust the width of Embedded Video Player on desktop via the data-width attribute in the Embedded Video Player tag as shown in the example below. The value must at least by 220. There is no limit on the upper end, yet the player will never become bigger than its parent element.
Do not use CSS style tags to adjust the size of a plugin. It may result into display errors.
<!-- WRONG! -->
<style type="text/css">
.fb-video {
    width: 500px;
}
</style>
<div class="fb-post" data-href="{your-video-post-url}"></div>

<!-- CORRECT -->
<div class="fb-video" data-href="{your-video-post-url}"
  data-allowfullscreen="true" data-width="500"></div>

Fullscreen

You can add the property data-allowfullscreen="true" to allow the video to be played in fullscreen mode.

Layout on Mobile Web

On mobile web, the Embedded Video Player automatically scales to the inner width of its parent element.

Adjust Language

You can adjust the language of the Embedded Video Player plugin by loading a localized version of the Facebook JavaScript SDK. When you load the SDK adjust the value js.src to use your locale: Just replaced en_US by your locale, e.g. fr_FR for French (France):
  js.src = "//connect.facebook.net/fr_FR/sdk.js#xfbml=1&version=v2.3";
Supported locales are referenced in the Facebook Locales XML file. You may need to adjust the width of a Social Plugin to accommodate different languages. You may find more information on ourLocalization & Translation page.

Wordpress

If you are already using the Facebook SDK for JavaScript in your Wordpress site you can use the Embedded Video Player plugin by simply adding the fb-video tag to your post:
<div class="fb-video" data-href="https://www.facebook.com/video.php?v=10152795258318553" 
  data-width="500" data-allowfullscreen="true"></div>
If you are not using the Facebook SDK for JavaScript and embed a video via the copy&paste snippet, which you can get from each video post, the Embedded Video Player plugin will most likly not render as Wordpress will convert all & chars to #038; and break the player.
Instead use the following code to add the plugin:
<script>window.fbAsyncInit = function() {
    FB.init({
        xfbml      : true,
        version    : 'v2.3'
    });
    }; (function(d, s, id){
        var js, fjs = d.getElementsByTagName(s)[0];
        if (d.getElementById(id)) {return;}
        js = d.createElement(s); js.id = id;
        js.src = "//connect.facebook.net/en_US/sdk.js";
        fjs.parentNode.insertBefore(js, fjs);
    }(document, 'script', 'facebook-jssdk'));</script>
<div class="fb-video" data-href="https://www.facebook.com/video.php?v=10152795258318553" data-width="500" data-allowfullscreen="true"></div>
A new, easy Wordpress integration will be released in the near future.

FAQ

Can I use the Graph API video property embed_html?

No, you should not use the property embed_html. Use the Embedded Video Player plugin instead!

About the embed_html property:

The Graph API endpoint video will serve a property named embed_html. Its value will contain an HTML element that may be embedded in a Web page to play the requested video.
This value is not to be confused with the Embedded Video Player plugin. We do recommend to not usethis property anymore - use the Embedded Video Player plugin instead!
If you use the embed_html property's value, your video player will:
  • Not work on mobile devices and tablets
  • Not contain any additional information like views, video title, etc.

Example for embed_html property (deprecated):

{
  "embed_html": 
    "<iframe 
      src=\"https://www.facebook.com/video/embed?video_id=1234567890\"
      width=\"1280\" 
      height=\"720\"
      frameborder=\"0\">
    </iframe>"
}

Post a Comment

Previous Post Next Post

Contact Form