A-Fu Design

Facebook Album Browser 臉書公開相簿的瀏覽套件使用 jQuery

Facebook Album Browser 直接抓取臉書的資料，Reponsive jQuery 套件，用於瀏覽Facebook帳戶的公開相簿。套件可以用在一班電腦或者是手機平板裝置。這一個套件主要是用來嵌入在您的網站上訂製相簿列表，不用受到 Facebook 的外觀限制，也可以讓你使用點擊相簿或者相片的事件。

使用方法：
第一步 載入Facebook Album Browser 需要用到的 JavaScript 檔
<!-- 使用 Google AJAX API 取得 jQuery 框架 1.11.0 min 版本 -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<!-- 載入 Facebook Album Browser 的CSS 檔案 -->
<link rel="stylesheet" type="text/css" href="../src/jquery.fb.albumbrowser.css" />
<!-- 載入 Facebook Album Browser 的主程式碼 -->
<script type="text/javascript" src="../src/jquery.fb.albumbrowser.js"></script>


第二步 放置相簿的Div 區塊位置
<div class="fb-album-container"></div>



第三步 當網頁載入完成抓取相簿資料

<script type="text/javascript">
 $(document).ready(function() {
      $(".fb-album-container").FacebookAlbumBrowser({
        account: "natgeo",  // facebook 帳號ID
        skipAlbums: ["Profile Pictures", "Timeline Photos"],  // 需要跳過不顯示的相簿
        showAccountInfo: true,   // 是否顯示帳號資訊
        showImageCount: true,    // 是否顯示相片數量
        lightbox: true,          // 內頁是否使用 lightbox
        photosCheckbox: true,    // 允許多選的子項目
        photoChecked: function(photo) {
          //選取的相片項目
        },
        photoUnchecked: function(photo) {
          //沒有選取的相片項目
        },
        albumSelected: function(photo) {
          //相簿選擇的事件
        },
        photoSelected: function(photo) {
          //相片選擇的事件
        }
      });
    });
</script>

Facebook Album Browser with jQuery 相簿內容

作者網站：https://github.com/dejanstojanovic/Facebook-Album-Browser
檔案大小：16.3 KB
檔案下載：https://github.com/dejanstojanovic/Facebook-Album-Browser

粉絲專頁的社群套件

如果你有一個網站或者部落格，並且在 Facebook 擁有粉絲專頁，你想要讓你的網站或部落格中的使用者也能夠看到你在 Facebook 中的動態，或者是想要讓使用者能夠在你的網站中加入你的粉絲團，Facebook 有提供了這樣一個簡單的社群外掛套件，讓所有使用者都能夠簡單的把這一個工具加到你的網站或者部落格當中。