Fetch and import FaceBook Friends and Contacts with profile pictures in ASP.Net

Abstract: Here Mudassar Ahmed Khan has explained how to fetch and import Facebook Friends and Contacts along with their profile pictures using FaceBook Graph API in ASP.Net using the Free ASPSnippets FaceBook API. 

In this article I will explain how to fetch and import FaceBook friends and contacts in ASP.Net using the Free ASPSnippets FaceBook API.

 

Create FaceBook Application and get App Id

You will need to create an application and get an API Key and API Secret.

 

HTML Markup

In the below HTML Markup I have placed an ASP.Net Button which will trigger the fetching process and an ASP.Net GridView control that will display the fetched friends and contacts along with picture.

<asp:Button ID="btnFetch" runat="server" Text="Fetch Friends" OnClick="btnFetch_Click" />

<br />

<asp:GridView ID="gvFriends" runat="server" AutoGenerateColumns="false">

    <Columns>

        <asp:ImageField DataImageUrlField="PictureUrl" HeaderText="Picture" />

        <asp:BoundField DataField="Name" HeaderText="Name" />

    </Columns>

</asp:GridView>

 

 

Namespaces

You will need to import the following Namespaces

C#

using ASPSnippets.FaceBookAPI;

using System.Collections.Generic;

using System.Web.Script.Serialization;

 

VB.Net

Imports ASPSnippets.FaceBookAPI

Imports System.Collections.Generic

Imports System.Web.Script.Serialization

 

 

Data Classes

You will need to create the following two classes which will be used to hold the friends and contacts returned from FaceBook.

C#

public class FaceBookData

{

    public List<FaceBookUser> Data { get; set; }

}

 

public class FaceBookUser

{

    public string Id { get; set; }

    public string Name { get; set; }

    public string PictureUrl { get; set; }

}

 

VB.Net

Public Class FaceBookData

    Private m_Data As List(Of FaceBookUser)

    Public Property Data() As List(Of FaceBookUser)

        Get

            Return m_Data

        End Get

        Set(value As List(Of FaceBookUser))

            m_Data = value

        End Set

    End Property

End Class

 

Public Class FaceBookUser

    Private m_Id As String

    Public Property Id() As String

        Get

            Return m_Id

        End Get

        Set(value As String)

            m_Id = value

        End Set

    End Property

    Private m_Name As String

    Public Property Name() As String

        Get

            Return m_Name

        End Get

        Set(value As String)

            m_Name = value

        End Set

    End Property

    Private m_PictureUrl As String

    Public Property PictureUrl() As String

        Get

            Return m_PictureUrl

        End Get

        Set(value As String)

            m_PictureUrl = value

        End Set

    End Property

End Class

 

 

Fetching FaceBook Friends and Contacts with Profile Pictures and displaying in GridView

On the Fetch button click we first need to authorize our application using FaceBook Graph API and get permission of the user. Once the application is authorized in the page load event based on the authorization code we fetch the FaceBook contacts and friends for the user and then display them in ASP.Net GridView along with their profile pictures.

C#

protected void Page_Load(object sender, EventArgs e)

{

    FaceBookConnect.API_Key = "<Your API Key>";

    FaceBookConnect.API_Secret = "<Your API Secret>";

    if (!IsPostBack)

    {

        string code = Request.QueryString["code"];

        if (!string.IsNullOrEmpty(code))

        {

            string data = FaceBookConnect.Fetch(code, "me/friends");

            FaceBookData facebookData = new JavaScriptSerializer().Deserialize<FaceBookData>(data);

            foreach (FaceBookUser user in facebookData.Data)

            {

                user.PictureUrl = string.Format("https://graph.facebook.com/{0}/picture", user.Id);

            }

            gvFriends.DataSource = facebookData.Data;

            gvFriends.DataBind();

        }

    }

}

protected void btnFetch_Click(object sender, EventArgs e)

{

    FaceBookConnect.Authorize("user_photos,friends_photos", Request.Url.AbsoluteUri);

}

 

VB.Net

Protected Sub Page_Load(sender As Object, e As EventArgs) Handles Me.Load

    FaceBookConnect.API_Key = "<Your API Key>"

    FaceBookConnect.API_Secret = "<Your API Secret>"

    If Not IsPostBack Then

        Dim code As String = Request.QueryString("code")

        If Not String.IsNullOrEmpty(code) Then

            Dim data As String = FaceBookConnect.Fetch(code, "me/friends")

            Dim facebookData As FaceBookData = New JavaScriptSerializer().Deserialize(Of FaceBookData)(data)

            For Each user As FaceBookUser In facebookData.Data

                user.PictureUrl = String.Format("https://graph.facebook.com/{0}/picture", user.Id)

            Next

            gvFriends.DataSource = facebookData.Data

            gvFriends.DataBind()

        End If

    End If

End Sub

Protected Sub btnFetch_Click(sender As Object, e As EventArgs)

    FaceBookConnect.Authorize("user_photos,friends_photos", Request.Url.AbsoluteUri)

End Sub

 

 

Demo

View Demo

 

Downloads

You can download the complete source code in VB.Net and C# along with the ASPSnippets.FaceBookAPI DLL using the download link provided below.

ImportContactsFaceBook.zip