In this article I will explain with an example, how to fetch and import photos from Albums created by the user in FaceBook using ASP.Net and Free ASPSnippets FaceBook API.
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 Images using the Graph API.
The list of Albums are displayed using the Repeater control and their Images 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 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.
When the Fetch Button is clicked, the Application authorizes the User and requests for Permission to access the Albums and their pictures.
Once the permission is granted, the response is returned by the FaceBook Graph API and the Albums and their pictures 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
![Import Facebook Album Photos and display as Image Gallery in ASP.Net]()
Demo
Downloads
