無論個人或公司，可能有網站又有臉書專頁，若想要省去上傳兩次照片的作業，只上傳一次到臉書，就能同時也讓網頁顯示最新內容，瀏覽相簿，要如何做呢？
這是demo網頁，還有lightbox的切換效果。
我一開始先搜尋了這個：在WP網頁嵌入臉書的相簿（可在網頁上直接瀏覽臉書相片），介紹了其中一種外掛，之後還試了幾種WP外掛，如以下：
1. Facebook Feed WD: 可以抓動態貼文到網頁，但預設全類型，若要指定圖片或其他就要購買。如果專門用手機瀏覽還算方便。（我的自製theme點開lightbox會有錯誤）
2. WP Embed Facebook:
有縮圖，有lightbox，但是縮圖太小不能調整，蠻可惜，如果這外掛的規劃範圍不大可以考慮。
3. Custom Facebook Feed Pro
介面設計得不錯但客製化功能要用買的
4. Feed them social
跟3一樣，若要客製化layout或是點開相片的lightbox就要購買。純粹貼文的顯示在手機上瀏覽還不錯。
試完上面幾個外掛，我覺得若不付費用，功能都閹割得太多，很不理想。這些外掛主要是給無法自己開發或使用開源框架的人付費使用，我也希望能夠多有一點自己開發的自由。
一直尋找線上資源，最後找到這個網站 www.codeofaninja.com 有步驟教學，比較適合開發者。他們有賣外掛，但也有把code內容放上來做成教學，真是少見不藏私的風格。
follow完上面的教學，以下是我一步步coding到WP的步驟：
一、這是一段完整的內嵌php網頁code，用顏色區分要切給Wordpress的區塊
-----code-----
<!DOCTYPE html><html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<!-- blue imp gallery -->
<link rel="stylesheet" href="http://blueimp.github.io/Gallery/css/blueimp-gallery.min.css">
<link rel="stylesheet" href="Bootstrap-Image-Gallery-3.1.1/css/bootstrap-image-gallery.min.css">
<style>
.photo-thumb{
width:150px;
height:150px;
float:left;
border: thin solid #d1d1d1;
margin:0 1em 1em 0;
}
div#blueimp-gallery div.modal {
overflow: visible;
}
#wrapper {
text-align: center;
}
#gal-img {
display: inline-block;
}
</style>
</head>
<body>
<div class="container">
<?php
$access_token="你的FB access token";
$album_id="你的FB相簿id";
$json_link = "https://graph.facebook.com/v2.3/{$album_id}/photos?fields=source,images,name&access_token={$access_token}";
$json = file_get_contents($json_link);
$obj = json_decode($json, true, 512, JSON_BIGINT_AS_STRING);
$photo_count = count($obj['data']);
echo "<div id='wrapper'>";
for($x=0; $x<$photo_count; $x++){
$source = isset($obj['data'][$x]['images'][0]['source']) ? $obj['data'][$x]['images'][0]['source'] : ""; //hd image
$name = isset($obj['data'][$x]['name']) ? $obj['data'][$x]['name'] : "";
echo "<a id='gal-img' href='{$source}' data-gallery>";
echo "<div class='photo-thumb' style='background: url({$source}) 50% 50% no-repeat;background-size: cover; overflow:auto;'>";
echo "</div>";
echo "</a>";
}
echo "</div>";
?>
</div>
<!-- The Bootstrap Image Gallery lightbox, should be a child element of the document body -->
<div id="blueimp-gallery" class="blueimp-gallery">
<!-- The container for the modal slides -->
<div class="slides"></div>
<!-- Controls for the borderless lightbox -->
<h3 class="title"></h3>
<a class="prev">‹</a>
<a class="next">›</a>
<a class="close">×</a>
<a class="play-pause"></a>
<ol class="indicator"></ol>
<!-- The modal dialog, which will be used to wrap the lightbox content -->
<div class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" aria-hidden="true">×</button>
<h4 class="modal-title"></h4>
</div>
<div class="modal-body next"></div>
<div class="modal-footer">
<button type="button" class="btn btn-default pull-left prev">
<i class="glyphicon glyphicon-chevron-left"></i>
Previous
</button>
<button type="button" class="btn btn-primary next">
Next
<i class="glyphicon glyphicon-chevron-right"></i>
</button>
</div>
</div>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<script src="http://blueimp.github.io/Gallery/js/jquery.blueimp-gallery.min.js"></script>
<script src="Bootstrap-Image-Gallery-3.1.1/js/bootstrap-image-gallery.min.js"></script>
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
<!-- to make photos full view -->
<script>
$('#blueimp-gallery').data('useBootstrapModal', false);
$('#blueimp-gallery').toggleClass('blueimp-gallery-controls', true);
</script>
</body>
</html>
-----code ended-----
二、我們要把上面的code整理到Wordpress：
1. 上面header中紫色的css reference整併到WP theme的footer.php2. 上面footer中紫色的js reference整併到WP theme的footer.php
3. 上面橘色的css reference貼到WP theme裡面的.css檔
4. 上面所有紅色的php code部分用WP外掛"Insert PHP Code Snippet"做一個shortcut，記得放在一起，變數才讀得到。
（注意！<blueimp-gallery>這個放進外掛的html div要先轉成php code，不然網頁會失敗）：
------code------
$access_token="your access token";$json_link = "https://graph.facebook.com/v2.3/"your album id"/photos?fields=source,images,name&access_token={$access_token}";
$json = file_get_contents($json_link);
$obj = json_decode($json, true, 512, JSON_BIGINT_AS_STRING);
$photo_count = count($obj['data']);
echo "<div id='wrapper' style='margin-top:20px;'>";
for($x=0; $x<$photo_count; $x++){
$source = isset($obj['data'][$x]['images'][0]['source']) ? $obj['data'][$x]['images'][0]['source'] : ""; //hd image
$name = isset($obj['data'][$x]['name']) ? $obj['data'][$x]['name'] : "";
echo "<a id='vul-img' href='{$source}' data-gallery>";
echo "<div class='photo-thumb' style='background: url({$source}) 50% 50% no-repeat;background-size: cover; overflow:auto;'>";
echo "</div>";
echo "</a>";
}
echo "</div>";
echo "<div id=\"blueimp-gallery\" class=\"blueimp-gallery\">\n";
echo " <!-- The container for the modal slides -->\n";
echo " <div class=\"slides\"></div>\n";
echo " <!-- Controls for the borderless lightbox -->\n";
echo " <h3 class=\"title\"></h3>\n";
echo " <a class=\"prev\">‹</a>\n";
echo " <a class=\"next\">›</a>\n";
echo " <a class=\"close\">×</a>\n";
echo " <a class=\"play-pause\"></a>\n";
echo " <ol class=\"indicator\"></ol>\n";
echo " <!-- The modal dialog, which will be used to wrap the lightbox content -->\n";
echo " <div class=\"modal fade\">\n";
echo " <div class=\"modal-dialog\">\n";
echo " <div class=\"modal-content\">\n";
echo " <div class=\"modal-header\">\n";
echo " <button type=\"button\" class=\"close\" aria-hidden=\"true\">×</button>\n";
echo " <h4 class=\"modal-title\"></h4>\n";
echo " </div>\n";
echo " <div class=\"modal-body next\"></div>\n";
echo " <div class=\"modal-footer\">\n";
echo " <button type=\"button\" class=\"btn btn-default pull-left prev\">\n";
echo " <i class=\"glyphicon glyphicon-chevron-left\"></i>\n";
echo " Previous\n";
echo " </button>\n";
echo " <button type=\"button\" class=\"btn btn-primary next\">\n";
echo " Next\n";
echo " <i class=\"glyphicon glyphicon-chevron-right\"></i>\n";
echo " </button>\n";
echo " </div>\n";
echo " </div>\n";
echo " </div>\n";
echo " </div>\n";
echo "</div>\n";
echo "<script>";
echo "$('#blueimp-gallery').data('useBootstrapModal', false);";
echo "$('#blueimp-gallery').toggleClass('blueimp-gallery-controls', true);";
echo "</script>";
-----code ended-----
下一步，開新的page，
把上面背景黃色的code，就是以下這段貼上，就完成了！
-----code-----
<div class="container">[xyz-ips snippet="你取的外掛變數名稱"]
</div>
-----code ended-----
如果都跟著做完，看看效果吧 demo。
謝謝寫教學的codeofaninja.com，也希望你成功。
附註連結：
＊如何開啟一個臉書App，並且得到授權key，以用來來取得臉書資源到外部
＊如何取得臉書access id
＊如何取得臉書page id
2017.Aug
＊如何移除WP編輯內容時自動多出來的空白元素
沒有留言:
張貼留言