In this article I will explain with an example, how to get all photos of Album using FaceBook Graph API and the Free ASPSnippets FaceBook API in ASP.Net using C# and VB.Net.
Note: You can download the latest ASPSnippets.FaceBookAPI.dll clicking the download link below.
          Download DLL file
 
 

Create FaceBook Application and get App Id
You will need to create an application and get an API Key and API Secret.
 
 
HTML Markup
The following HTML Markup consists of an ASP.Net Button which when clicked fetches the FaceBook Albums and their photos using the Graph API.
The list of Albums are displayed using the Repeater control and their photos are displayed using DataList control nested within the Repeater.
<asp:Button ID="btnFetch" runat="server" Text="Get FaceBook Pictures" OnClick="Fetch" />
<hr />
<asp:Repeater ID="rptFaceBookAlbums" runat="server">
    <ItemTemplate>
        <table>
            <tr>
                <th>
                    <%# Eval("Name") %>
                </th>
            </tr>
            <tr>
                <td>
                    <asp:DataList ID="dlFaceBookImages" runat="server" CellSpacing="2" RepeatColumns="2"
                        DataSource='<%# Eval("Images.Data") %>'>
                        <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>
                </td>
            </tr>
        </table>
    </ItemTemplate>
    <SeparatorTemplate>
        <br />
        <br />
    </SeparatorTemplate>
</asp:Repeater>
<div id="dialog" style="display: none">
</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
The following property classes will be required to hold the data returned from FaceBook Graph API. The FaceBook Graph API returns the response in JSON format.
The JSON data is de-serialized and converted into the following property classes.
C#
public class FaceBookAlbumData
{
    public List<FaceBookAlbum> Data { get; set; }
}
 
public class FaceBookAlbum
{
    public string Id { get; set; }
    public string Name { get; set; }
    public FaceBookImageData Images { get; set; }
}
 
public class FaceBookImageData
{
    public List<FaceBookImageInfo> Data { get; set; }
}
 
public class FaceBookImageInfo
{
    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; }
    public List<FaceBookImage> Images { get; set; }
}
 
public class FaceBookImage
{
    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)
End Class
 
Public Class FaceBookAlbum
    Public Property Id() As String
    Public Property Name() As String
    Public Property Images() As FaceBookImageData
End Class
 
Public Class FaceBookImageData
    Public Property Data() As List(Of FaceBookImageInfo)
End Class
 
Public Class FaceBookImageInfo
    Public Property Id() As String
    Public Property Picture() As String
    Public Property Source() As String
    Public Property Height() As Integer
    Public Property Width() As Integer
    Public Property Images() As List(Of FaceBookImage)
End Class
 
Public Class FaceBookImage
    Public Property Picture() As String
    Public Property Source() As String
    Public Property Height() As Integer
    Public Property 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 photos. Once the user has granted the permission, all the Albums are fetched and displayed on the page along with their respective pictures and photos.
When the Fetch Button is clicked, the Application authorizes the User and requests for Permission to access the Albums and their photos.
Once the permission is granted, the response is returned by the FaceBook Graph API and the Albums and their photos are displayed.
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?fields=images");
                album.Images = new JavaScriptSerializer().Deserialize<FaceBookImageData>(data);
                foreach (FaceBookImageInfo image in album.Images.Data)
                {
                    if (image.Images.Count > 0)
                    {
                        image.Source = image.Images.First().Source;
                        image.Width = image.Images.First().Width;
                        image.Height = image.Images.First().Height;
                        image.Picture = image.Images.Last().Source;
                    }
                }
                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?fields=images")
                album.Images = New JavaScriptSerializer().Deserialize(Of FaceBookImageData)(data)
                For Each image As FaceBookImageInfo In album.Images.Data
                    If (image.Images.Count > 0) Then
                        image.Source = image.Images.First.Source
                        image.Width = image.Images.First.Width
                        image.Height = image.Images.First.Height
                       image.Picture = image.Images.Last.Source
                    End If
                Next
                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
A jQuery click event handler is assigned to all the HTML Image elements within the Repeater. When an HTML Image element is clicked, the Image element is cloned and displayed in larger size within a jQuery UI Model Popup.
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.24/themes/start/jquery-ui.css" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.24/jquery-ui.min.js"></script>
<script type="text/javascript">
    $(function () {
        $("#dialog").dialog({
            autoOpen: false,
            modal: true,
            height: 600,
            width: 600,
            title: "Zoomed Image"
        });
        $("[id*=rptFaceBookAlbums] img").click(function () {
            $('#dialog').html('');
            var img = $(this).parent().find("[id*=imgLarge]").clone();
            img.removeAttr("style");
            img.show();
            $('#dialog').append(img);
            $('#dialog').dialog('open');
        });
    });
</script>
 
 
Screenshot
Get all Photos of Album using FaceBook Graph API in ASP.Net
 
 
Demo
 
 
Downloads