Embed Facebook Post on Any Html Page

- - posted in Technical | Tagged as Facebook | Comments

Facebook has released a new feature. It’s called “embedded posts”.
But officially, only Big Publishers can embed posts currently into their pages.

We can also, embed the Public FB posts with a small script and trick.

1.Go to any facebook post and hover over the date when post was created. Right-Click and copy the Link.
2.Replace the URL_HERE with the link you just copied.

Sample to embed FB post in HTML page index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<!DOCTYPE html>
<html xmlns:fb="http://ogp.me/ns/fb#" lang="en">
<head>
  <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
</head>
  <body>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=2.0, user-scalable=yes" />

      <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 = "http://connect.facebook.net/en_US/all.js#xfbml=1";
      fjs.parentNode.insertBefore(js, fjs);
      }(document, 'script', 'facebook-jssdk'));
      </script>
      
      <fb:post href="URl_HERE"></fb:post></p>
      <p style="text-align: justify;">
   </body>
</html>

Here is an example:


Enjoy and Embed your FB post where ever you like.

Courtesy: Amit Agarwal’s Video