Implement Facebook Comments, Likes, Shares In Your ASP.NET Website

Sourabh Somani
7y
156.3k
0
9

Article

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".

Step 4

After that you will see the following page: In this you need to provide the following things:

URL: Web page URL where you want to add a comment box.
Width: Comment Box Size (in pixels).
Number of Post: Provide here the number how many posts to be seen at a time on one page.
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.

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>
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.

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<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>
<form id="form1" runat="server">
<div>
<h1>Hello C-Sharp Corner</h1>
<div class="fb-comments" data-href="http://localhost:65338/default.aspx" data-numposts="5" data-colorscheme="light"></div>
</div>
</form>
</body>
</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.

URL
Width in Pixel
Layout: There are 4 types of like buttons available: Standard, box_count, button_count and button.
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:

<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>

(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:

<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:

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<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>
<form id="form1" runat="server">
<div>
<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>
<h1>Hello C-Sharp Corner</h1>
<div class="fb-comments" data-href="http://localhost:65338/default.aspx" data-numposts="5" data-colorscheme="light"></div>
</div>
</form>
</body>
</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:

URL
Width in Pixel
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:

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.)
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:

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<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>
<form id="form1" runat="server">
<div>
<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>
<div class="fb-share-button" data-href="http://localhost:65338/Default.aspx" data-type="button_count"></div>
<h1>Hello C-Sharp Corner</h1>
<div class="fb-comments" data-href="http://localhost:65338/default.aspx" data-numposts="5" data-colorscheme="light"></div>
</div>
</form>
</body>
</html>