Introduction

This article explains how to implement the Facebook Like Box in a web site. Here we create a Web API application. It enables the Like box that shows the people that like the page and also reads the current post on that page. Here we open the c-sharpcorner Facebook like box.

Procedure for displaying the Like box in an application:

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

    https://developers.facebook.com/docs/plugins/like-box-for-pages/

    The page will looks like this:
    Like Box Page
  3. Now fill in the Like Box form with some details:
    LikeBox Form
    • Facebook page URL: Here you type the page URL.
    • Width: Type the width of the page in pixels.
    • Height: Type the height of the page in pixels.
    • Show friend's faces: It displays the faces of friends that have liked this page, if the checkbox is checked.
    • Show Header: It displays the header of the Facebook if the checkbox is checked.
    • Show Footer: The Id shows the Facebook footer if the checkbox is checked.
    • Show Post: Show the Facebook post.
    • Get Code: Clicking this button will generate the code.
  4. Now for getting the code click on the "Get Code" button.
    Like Box Code
  5. Use the following procedure to create a sample of the 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 MVC4 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.
      Select View
      Paste in the following code:
      1. <html>
      2. <head>
      3. <title>Like Box of Face book</title>
      4. <div id="fb-root">
      5. </div>
      6. <div id="fb-root"></div>
      7. <script>(function (d, s, id) {
      8. var js, fjs = d.getElementsByTagName(s)[0];
      9. if (d.getElementById(id)) return;
      10. js = d.createElement(s); js.id = id;
      11. js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
      12. fjs.parentNode.insertBefore(js, fjs);
      13. }(document, 'script', 'facebook-jssdk'));</script>
      14. </head>
      15. <body>
      16. <div class="fb-like-box" data-href="https://www.facebook.com/pages/C-Corner/194086953935286" data-width="350" data-height="500" data-colorscheme="light" data-show-faces="true" data-header="true" data-stream="true" data-show-border="true"></div> </body>
      17. </html>
  7. Now execute the application and see the output.
    LikeBox of c-sharpcorner