Embed a Facebook video in your 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.
    Play Facebook 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.
    Select Iframe Code
  4. Click the position where you want to add the video followed by a
  5. click on the “Source” icon on your editor toolbar.
    Source Icon
  6. Paste the code into the source making sure to paste exactly where your mouse pointer was.
    Place of insert
    Iframe Pasted
  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.

Iframed facebook video not responsive

Facebook Integration code method.

This method is a bit more complex

  1. Open the video as above but click “Advanced Settings”
    Advanced Facebook Settings
  2. You will be redirected to a new page
    Facebook Video Played Configuration
  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
    Javascript SDK Facebook code
  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.

XMS Systems E-Commerce desktop view BETA

XMS Systems E-Commerce Module BETA Version screencast from Desktop browser.

Posted by XMS Systems on Monday, 28 December 2015
Written by:  - 7 Dec, 2016  
comments powered by Disqus
flashy