In this article I will explain how to fetch and import photos from Albums created by the user in FaceBook using ASP.Net and Free ASPSnippets FaceBook API.
Get Photo Albums from Facebook using Graph API in ASP.Net
 
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 an ASP.Net Button which triggers the FaceBook Album Images fetching process. The fetched Albums are bound to ASP.Net Repeater control which has a ASP.Net DataList Control to display the images for each album.
<asp:Button ID="btnFetch" runat="server" Text="Get FaceBook Pictures" OnClick="Fetch" />
<hr />
<asp:Repeater ID="rptFaceBookAlbums" runat="server">
    <ItemTemplate>
        <div class="header"><%# Eval("Name") %>/div>
        <div class="pics">
            <asp:DataList ID="dlFaceBookImages" runat="server" CellSpacing ="2" RepeatColumns="4" DataSource='<%# Eval("Images") %>'>
                <ItemTemplate>
                    <asp:Image CssClass="small" runat="server" ImageUrl='<%# Eval("Picture") %>' Style="cursor: pointer" />
                    <asp:Image ID="imgLarge" runat="server" ImageUrl='<%# Eval("Source") %>' Style="display: none"
                        Width='<%# System.Web.UI.WebControls.Unit.Parse(Eval("Width").ToString()) %>'
                        Height='<%# System.Web.UI.WebControls.Unit.Parse(Eval("Height").ToString()) %>' />
                </ItemTemplate>
            </asp:DataList>
        </div>
    </ItemTemplate>
    <SeparatorTemplate>
    <br /><br />
    </SeparatorTemplate>
</asp:Repeater>
<div id="modalDiv">
    <div align="right"><a href="javascript:;">[x]</a></div>
    <div class="image"><img alt="" src="" /></div>
</div>
<div id="modalBackground"></div>
 
 
Namespaces
You will need to import the following Namespaces
C#
using ASPSnippets.FaceBookAPI;
using System.Web.Script.Serialization;
 
VB.Net
Imports ASPSnippets.FaceBookAPI
Imports System.Web.Script.Serialization
 
 
Data Class
You will need to create the following class which will be used to hold the FaceBook Albums and the respective Album images returned from FaceBook after authentication.
C#
public class FaceBookAlbumData
{
    public List<FaceBookAlbum> Data { get; set; }
}
 
public class FaceBookAlbum
{
    public string Id { get; set; }
    public string Name { get; set; }
    public List<FaceBookImage> Images { get; set; }
}
 
public class FaceBookImageData
{
    public List<FaceBookImage> Data { get; set; }
}
 
public class FaceBookImage
{
    public string Id { get; set; }
    public string Picture { get; set; }
    public string Source { get; set; }
    public int Height { get; set; }
    public int Width { get; set; }
}
 
VB.Net
Public Class FaceBookAlbumData
    Public Property Data() As List(Of FaceBookAlbum)
        Get
            Return m_Data
        End Get
        Set(value As List(Of FaceBookAlbum))
            m_Data = value
        End Set
    End Property
    Private m_Data As List(Of FaceBookAlbum)
End Class
 
Public Class FaceBookAlbum
    Public Property Id() As String
        Get
            Return m_Id
        End Get
        Set(value As String)
            m_Id = Value
        End Set
    End Property
    Private m_Id 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_Name As String
    Public Property Images() As List(Of FaceBookImage)
        Get
            Return m_Images
        End Get
        Set(value As List(Of FaceBookImage))
            m_Images = Value
        End Set
    End Property
    Private m_Images As List(Of FaceBookImage)span>
End Class
 
Public Class FaceBookImageData
    Public Property Data() As List(Of FaceBookImage)
        Get
            Return m_Data
        End Get
        Set(value As List(Of FaceBookImage))
            m_Data = value
        End Set
    End Property
    Private m_Data As List(Of FaceBookImage)
End Class
 
Public Class FaceBookImage
    Public Property Id() As String
        Get
            Return m_Id
        End Get
        Set(value As String)
            m_Id = value
        End Set
    End Property
    Private m_Id As String
    Public Property Picture() As String
        Get
            Return m_Picture
        End Get
        Set(value As String)
            m_Picture = value
        End Set
    End Property
    Private m_Picture As String
    Public Property Source() As String
        Get
            Return m_Source
        End Get
        Set(value As String)
            m_Source = value
        End Set
    End Property
    Private m_Source As String
    Public Property Height() As Integer
        Get
            Return m_Height
        End Get
        Set(value As Integer)
            m_Height = value
        End Set
    End Property
    Private m_Height As Integer
    Public Property Width() As Integer
        Get
            Return m_Width
        End Get
        Set(value As Integer)
            m_Width = value
        End Set
    End Property
    Private m_Width As Integer
