Post
Ask Question

Implement Facebook Follow Button in Web API Project

Introduction

This article explains how to add the Facebook Follow button to our web application. Here we use the Follow button in the web application that displays the number of followers on Facebook.

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/reference/plugins/follow/

    The page will looks like this:

    Follow button form

  3. Now fill in the Follow button form.

    fill the follow form
    • Profile URL: Provide the Profile URL of the following user.
    • Width: Set the width of the page in pixels.
    • Height: Set the height of the page in pixels.
    • Color Scheme: Set the color theme of the page. such as Light, Dark.
    • Layout Style: Sets the layout of the page.
      Box_Count: Displays the number of followers above the Follow button.
      Button_Count: It display the number of count right side of the Follow button.
      button: Displays only the Follow button, it does not display the number of followers.
      Standard: Displays the number of follower friends and an image at the right side of the Follow button and with the name.
      Show faces: If the check box is checked then it displays the followers image also, otherwise it shows the name and number of followers.
    • GetCode button: Generates the code depending on the follow detail. 
  4. Now for getting the code click on the "Get Code" button.

    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 the code:
      1. <html>    
      2.     <head>    
      3.         <title>    
      4.             Fcebook Follow button    
      5.         </title>    
      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-follow" data-href="http://www.facebook.com/zuck" data-width="30" data-height="20" data-colorscheme="dark" data-layout="standard" data-show-faces="false"></div>    
      17.     </body>  
  7. Now execute the application and see the output.

    Output


Similar Articles