In this article I am going to explain how to implement Like plugin on your website.
The Like button is a simple plugin that will let people quickly share content with their friends on Facebook.
You need to implement the Like button with below link: https://developers.facebook.com/docs/reference/plugins/like/ after clicking this link you will get below screen:
1. Click to Like menu to open form.
2. URL to Like: - The URL to Like XFBML, defaults to the current page.
3. Send Button (XFBML Only): - Include a send button (if checked on the checkbox). The send button is available only on sites that are the javascript SDK.
4. Layout Style: - It determines the size and amount of socials context next to the button, this drop down contain three options these are given below.
- Standard
- Button_count
- Bocount
5. Width: - Here give the width of the plugin in pixels.
6. Show Faces: - Show the profile picture, when two or more friend like.
7. Font: - Here give the font of the plugin.
8. Color Scheme: - Here give the color scheme of the plugin it have two options.
- Light
- Dark
9. Verb to display: - The verb of display in the button currently only 'Like' and 'recommend' are supported.
10. Get Code: - click on the Get Code button to get the script.
After clicking on the Get Code button you get below screen which is contain the script for 'Like' plugin.
Copy the red bordered code and paste where which you want to show the Like 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</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" data-href="https://www.mindstick.com" data-send="true" data-width="450"
data-show-faces="true" data-font="arial">
</div>
</body>
</html>
Output:-
Leave Comment