Facebook Custom Login Button ASP.NET control has the same purpose as Facebook Login Button control, but while Facebook Login Button control has predefined appearance which is rendered on Facebook server, Custom Login Button control can be defined by developer. It has 4 different types: button, link, image, and auto open on page load. It is possible to set CSS style and CSS class. The control is available in C# and VB.NET programming languages, as part of Facebook ASP.NET (C# and VB.NET) Control library.

Usage Examples:

Following examples show usage of Facebook Login Button ASP.NET control in two ways: default one and the one with all optional properties, including email permission and event handler, being set. For second example, C# and VB.NET code is displayed for handling event handler when user is logged in Facebook. The code from event handler executes and creates Facebook object and gets user data with Graph API, using Facebook C# SDK.

Examples of ASPX files show only the code required for registration and integration of ASP.NET control in a web page. To see all requirements for registered components, including JavaScript, CSS style and header setting, please look at the manual for page requirements. For following examples, all page requirements are placed in ASP.NET master page. Important parts for registration and integration of Facebook Invite Friends control inside ASP.NET page are highlighted.

 <%@ Page Title="" MasterPageFile="~/Master.Master" AutoEventWireup="true" Inherits="FVK_Demo.CustomLoginButton" %>
 <%@ Register TagPrefix="fvk" TagName="loginbutton" Src="~/FVK/CustomLoginButton.ascx" %>
 <asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
     <title>Facebook Custom Login Button for ASP.NET</title>
     <meta name="description" content="ASP.NET custom login button control for Facebook Connect web sites." />
 </asp:Content>
 <asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
     <fvk:loginbutton ID="logginButton1" runat="server" />
 </asp:Content>

 <%@ Page Title="" MasterPageFile="~/Master.Master" AutoEventWireup="true" Inherits="FVK_Demo.CustomLoginButton" %>
 <%@ Register TagPrefix="fvk" TagName="loginbutton" Src="~/FVK/CustomLoginButton.ascx" %>
 <asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
     <title>Facebook Custom Login Button for ASP.NET</title>
     <meta name="description" content="ASP.NET custom login button control for Facebook Connect web sites." />
 </asp:Content>
 <asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
     <fvk:loginbutton ID="logginButton1" runat="server"
         CssClass="fvk_button"
         Title = "Connect with Facebook"
         Permissions="email"
         OnConnectCalled="OnConnected" 
     />
 </asp:Content>

Following code shows the code behind for second example above, in C# programming language. When user is logged in, OnConnected method is executed. The code inside the method is using Facebook C# SDK to get user id, name, and email with Graph API.

 using System;
 using System.Collections.Generic;
 using System.Linq;
 using System.Web;
 using System.Web.UI;
 using System.Web.UI.WebControls;
 using Facebook;
 using FVK;

 namespace FVK_Demo
 {
    public partial class LoginButton : System.Web.UI.Page
    {
       protected void Page_Load(object sender, EventArgs e)
       {
             
       }

       protected void OnConnected(object sender, EventArgs e)
       {
          try
          {
             // get user data
             string accessToken = FvkAuth.AccessToken;
             var facebook = new FacebookClient(accessToken);
             JsonObject user = (JsonObject)facebook.Get("me");
             String id = (string)user["id"];
             String name = (string)user["name"];
             String email = (string)user["email"];
          }
          catch (Exception)
          {
             // Session is invalid, handle error
          }
       }
    }
 }

Following code shows the code behind, which is the same as the code above, but in VB.NET programming language. When user is logged in, OnConnected method is executed. The code inside the method is using Facebook C# SDK to get user id, name, and email with Graph API.

 Imports System.Collections.Generic
 Imports System.Linq
 Imports System.Web
 Imports System.Web.UI
 Imports System.Web.UI.WebControls
 Imports Facebook
 Imports FVK

 Namespace FVK_Demo
    Public Partial Class LoginButton
       Inherits System.Web.UI.Page
       Protected Sub Page_Load(sender As Object, e As EventArgs) Handles Me.Load
 
       End Sub

       Protected Sub OnConnected(sender As Object, e As EventArgs)
          Try
             ' get user data
             Dim accessToken As String = FvkAuth.AccessToken
             Dim facebook = New FacebookClient(accessToken)
	     Dim user As JsonObject = DirectCast(facebook.Get("me"), JsonObject)
	     Dim id As [String] = DirectCast(user("id"), String)
	     Dim name As [String] = DirectCast(user("name"), String)
	     Dim email As [String] = DirectCast(user("email"), String)
          Catch generatedExceptionName As Exception
             ' Session is invalid, handle error
          End Try
       End Sub
    End Class
 End Namespace

Configuration

Configuration of the Facebook Custom Login Button ASP.NET control is done in ASPX page by setting optional properties and event handler. If dynamic setting of properties is required, they can be also set in the code behind, for example on Page_Load method. If event handler is used, there should be a method in the code behind to execute additional code after a user is logged in (connected with Facebook).

There is only one optional event handler which is executed when user is logged in. If user is previously logged in Facebook and Login Button is pressed, there will be no login dialog, i.e. login dialog is opened and closed immediately. In both cases, event handler is executed to execute additional code when a connection with the website and the Facebook is established.

Property Name

Type

Description

CommandType

String

Can be set on 'link', 'button', 'image', or 'auto_open'. This means request dialog is opened by pressing a link, button, image, or automatically on page load. Default value is 'button'.

Permissions

String

Comma separated list of Facebook extended permissions. Default value is empty string.

Enabled

Bool

If false, login button does not work, default = true.

Title

String

Text inside the login button. Default value is 'Login'.

CssClass

String

CSS class of the button.

CssStyle

String

CSS style of the button.

Image

String

Image of the button. CommandType is automatically set to image.

Event Name

Description

OnConnectCalled

Name of protected method that is implemented inside the code behind and which will be called after connection with the Facebook is established.