End Class
 
 
Fetching and importing the User Album Pictures from FaceBook
On the click of the button, first the application authorizes the user and asks for permission to access its Albums and pictures. Once the user has granted the permission, all the Albums are fetched and displayed on the page along with their respective pictures and images.
C#
protected void Page_Load(object sender, EventArgs e)
{
    FaceBookConnect.API_Key = "<FaceBook API Key>";
    FaceBookConnect.API_Secret = "<FaceBook API Secret>";
    if (!IsPostBack)
    {
        string code = Request.QueryString["code"];
        if (!string.IsNullOrEmpty(code))
        {
            string data = FaceBookConnect.Fetch(code, "me/albums");
            FaceBookAlbumData faceBookAlbumData = new JavaScriptSerializer().Deserialize<FaceBookAlbumData>(data);
            List<FaceBookAlbum> albums = new List<FaceBookAlbum>();
            foreach (FaceBookAlbum album in faceBookAlbumData.Data)
            {
                data = FaceBookConnect.Fetch(code, album.Id + "/photos");
                album.Images = new JavaScriptSerializer().Deserialize<FaceBookImageData>(data).Data;
                albums.Add(album);
            }
            rptFaceBookAlbums.DataSource = albums;
            rptFaceBookAlbums.DataBind();
        }
    }
}
 
protected void Fetch(object sender, EventArgs e)
{
    FaceBookConnect.Authorize("user_photos", Request.Url.AbsoluteUri.Split('?')[0]);
}
 
VB.Net
Protected Sub Page_Load(sender As Object, e As EventArgs) Handles Me.Load
    FaceBookConnect.API_Key = "<FaceBook API Key>"
    FaceBookConnect.API_Secret = "<FaceBook 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/albums")
            Dim faceBookAlbumData As FaceBookAlbumData = New JavaScriptSerializer().Deserialize(Of FaceBookAlbumData)(data)
            Dim albums As New List(Of FaceBookAlbum)()
            For Each album As FaceBookAlbum In faceBookAlbumData.Data
                data = FaceBookConnect.Fetch(code, album.Id + "/photos")
                album.Images = New JavaScriptSerializer().Deserialize(Of FaceBookImageData)(data).Data
                albums.Add(album)
            Next
            rptFaceBookAlbums.DataSource = albums
            rptFaceBookAlbums.DataBind()
        End If
    End If
End Sub
 
Protected Sub Fetch(sender As Object, e As EventArgs)
    FaceBookConnect.Authorize("user_photos", Request.Url.AbsoluteUri.Split("?"c)(0))
End Sub
 
 
Enlarge Thumbnails when clicked with Lightbox effect using jQuery
For each Album picture FaceBook provides a smaller and an original version of the image. The smaller version of the image is displayed in DataList, while the smaller one is hidden.
When the smaller image is clicked opens a Modal Popup with Lightbox effect using jQuery. The modal popup contains the larger version of the image
<style type="text/css">
    body{font-family: Arial;font-size: 10pt;}
    #modalBackground{position: fixed;width: 100%;height: 100%;background-color: #000000;filter: alpha(opacity=60);opacity: 0.6;-moz-opacity: 0.6;z-index: 100;text-align: center;vertical-align: middle;left: 0;top: 0;display: none;}
    #modalDiv{position: fixed;z-index: 200;display: none;background-color: White;border: 1px splid black;}
    #modalDiv .image{max-height: 500px;}
    .header{ background-color: #3AC0F2;color: white;font-size:11pt;font-weight:bold;text-align: center;width: 422px;line-height:200%}
    .pics{width: 420px;border:1px solid #3AC0F2;background-color:#A1DCF2;}
    .pics .small{height: 100px;width: 100px;}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
    $(".small").live("click", function () {
        var img = $(this).next();
        $("#modalDiv img").css({ height: img.height(), width: img.width() });
        $("#modalDiv img").attr("src", img.attr("src"));
        $("#modalBackground").show();
        $("#modalDiv").show();
        var top = Math.max($(window).height() / 2 - $("#modalDiv")[0].offsetHeight / 2, 0);
        var left = Math.max($(window).width() / 2 - $("#modalDiv")[0].offsetWidth / 2, 0);
        $("#modalDiv").css('top', top + "px");
        $("#modalDiv").css('left', left + "px");
    });
    $("#modalDiv a").live("click", function () {
        $("#modalBackground").hide();
        $("#modalDiv").hide();
    });
</script>
 
 
Demo
 
Downloads