توضیحات و دانلود

وارد کردن عکسهای آلبوم فیس بوک به عنوان گالری عکس برای نمایش در ASP.Net
0 0
وارد کردن عکسهای آلبوم فیس بوک به عنوان گالری عکس برای نمایش در ASP.Net

با سلام در این مقاله با یک مثال توضیح خواهم داد که چگونه می توان از آلبوم های ایجاد شده توسط کاربر در فیس بوک با استفاده از ASP.Net و FaceBook API رایگان ، عکس ها را وارد کرد .
توجه :

شما می توانید  ASPSnippets.FaceBookAPI.dll را با کلیک روی لینک دانلود کنید.
فایل DLL را بارگیری کنید
دریافت برنامه FaceBook ایجاد کرده و شناسه 
شما نیاز به ایجاد یک برنامه و دریافت کلید API و رمز API دارید.
برنامه FaceBook و شناسه برنامه Facebook (AppId) و رمز Key را ایجاد کنید
کد HTML
کد HTML زیر شامل یک دکمه ASP.Net است که با استفاده از API Graph با کلیک بر روی آلبوم های FaceBook و تصاویر آنها ,  دریافت می شود.
لیست آلبوم ها با استفاده از کنترل Repeater  و تصاویر آنها با استفاده از کنترل DataList که در داخل 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>

فضاهای نام
باید نامهای زیر را وارد کنید.
C #

using ASPSnippets.FaceBookAPI;
using System.Web.Script.Serialization;

VB.Net

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

کلاس داده
برای نگه داشتن داده های برگشتی از FaceBook Graph API به ویژگی کلاس ها  نیاز است. نمودار API  FaceBook پاسخ را در قالب JSON برمی گرداند.
داده های JSON به صورت سریال در آمده و به کلاس های متعلق به زیر تبدیل می شوند.

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

گرفتن و وارد کردن تصاویر آلبوم کاربر از FaceBook
با کلیک بر روی دکمه ، ابتدا برنامه به کاربر اجازه دسترسی به آلبوم ها و تصاویر خود را می دهد. سپس ، همه آلبوم ها به همراه تصاویر مربوطه در صفحه بارگیری و نمایش داده می شوند.
با کلیک بر روی دکمه Fetch ، برنامه به کاربر اجازه دسترسی به آلبوم ها و تصاویر آنها را می دهد. پس از صدور مجوز ، پاسخ توسط FaceBook Graph API و آلبوم ها برمی گردد و تصاویر آنها نمایش داده می شود .
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

بزرگنمایی تصاویر کوچک هنگام کلیک با Lightbox effect با استفاده از jQuery
یک رویداد handler جی کوئری به کلیه عناصر تصویر HTML در Repeater اختصاص داده می شود. هنگامی که یک تصویر HTML کلیک می شود ، عنصر تصویر کلون شده و در سایز بزرگتر در داخل 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>

 


دانلود
  • لینک های دانلود دوره های آموزشی تا پایان دوره قابل دانلود می باشد.
  • برای خارج کردن فایل ها از حالت فشرده از ورژن جدید نرم افزار winrar استفاده کنید.
  • برای خارج کردن فایل ها از حالت فشرده لینک های دانلودی که چندین قسمت می باشند فقط قسمت اول را از حالت فشرده خارج کنید.
  • لطفا توضیحات نوشته شده برای مطالب را با دقت بخوانید.
  • برای نمایش فیلم ها می توانید از نرم افزار هایی مانند Km Player , VLC Player یا Media Player Classic استفاده کنید.

ارسال نظر
ارسال پیام به :