[ASP.NET] Get all photos of Album using FaceBook Graph API

Chào mọi người, chúc mọi người những ngày cuối năm hạnh phúc và cùng gia đình soạn sửa đón một cái tết vui vẻ nhé.

Bài viết này mình sẽ hướng dẫn mọi người viết chương trình DOWNLOAD toàn bộ hình ảnh trên trang FANPAGE FACEBOOK một cách nhanh nhất mà không phải mất công tải từng hình ảnh nữa nhé.
Chúng ta bắt đầu với thủ thuật trên.

Bước 1. Các bạn Imports những dữ kiện sau vào chương trình.

Imports ASPSnippets.FaceBookAPI
Imports System.Web.Script.Serialization

Bước 2. Viết hàm FaceBook Graph API

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

Bước 3. Hàm tải ảnh từ album về máy tính.

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

Như vậy đã hoàn thành, tiện ích trên và tiếp đó bạn muốn chỉnh sữa giao diện cho phù hợp với bản thân mình.

Trình xử lý sự kiện nhấp jQuery được gán cho tất cả các phần tử HTML Image in Repeater. Khi một phần tử HTML Image được nhấp, phần tử Image sẽ được sao chép và hiển thị ở kích thước lớn hơn trong 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>

Chúc mọi người thành công với thủ thuật trên.