Introduction

This article explains how to implement Facebook likes, shares and comment boxex for your ASP.NET website. Let's start step-by-step to implement Facebook likes, shares and comment boxex for your ASP.NET website.

Step 1

First open https://developers.facebook.com/

Step 2

Now click on the Docs Tab.

ASP.NET

Step 3

In the left menu click on "Product Docs" > "Sharing" > "Social Plugins" > "Comments".

ASP.NET

Step 4

After that you will see the following page: In this you need to provide the following things:
  1. URL: Web page URL where you want to add a comment box.
  2. Width: Comment Box Size (in pixels).
  3. Number of Post: Provide here the number how many posts to be seen at a time on one page.
  4. Color Scheme: Which color's comment box you want if your website is dark then use dark otherwise black.

Step 5

Click on the Get Code button, and you will see the following code generated.
  1. From which you need to place the first (Java-Script) code just after the body tag. The code is as follows:
    1. <div id="fb-root"></div>
    2. <script>(function(d, s, id) {
    3. var js, fjs = d.getElementsByTagName(s)[0];
    4. if (d.getElementById(id)) return;
    5. js = d.createElement(s); js.id = id;
    6. js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
    7. fjs.parentNode.insertBefore(js, fjs);
    8. }(document, 'script', 'facebook-jssdk'));</script>
  2. In the second code you need to specify where you want to show your Comments Box.
    1. <div class="fb-comments" data-href="http://localhost:65338/default.aspx" data-numposts="5" data-colorscheme="light"></div>
Step 6

Create a new project or application of ASP.NET in Visual Studio.

Step 7

Add a new WebForm and like Default.aspx and write the following code like this in the body.
  1. <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
  3. <!DOCTYPE html>
  5. <html xmlns="http://www.w3.org/1999/xhtml">
  6. <head runat="server">
  7. <title></title>
  8. </head>
  9. <body>
  10. <!--#############################-->
  11. <!-- Facebook generated Java Script Code-->
  12. <script>(function (d, s, id) {
  13. var js, fjs = d.getElementsByTagName(s)[0];
  14. if (d.getElementById(id)) return;
  15. js = d.createElement(s); js.id = id;
  16. js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
  17. fjs.parentNode.insertBefore(js, fjs);
  18. }(document, 'script', 'facebook-jssdk'));</script>
  19. <!--End Facebook JS-->
  20. <!--#############################-->
  21. <form id="form1" runat="server">
  22. <div>
  23. <h1>Hello C-Sharp Corner</h1>
  25. <!--#############################-->
  26. <!--Comment Box Code Goes Here-->
  27. <div class="fb-comments" data-href="http://localhost:65338/default.aspx" data-numposts="5" data-colorscheme="light"></div>
  28. <!--#############################-->
  29. </div>
  30. </form>
  31. </body>
  32. </html>

Step 8

Now build the project and run it. You will see output like this:

project
Note

If you want to do the same thing on different pages dynamically then modify the "data-href attribute" in the comments box code as in the following:

Step 9

For the like button at the https://developers.facebook.com/

Step 10

Go to Docs and click on "Sharing" > "Social Plugins" then click the "Like Button" Tab.



Step 11

You will then see a page in which you need to apply the following property for.
  1. URL
  2. Width in Pixel
  3. Layout: There are 4 types of like buttons available: Standard, box_count, button_count and button.
  4. Action Type: For the select button you need to select like.

Step 12

