In this article I am going to explain how to implement Like box plugin on your website.
The Like Box is a social plugin that enables Facebook Page owners to attract and gain Likes from their own website. The Like Box enables users to:
- See how many users already like this Page, and which of their friends like it too
- Read recent posts from the Page
- Like the Page with one click, without needing to visit the Page
You need to implement the Like box with below link: https://developers.facebook.com/docs/reference/plugins/like-box/ after clicking this link you will get below screen:
1. Click to Like Box menu to open form.
2. Facebook page URL: -Here type or paste the URL of the Facebook Page for this Like Box. href should be an absolute URL.
3. Width: - Here give the width of the plugin in pixels. Default width: 300px.
4. Height: -Here give the height of the plugin in pixels.
5. Show Faces: - Here specifies whether or not to display profile photos in the plugin.
6. Color Schemes: - Here give the color scheme for the plugin. It has two options: 'light'(default), 'dark'.
7. Stream: - It specifies whether to display a stream of the latest posts from the Page's wall.
8. Border Color: - Here give the border of plugin.
9. Header: - Here specifies whether to display the Facebook header at the top of the plugin (by default is checked).
10. Get Code: - At the last click on the Get Code button to get the script for the plugin.
After clicking the Get Code button below screen will be appear.
Copy the red bordered code and paste where which you want to show the Like Box plugin.
Code: -
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>Facebook Like Box</title>
<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/all.js#xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
} (document, 'script', 'facebook-jssdk'));</script>
</head>
<body>
<div class="fb-like-box" data-href="http://www.facebook.com/pages/MindStick-Software-Pvt-Ltd/111606255562715" data-width="292" data-height="600" data-show-faces="true" data-stream="true" data-border-color="#E99B15" data-header="true"></div>
</body>
</html>
Output: -
Leave Comment