2013-10-02

jQuery 顯示 facebook 粉絲團照片

2045
0
2013-10-04

透過 facebook Graph API 可以取得/設定粉絲團的資訊，近日工作上遇到一個需求要在其他網站上顯示粉絲團相簿，使用 jQuery 解析 json 文檔後，呈現在網頁上。

透過 facebook Graph API 可以取得/設定粉絲團的資訊，官方 API 說明文件( https://developers.facebook.com/docs/reference/api/page/ )，寫得很詳細，看過卻不知如何下!! 筆者前後也瞄過好幾次，但總是不得其門而入。

近日工作上遇到一個需求要在其他網站上顯示粉絲團相簿。同事幫忙找到範例程式，以 jQuery 解析 json 文檔後，呈現在網頁上，對於 jQuery 與 facebook API 兩者均生疏，趁此機會一併熟悉。

原本範例程式(連結 jsfiddle) 並無太大問題，筆者稍加調整一些細節：

依上傳日期排序(descending)，
模彷 facebook 照片呈現的比例，
點擊照片回到 facebook

讓整個畫面看似將 facebook 相簿搬到自家網站上。

初使用 jQuery 學到

使用 append 或 apendTo

被加入的父層需要是有結尾的標籤如：<div id='photoAlbum'></div>，若是 <div id='photoAlbum' /> 則不會成功加入

使用 $.extend 加入非主程序的方法

新增標籤作法

這下段包括產生標籤、設定CSS、設定屬性等。


var $img = $('<div class="photoImage" />');
$img.css('background-image', 'url(' + imageObj.source + ')');

var $link = $('<a class="photoLink" target="_blank" />');
 $link.prop({
	href: pictureObject.link
}).append($img);
 var $divFrame = $('<div class="photoFrame"></div>').append($link);
$divFrame.appendTo('#photoAlbum');

demo site 線上展示

單一網頁

http://www.rotary-harvest.org.tw/FacebookPhotos.html?page=ginoy0907&num=24

目前僅可以從網址參數只能設定：紛絲團名稱，照片張數。
粉絲團名稱，可將其改為：nokia.taiwan , starbucks , parentingtw

以 iframe 整合至部落格中

參考以下置入的語法：


<div>
<h2>相片集錦</h2>
<iframe style="border: none; overflow: hidden; width: 630px; height: 2448px;" src="http://www.rotary-harvest.org.tw/FacebookPhotos.html?page=ginoy0907&amp;num=36" frameborder="0" scrolling="no"></iframe>
<p>&nbsp;</p>
<p>&nbsp;</p>
</div>

直接參觀 http://www.rotary-harvest.org.tw/page/活動集錦.aspx