Post
Ask Question

Implement Facebook Comment API in Web API Website

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.

  1. First we create a Facebook account, if you already have then login with your id.
  2. Now open this link:

    http://developers.facebook.com/docs/reference/plugins/comments/

    This page will be opened:

    Comment page
  3. 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.
  4. Now we will get the code by clicking on the "Get Code" button.

    Code
  5. 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.
  6. 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:
      1. <html>  
      2.     <head>  
      3.         <title>  
      4.             Facebook Comment  
      5.         </title>  
      6.     </head>  
      7. <div id="fb-root"></div>  
      8. <script>(function (d, s, id) {  
      9.     var js, fjs = d.getElementsByTagName(s)[0];  
      10.     if (d.getElementById(id)) return;  
      11.     js = d.createElement(s); js.id = id;  
      12.     js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";  
      13.     fjs.parentNode.insertBefore(js, fjs);  
      14. }  
      15. (document, 'script', 'facebook-jssdk'));  
      16. </script>  
      17.     <body>  
      18.     <div class="fb-comments" data-href="http://www.c-sharpcorner.com" data-colorscheme="dark" data-numposts="5" data-width="300"></div>  
      19.         </body>  
      20. </html>  
  7. Now execute the application. The output will be as:

    Output


Similar Articles