Then after clicking on Get Code, you will get the following code in which the first code, the JavaScript code, will be similar to that we saw for the comment box so don't copy that and copy the like button code and put it inside where you want to show the like button. The code will be like the following,

  • From which you need to place the first (JavaScript) code just after the body tag. The code is as in the following:
    1. <div id="fb-root"></div>
    2. <script>(function(d, s, id) {
    3. var js, fjs = d.getElementsByTagName(s)[0];
    4. if (d.getElementById(id)) return;
    5. js = d.createElement(s); js.id = id;
    6. js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
    7. fjs.parentNode.insertBefore(js, fjs);
    8. }(document, 'script', 'facebook-jssdk'));</script>
    (Note: If you have already provided it for the comments box then don't do that again, because the code is same.)

  • The second code you need to provide determines where you want to show your Like Button:
    1. <div class="fb-like" data-href="http://localhost:65338/Default.aspx" data-layout="box_count" data-action="like" data-show-faces="true" data-share="true"></div>
    • Suppose you have the same page default.aspx, then you can write inside it such as in the following:
    1. <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
    3. <!DOCTYPE html>
    5. <html xmlns="http://www.w3.org/1999/xhtml">
    6. <head runat="server">
    7. <title></title>
    8. </head>
    9. <body>
    10. <!--#############################-->
    11. <!-- Facebook generated Java Script Code-->
    12. <script>(function (d, s, id) {
    13. var js, fjs = d.getElementsByTagName(s)[0];
    14. if (d.getElementById(id)) return;
    15. js = d.createElement(s); js.id = id;
    16. js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
    17. fjs.parentNode.insertBefore(js, fjs);
    18. }(document, 'script', 'facebook-jssdk'));</script>
    19. <!--End Facebook JS-->
    20. <!--#############################-->
    22. <form id="form1" runat="server">
    23. <div>
    25. <!--#############################-->
    26. <!--Like Button Code-->
    27. <div class="fb-like" data-href="http://localhost:65338/Default.aspx" data-layout="standard" data-action="like" data-show-faces="true" data-share="true"></div>
    28. <!--#############################-->
    30. <h1>Hello C-Sharp Corner</h1>
    32. <!--#############################-->
    33. <!--Comment Box Code-->
    34. <div class="fb-comments" data-href="http://localhost:65338/default.aspx" data-numposts="5" data-colorscheme="light"></div>
    35. <!--#############################-->
    36. </div>
    37. </form>
    38. </body>
    39. </html>
    Step 13

    Output of the code above will be:


    Note

    If you want to do same thing on multiple pages dynamically then modify the "data-href attribute" of the like button division.
    Step 14

    For Share button at the https://developers.facebook.com/

    Step 15

    Go to Docs, and click on "Sharing" > "Social Plugins" then click on the "Share Button" Tab.

    Step 16

    You will then see a page in which you need to apply the following property for:
    1. URL
    2. Width in Pixel
    3. Layout: There are 6 types of share button is available: button_count, box_count, button, icon_link, icon, link.

    Step 17

    Then click on "Get Code," you will get the following code in which the first code is JavaScript code that will be similar to what we saw for the comments box and the like button so don't copy that, copy the like button code and put it inside there where you want to show the like button, the code will be as in the following:
    1. From which you need to place First (Java-Script) code just after body tag. The code is as in the following:
      1. <div id="fb-root"></div>
      2. <script>(function(d, s, id) {
      3. var js, fjs = d.getElementsByTagName(s)[0];
      4. if (d.getElementById(id)) return;
      5. js = d.createElement(s); js.id = id;
      6. js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
      7. fjs.parentNode.insertBefore(js, fjs);
      8. }(document, 'script', 'facebook-jssdk'));</script>
      (Note: If you have already provided a comments box or like then don't do this again, because the code is the same.)

    2. The second code you need to provide there determines where you want to show your Share Button:
      1. <div class="fb-share-button" data-href="http://localhost:65338/Default.aspx" data-type="button_count"></div>
    Suppose you have the same page default.aspx, then you can write inside it such as in the following:
    1. <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
    3. <!DOCTYPE html>
    5. <html xmlns="http://www.w3.org/1999/xhtml">
    6. <head runat="server">
    7. <title></title>
    8. </head>
    9. <body>
    10. <!--#############################-->
    11. <!-- Facebook generated Java Script Code-->
    12. <script>(function (d, s, id) {
    13. var js, fjs = d.getElementsByTagName(s)[0];
    14. if (d.getElementById(id)) return;
    15. js = d.createElement(s); js.id = id;
    16. js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
    17. fjs.parentNode.insertBefore(js, fjs);
    18. }(document, 'script', 'facebook-jssdk'));</script>
    19. <!--End Facebook JS-->
    20. <!--#############################-->
    22. <form id="form1" runat="server">
    23. <div>
    25. <!--#############################-->
    26. <!--Like Button Code-->
    27. <div class="fb-like" data-href="http://localhost:65338/Default.aspx" data-layout="standard" data-action="like" data-show-faces="true" data-share="true"></div>
    28. <!--#############################-->
    30. <!--#############################-->
    31. <!--Share Button Code-->
    32. <div class="fb-share-button" data-href="http://localhost:65338/Default.aspx" data-type="button_count"></div>
    33. <!--#############################-->
    35. <h1>Hello C-Sharp Corner</h1>
    37. <!--#############################-->
    38. <!--Comment Box Code-->
    39. <div class="fb-comments" data-href="http://localhost:65338/default.aspx" data-numposts="5" data-colorscheme="light"></div>
    40. <!--#############################-->
    41. </div>
    42. </form>
    43. </body>
    44. </html>
    Step 18

    The output of the code above will be: