Embed a Facebook video in your website.

This tutorial discusses the two methods available for embedding a Facebook video into your XMS Systems website.

Although I make no secret that I am not a huge fan of Facebook I have to admit that it is useful to use as a CDN (content delivery network). That is you can upload your videos (in this case) and have them hosted on Facebook while using them on your website.

Although embedding a Facebook video is not as easy as embedding a YouTube video it can still be done with relative ease if you know where to click in Facebook.

This tutorial discusses the two methods available for embedding a Facebook video into your XMS Systems website. and the effectiveness of those with regards to the responsive design methods we use with XMS Systems.

Iframe Method

This is probably the easiest method to embed a Facebook video.

1. Click the video so that it opens up on it’s own overlaying the actual Facebook page and click the “3 dots” at the top right hand side of the video.
   
2. Click the “3 dots” to open the dropdown followed by a click on “Embed”
3. Select the code ready to paste into your website.
   
4. Click the position where you want to add the video followed by a
5. click on the “Source” icon on your editor toolbar.
   
6. Paste the code into the source making sure to paste exactly where your mouse pointer was.
   
   
7. Click the “Update” or “Save” button to save your work.

Your video will be displayed like below. However as is clear the video is not responsive and will not display well on a mobile device.

Facebook Integration code method.

This method is a bit more complex

1. Open the video as above but click “Advanced Settings”
   
2. You will be redirected to a new page
   
3. Change the “pixel width of the video”​ to 600 and click “Get Code”
4. You will now once again be redirected to a different Facebook location
   
5. If you manage more than one Facebook Page, make sure to select the correct Page/App ID
6. Next copy the code in “Facebook Step 3”
7. On your website, place the cursor in the position where you want the video to display, click “Source” and paste the copied code in place.
8. Now copy the code in “Facebook Step 2”
9. Go back to your website and while still in “Source” mode, scroll up to the top of the source code
10. click at the very front of the first line of code and press enter on your keyboard
11. Now Paste the code copies from facebook
12. Click update or insert to save your work.

The video below is inserted using the second method to allow you to test the responsiveness of the video by resizing your browser window or view if on your mobile device.