ASP.NET MVC Adding Facebook Like buttons and using the Graph API

Adding social features is a very important factor to every site owners to bring extra exposure of page content and visitor who interested the article or blogs you write. Social features also bring extra users if they shares or like the page to their Facebook, Twitter, Google+ or other social media button that their friends circle might interested on the topic they like or share and therefore more likely to interact the topic it convert a traffic on your website.

Disadvantage of social features it can caused delay on your website because extra scripts being loaded and executed on every web page. Although there are many social networks... Facebook is the largest and most important social media to add feature to our website.

How to integrate facebook in several ways:

  • Go to https://developers.facebook.com and register as a developer
  • Go to the Apps menu and create a new App
  • Enter a name and namespace for your App

You need to have a facebook application id before you could proceed with the javascript. So please log in to your facebook account and go to developer page. From the top menu click Apps > +Create New App like image below.

A dialog box will appear like below and you need to enter application name and namespace. After click continue just fill up the catcha for security check.

This is an optional step. The next screen you see will be this, and this is some information I’ve entered for this new apps id.

Now, Go to social plug in page and key in URL you like to share and width of the share button like script below.

Get the code and the javascript will look like this:
<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>

How to add Facebook script in MVC

In your solution explorer goto Shared folder open the file _layout.cshtml then insert the facebook javascript see below sample mark-up with bold italic:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    @RenderSection("metatags", required: false)
    @Scripts.Render("~/bundles/modernizr")
    <meta name="author" content="RCB">
    <!-- Bootstrap core CSS -->
    <link href="~/sb/vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <!-- Custom fonts for this template -->
    <link href="~/sb/vendor/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
    <!-- Plugin CSS -->
    <link href="~/sb/vendor/datatables/dataTables.bootstrap4.css" rel="stylesheet">
    <!-- Custom styles for this template -->
    <link href="~/sb/css/sb-admin.css" rel="stylesheet">
</head>
<body class="fixed-nav" id="page-top"> 
    <!-- Load Facebook SDK for JavaScript -->
    <div id="fb-root"></div>
  
    @Html.Action("Navbar", "Navbar", new { controller = ViewContext.RouteData.Values["Controller"].ToString(), action = ViewContext.RouteData.Values["Action"].ToString() })
    <div class="content-wrapper py-3">
    <div id="page-wrapper">
            @RenderBody()
    <hr />
    <footer>
        <div class="col-xl-12 col-sm-12 col-md-12">
        <p>© 2017 - Pinoy Web Application</p>
        </div>
    </footer>
    </div>
    </div>
    <!-- /#wrapper -->
    <!-- Scroll to Top Button -->
    <a class="scroll-to-top rounded" href="#page-top">
    <i class="fa fa-angle-up"></i>
    </a>
    <!-- Bootstrap core JavaScript -->
    <script src="~/sb/vendor/jquery/jquery.min.js"></script>
    <script src="~/sb/vendor/popper/popper.min.js"></script>
    <script src="~/sb/vendor/bootstrap/js/bootstrap.min.js"></script>
    <!-- Plugin JavaScript -->
    <script src="~/sb/vendor/jquery-easing/jquery.easing.min.js"></script>
    <script src="~/sb/vendor/chart.js/Chart.min.js"></script>
    <script src="~/sb/vendor/datatables/jquery.dataTables.js"></script>
    <script src="~/sb/vendor/datatables/dataTables.bootstrap4.js"></script>
    <!-- Custom scripts for this template -->
    <script src="~/sb/js/sb-admin.min.js"></script>
    @Scripts.Render("~/bundles/jquery")
    @RenderSection("scripts", required: false)
    <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>
</html>

How to use fb-like & fb-comments in every web page

Sample how to integrate fb-like and fb-comments to your web page in MVC View.

@{
    ViewBag.Title = "Attendance Daily Time Record (DTR) Real Time Monitoring";
    Layout = "~/Views/Shared/_Layout.cshtml";
}
@section metatags {
    <title>Attendance Daily Time Record (DTR) Real Time Monitoring</title>
    <meta name="description" content="Automated Employee attendance DTR is a computerized of gathering data coming from the device of DTR Finger Scanner application to record the time-in/time-out." />
    <meta property="og:url" content="http://www.pinoy-web-application.com/article/attendance-daily-time-record-dtr-real-time-monitoring/" />
    <meta property="og:type" content="other" />
    <meta property="og:title" content="Attendance Daily Time Record (DTR) Real Time Monitoring" />
    <meta property="og:description" content="Automated Employee attendance DTR is a computerized of gathering data coming from the device of DTR Finger Scanner application to record the time-in/time-out." />
    <meta property="og:image" content="http://www.pinoy-web-application.com/content/image/pinoy-web.png" />
    <meta property="og:site_name" content="Pinoy Web Application" />
}
<style>
    h1 {
        font-size: x-large;
    }
    h2 {
        font-size: large;
    }
    h3 {
        font-size: small;
    }
    p {
        text-align: justify;
    }
</style>
<div class="container-fluid">
    <div class="row">
        <div class="col-xl-12 col-sm-12">
            <div class="row">
                <div class="col-xl-8 col-sm-8">
                    <h1><i class="fa fa-tags"></i> <a href="/article/attendance-daily-time-record-dtr-real-time-monitoring/">ASP.NET MVC Adding Facebook Like buttons and using the Graph API</a></h1>
                    <p>
                        ....
                    </p>
                    <p>
                        ....
                    </p>
                </div>
                <div class="col-xl-4 col-sm-4">
		   <p> .... </p>
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-xl-12 col-sm-12">
            <div class="fb-like" data-send="true" data-width="100%" data-show-faces="false"></div>
            <div class="fb-comments" data-href="http://www.pinoy-web-application.com/article/attendance-daily-time-record-dtr-real-time-monitoring/" data-numposts="10" data-colorscheme="light" data-width="100%"></div>
        </div>
    </div>
</div>

Good Luck!!! (Happy Coding....)