***

How to embed Facebook Video in WordPress

Reading Time: 3 minutes

If you watched the F8 conference you know that you can embed facebook videos now on your own blog and webpage.  Since wordpress and most other CMS dont like scripts in the content area here is a small walk thru to optimise and minimise the embed code to the needed essence.

The default code offered from facebook is a bit too heavy ideal if you have a naked html page but unnecessary if you just want the video on a already Social & Facebook optimised Blog.  you probably  integrated already some like share or other Facebook widgets there so there is no need to duplicate the javascript again. Ok lets start step by step showing both methods Default facebook way and the minimal second way.

1) Facebook embed default get the facebook video you like to embed.

Screen shot 2015-04-01 at 10.00.05

Screen shot 2015-04-01 at 10.00.41

right side below the video post you find the Embed Video link. after click you get the full default code to embed for the example video url .If you don’t care and don’t have a WordPress blog or use any html Javascript Plugin you can use that method. That method is also recommended to embed in some third party Blog Platforms or webpages .

Awesome Making-of behind the scenes for JAGON film students at work To be a Filmmaker, you shall subscribe like http://fb.me/CameramanTVTag someone who should see this!DoP : Tony KopecDirector : Murat Eyüp Gönültas Shortfilm | Filmakademie Baden-Württemberg

Posted by Cameraman on Freitag, 26. Dezember 2014

 

2) The Simple way . In Text mode paste following code into your Blogpost and change the video url to your video. Or only the Video ID the number behind the v=12345674545 is fine. Dont forget to switch from VISUAL to TEXT mode in your editor. In detail its only a div with a class and the data-href parameter nothing big.

 

 

<div class="fb-video" data-allowfullscreen="true" data-href="https://www.facebook.com/video.php?v=10155052082035157">
</div>

The only difference to a standard Post embed is the style  class=”fb-video” that tells the script how to embed the facebook video . It nearly the same for embed Facebook posts by default with the following code snippet.

<div class="fb-post" data-href="https://www.facebook.com/video.php?v=10155052082035157" data-width="500">

Witch will render like that on this blog probably i should remove the data-with=500 attribute to stay fluid .

 

the only difference between post and video embed is the style class=”fb-post” all the other code stuff is not  needed and only clutter your blog.

Pro Facebook Video: Not all Youtube Videos are allowed to embed on external webpages . Many more mobile videos from apps that are probably hard to find in youtube. Most videos are pre curated by the community on there virality. Many News Channels  TV-Host and filmmaker upload videos to facebook . Embed Facebook videos are unblockable. Easy to integrate once setup .

Downside : Likes on embedded facebook videos need a additional confirmation click, for security reason not sure how many user will follow 2 click and window popup for a simple Like.  Only Public and Fanpage videos can be embed. Every external embed will slow down your blog.

Note : Advanced Facebook Video share. One reason to dig into this social video topic was also to test how to share Facebook videos with a our custom video player. If you like you can try it out by sharing this post on your Facebook Timeline or page.

Video Credit : JAGON with friendly permission

Additional References : Facebook Developer Embed Helper
WordPress Ref.: Allowed WordPress HTML Tags