Post
Ask Question

Add the Facebook Like Button in Web API Application

Introduction

This article explains how to use the Like button of Facebook in your Web API application. Here we just get the code from Facebook and add it into the View of the application. The Like Button simply shares the content with friends on Facebook.

Procedure for adding the Like Button to 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-button/

    The page will open like this:

    Like Button Page
  1. Now fill in the Like button form for displaying the Like button.

    Fill Like button Form
    • URL to like: Provide the URL for the default page.
    • Width: Set the width in pixels of plug-ins.
    • Layout: Has mainly the following three option

      Standard
      Button_count
      Box_count

    • Show Friend's faces: It just used for showing the friend's faces when selected for sending the message.
    • Include share button: If the checkbox is checked then include the share button.
    • Get code: when the "Get Code" button is clicked then it displays the code.
  1. Now for getting the code click on the "Get Code" button.

    Code Display
  1. 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 MVC4 application
    • From the "MVC4 Project" window select "Web API".

      Select Web API
    • Click on the "OK" button.
  1. 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. <!DOCTYPE html>  
  2. <html xmlns="http://www.w3.org/1999/xhtml">  
  3. <head>  
  4.     <title>Facebook Like Button</title>  
  5.     <div id="fb-root"></div>  
  6.     <script>(function (d, s, id) {  
  7.     var js, fjs = d.getElementsByTagName(s)[0];  
  8.     if (d.getElementById(id)) return;  
  9.     js = d.createElement(s); js.id = id;  
  10.     js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";  
  11.     fjs.parentNode.insertBefore(js, fjs);  
  12. }  
  13. (document, 'script', 'facebook-jssdk'));  
  14. </script>  
  15.     </head>  
  16.     <body>  
  17.         <div class="fb-like" data-href="https://www.c-sharpcorner.com" data-width="500" data-layout="standard" data-action="like" data-show-faces="true" data-share="true"></div>        
  18. </body>  
  19. </html> 

Now see the output:

Like comment

Send Message


Similar Articles