How to Embed Facebook Posts

Submitted by nurhodelta_17 on Wednesday, April 18, 2018 - 20:11.

Step 1:

Prepare the link of you the FB post that you want to embed on your page.

Step 2:

Go to Facebook Developer Page for embedding facebook post.

Step 3:

Fill up the URL of post field using the link of the post you want to embed then click Get Code. filling up post to embed generator

Step 4:

Take note of the codes generated by the generator.

Example

Here's the example code that is added to the page that I want the facebook post to embed.

<!DOCTYPE html>
<html>
<head>
        <meta charset="utf-8">
        <title>How to Embed Facebook Posts</title>
        <link rel="stylesheet" type="text/css" href="bootstrap4/css/bootstrap.min.css">
</head>
<body>
<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 = 'https://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.12';
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<div class="container">
        <h1 class="text-center" style="margin-top:30px;">Embed Facebook Posts</h1>
        <hr>
        <div class="row justify-content-center">
                <div class="col-sm-6">
                        <div class="fb-post" data-href="https://www.facebook.com/justlove1143/posts/1394900597306817" data-width="500" data-show-text="true"><blockquote cite="https://www.facebook.com/justlove1143/posts/1394900597306817" class="fb-xfbml-parse-ignore">Posted by <a href="https://www.facebook.com/justlove1143/">I love you very much</a> on&nbsp;<a href="https://www.facebook.com/justlove1143/posts/1394900597306817">Sunday, April 15, 2018</a></blockquote></div>
                </div>
        </div>
</div>
</body>
</html>

That ends this tutorial. Happy Coding :)

Add new comment

192 views