javascriptiframefacebook-javascript-sdkfrontendfacebook-social-plugins

Facebook post embed renders but isn't showing up

I'm trying to get the Facebook Post embed working on my own site using their JS SDK but it doesn't seem to show up. Some inline styles on the embedded iframe and the span it encapsulates it, controls the display of the widget. I found some hacks but they aren't perfect. I used facebook's JS playground on the same code and it works. There aren't any stylesheet interfering with this file and no extension as well as I checked in firefox and the result was the same.

edit: posting the code here:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
    </head>
    <body>
        <script src="https://connect.facebook.net/en_GB/sdk.js#xfbml=1&version=v2.12" async></script>
        <div class="fb-post" data-href="https://www.facebook.com/20531316728/posts/10154009990506729/" data-width="500"></div>
    </body>
</html>

Kindly see the photo attachment.

Thanksenter image description here

P.S. Facebook code is directly copied from their docs, HERE

Solution

  • I assume you tried this by just opening the HTML file in your browser. You have to open it using a local or remote server. If i start it with a local server with the exact same code, it works perfectly fine.

    For example: https://www.npmjs.com/package/http-server