How to embed Facebook page, like, share button, comment box etc to your website or blog?

Hi guys,
Today I am going to show you, how you can embed Facebook page, comments, posts, like button, group plugins, save button, share button and video player to your website of blog.

So, let us begin with embedding a Facebook page.To do so, you can use the code below:

<iframe src="https://www.facebook.com/plugins/page.php?href=https%3A%2F%2Fwww.facebook.com%2Fexample&tabs=timeline&width=340&height=130&small_header=false&adapt_container_width=true&hide_cover=false&show_facepile=true&appId" width="340" height="130" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowTransparency="true" allow="encrypted-media"></iframe>

Preview:

Here change the word example with your page ID and to choose the tabs you want to be shown, change the word timeline to the name of tab you want to be appeared. Leave it blank (&tabs&) if you do not want to show any tab.

To embed Facebook comments to your site, use this code-

Paste this code in the page 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_GB/sdk.js#xfbml=1&version=v3.0';
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

And then paste this wherever you want the comment box to appear-

<div class="fb-comments" data-href="YourWebpageURL" data-numposts="5"></div>

Enter your web page url where you want the plugin to appear on your web page.

Preview:

To embed Facebook like and share button to your website, use the following code-

<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_GB/sdk.js#xfbml=1&version=v3.0';
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

<div class="fb-like" data-href="https://developers.facebook.com/docs/plugins/" data-layout="standard" data-action="like" data-size="small" data-show-faces="true" data-share="true"></div>

Enter your page URL in data-href section, you can add your facebook page URL to get likes on your Facebook page.
In the action section you can change word 'like' to 'recommend'.
In the data-layout section you can change word 'standard' to 'box_count', 'button' and button_count' for different layouts.

Preview:

To embed Facebook posts to your website, use the following code-

<iframe src="https://www.facebook.com/plugins/post.php?href=https%3A%2F%2Fwww.facebook.com%2F20531316728%2Fposts%2F10154009990506729%2F&width=500&show_text=true&height=290&appId" width="500" height="290" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowTransparency="true" allow="encrypted-media"></iframe>

Here change the post URL, the URL has t be put in sections, as you would have seen above, exchange each '/' with '%2F' and ':' with '%3a' in the HTML code above.

Preview:

To embed Facebook Video player-

<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&height=280&appId" width="500" height="280" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowTransparency="true" allow="encrypted-media" allowFullScreen="true"></iframe>

Here again enter the Facebook URL by editing it the way shown above.

Preview:

To embed Facebook Save button-

<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_GB/sdk.js#xfbml=1&version=v3.0';
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

<div class="fb-save" data-uri="https://www.instagram.com/facebook/" data-size="large"></div>

Here enter the URL of your web page in the 'data-uri' section.

Preview:

Thanks for reading my article.
If you liked our blog please support us by following and sharing.
Thank You.

Search This Blog