video-embeddingfacebook-instant-articles

Embed Facebook video in Facebook Instant Article


I followed the instructions at https://developers.facebook.com/docs/instant-articles/reference/social and relatedly https://developers.facebook.com/docs/plugins/embedded-posts#add-code-manually To embed facebook video in an instant article. Here is what I ended up with for my embed, but unfortunately when I preview the page I get a brief gray flash where the video should be and then no video.

<!-- Article body goes here --><figure class="op-social">
<iframe>
<!-- Include Facebook embed code here. Your Facebook embed code should contain both the "JavaScript SDK" and the "Embedded Post Tag" parts described at https://developers.facebook.com/docs/plugins/embedded-posts#add-code-manually -->
<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.6&appId=906632809405090";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<div class="fb-post" data-href="https://www.facebook.com/PopSugarCelebrity/videos/10154334075529824/0506729/" data-width="300" data-show-text="true"></div>
</iframe>
</figure>
  <p>Ernestine Shepherd, one of the world's oldest bodybuilders, turned 80 this month—and she's making us all want to hit the gym. While we're not about to join her for 3 a.m. workouts or 10-mile runs (did we mention she's a badass?), Shepherd's story is a great reminder that it's never too late to adopt healthy habits. She didn't start exercising until she was 56! </p>

I've successfully embedded youtube, twitter and instagram into our various FBIA pages so I thought fb videos should be a snap, but no such luck. Does anyone who has had success embedding FB videos on FBIA pages have some tips on where I went wrong with the above code?


Solution

  • I've had success using the iframe embed code from FB's configurator. The tool should give you the option to choose an 'iFrame' code snippet (at the top).

    Here's an example of an iframe embed that would work in instant article markup (be sure to update the URL and AppID).

    <figure class="op-interactive">
    <iframe src="https://www.facebook.com/plugins/video.php?href=https%3A%2F%2Fwww.facebook.com%2Ffacebook%2Fvideos%2F10153231379946729%2F&width=500&show_text=false&appId=906632809405090&height=281" width="500" height="281" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowTransparency="true"></iframe>
    </figure>