Introduction
This article explains how to implement the Facebook comment API in to the Web site. We create a Web API application in which we implement the Comment Box in the application. Here we use the c-sharpcorner Facebook comment box.
Use the following procedure to create a sample of the Comment API.
- First we create a Facebook account, if you already have then login with your id.
- Now open this link:
http://developers.facebook.com/docs/reference/plugins/comments/
This page will be opened:
![Comment page]()
- Here you can see a form for the comments plugin settings. Fill in this form according to your needs.
![Comment Form]()
- URL to Comment on: Here provide the URL of site on which you want to comment.
- Color scheme: It simply specifies the color of the Comment plugin.
- Number of Post: It displays the number of posts.
- Width: Provide the plugin width in pixels.
- Get Code: When we click on the Get Code button it generates the code.
- Now we will get the code by clicking on the "Get Code" button.
![Code]()
- Now create the Web API application:
- Start Visual Studio 2012.
- From the Start window select "Installed" -> "Visual C#" -> "Web".
- Select "ASP.NET MVC4 Web Application" and click on the "OK" button.
![Select MVC Application]()
- From the MVC4 Project window select "Web API".
![Select Web API]()
- Click on the "OK" button.
- Now copy the code and paste it into the "index.cshtml" file:
- In the "Solution Explorer".
- Select the "Home Folder".
- Select the "Index.cshtml" file.
Paste in the following code:
<html>
<head>
<title>
Facebook Comment
</title>
</head>
<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>
<body>
<div class="fb-comments" data-href="http://www.c-sharpcorner.com" data-colorscheme="dark" data-numposts="5" data-width="300"></div>
</body>
</html>
- Now execute the application. The output will be as:
![Output]()