How to embed Facebook videos in WordPress

Believe it or not, this seems surprisingly unclear at first blush! Or maybe that isn’t too surprising considering how often Facebook changes the rules. :-p

The first thing you/Google think to try is just to embed it directly.

[embed width="123" height="456"]https://www.facebook.com/DisneyAulani/videos/961137040599463/[/embed]

But that doesn’t work because WordPress doesn’t support direct embeds from Facebook (again, not too surprising).*

The next suggestion from Lord Google is to copy/paste the Facebook embed code and post that directly in the post (it’s HTML code so we have to make sure to use Text mode instead of Visual mode).

<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_PI/sdk.js#xfbml=1&version=v2.3"; fjs.parentNode.insertBefore(js, fjs);}(document, 'script', 'facebook-jssdk'));</script><div class="fb-video" data-allowfullscreen="1" data-href="/DisneyAulani/videos/vb.147898618589980/961137040599463/?type=3"><div class="fb-xfbml-parse-ignore"><blockquote cite="https://www.facebook.com/DisneyAulani/videos/961137040599463/"><a href="https://www.facebook.com/DisneyAulani/videos/961137040599463/"></a><p>Uncle prepares for Fall at Aulani!</p>Posted by <a href="https://www.facebook.com/DisneyAulani">Disney Aulani</a> on Day o&#039; the Moon, Septembarrr 21, 2015</blockquote></div></div>

But that doesn’t work. Hmm. We can’t embed the content directly, we can’t use Facebook’s code. Maybe we can try an iFrame!

<iframe src=”https://www.facebook.com/DisneyAulani/videos/vb.147898618589980/961137040599463/?type=3” width=”540″ height=”420″ frameborder=”0″></iframe>

Yeuch. Nope.

Final victory for me was achieved with the Iframely plugin. Their homepage has a free conversion/code generator that spat out the following code when provided with the Facebook video URL.

<a href="https://www.facebook.com/DisneyAulani/videos/961137040599463/" data-iframely-url="//cdn.iframe.ly/ejfCSm" data-template="inline"></a><script async src="//cdn.iframe.ly/embed.js" charset="utf-8"></script>

Voila!

* Not to trumpet DreamHost‘s praise any louder, but somehow / apparently, DreamPress supports the direct embedding of Facebook videos. Automatically. Using the [embed] shortcode. *jaw drops* Although I can’t trust myself, so further testing is in the pipeline and I’ll update this post with the results.

Update (2015-10-05 23:37): Ah, okay. It’s not DreamPress or even specifically DreamHost. It’s Jetpack. If you connect Jetpack to Facebook, the embed shortcode likes Facebook videos. Go figure! But at least there’s some kind of work-around if you don’t want to use Jetpack to integrate Facebook with your blog. But why wouldn’t you? 😉

Leave a Reply