使用AJAX+PHP+JS取得facebook影片縮圖的方法(非常麻煩)-教學撰寫:徐嘉裕Neil hsu

最近在開發影片模組需要能夠崁入facebook影片，這部分技術上倒不是很困難，但遇到一個非常棘手的問題，就是facebook影片沒有提供縮圖網址服務，不像youtube那麼善心有專門的影片縮圖網址輸入帶入影片ID就能取用，如果首頁同時也多個FB影片要展示然後直接用影片播放器那網站就會整個死當在那裡，需要大量讀取頻寬會被消耗殆盡，所以必須去取得facebook影片縮圖才行。

首先facebook影片並不是沒有縮圖，如果吧影片崁入播放還沒play之前預設其實就是代表圖，像是下圖紅框的就是代表圖。

但縮圖是包在整個html5播放器裡面的(在iframe的src裡面)，沒有參數可以拿，網址也是獨立的，要拿縮圖真的非常的困難，但天下沒有解決不了的事情，花了些時間還是找到取得縮圖的方法。

試過無效的方法

1、如果想用js直接解析iframe的src提取圖檔連結是不可能的，因為js不允許跨域取得子框架參數。
2、如果用php的file_get_contents開啟iframe中頁面也是不可能的，FB禁止檔案被外部讀取。

唯一能用的只有curl_init讀取FB檔案，而且還必須偽裝成是Google Bot爬蟲才行!


整個取得facebook影片縮圖的方法如下，因為非常的麻煩，如果沒耐心的建議可以跳過了。


1、HTML結構

需要有一個文字框可以輸入FB影片網址

<form  id='preventDefault'  class="form-horizontal" role="form" action='<{$xoops_url}>/modules/模組ID/videocenter.php' method='post' >


<input type='text' id='url' class=' form-control' name='url'  value='' placeholder='輸入影片連結'>

<input type='hidden' name='tmburl' value=''> 
//這裡是接收AJAX解析出FB縮圖網址後要存進資料庫的src值

 <button   type='submit'  class='btn btn-primary btn-lg btn-block buttonbox'> 送出表單</button>

</form>
<script src="<{$xoops_url}>/modules/模組ID/js/fbhumbnail.js"></script> //一定要引入

大概像是下面這樣

2、JS結構

建立一支JS檔fbhumbnail.js丟到模組JS資料夾中(HTML結構中藍字部分)，貼上以下內容。


//fb縮圖產生器

$(document).ready(function() {

$("body").on("click", ".buttonbox", function (e){
//鎖住外連設定
cancelHandler();

//取得影片網址
var $url= $('#url').val();
Mthumbnails($var=thumbnail($url));

//解開外連
$('#preventDefault').submit();
});


function Mthumbnails($var) {

//取得AJAX回傳FB頁面中.img的src值
var $fbimg=$($var).find('.img').attr("src");

//輸出到頁面
$('input[name=tmburl]').val($fbimg)

}

//ajax執行區
function thumbnail($url){
var result = false;
$.ajax({
url: xoopsjsurl + '/modules/模組ID/ajax.php',
type: 'POST',
data: { id: 1,
var1: $url
},
async : false,
success: function(response) {
result = response;
},
error: function() {
console.log('ajax error!');
}
})
return result;
}


//鎖住外連設定
function cancelHandler(event) {
var event = event || window.event;//兼容IE
//取消事件相關的預設行為
if (event.preventDefault) //標準技術
event.preventDefault();
if (event.returnValue) //兼容IE9之前的IE
event.returnValue = false;
return false; //用於處理使用對象屬性註冊的處理程序
}
});


3、ajax.php結構

$id=(empty($_REQUEST['id']))?"":$_REQUEST['id'];
$var1=(empty($_REQUEST['var1']))?"":$_REQUEST['var1'];

if($id=='1'){

$ch = curl_init();
curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
curl_setopt($ch, CURLOPT_URL, "https://www.facebook.com/plugins/video.php?href=".$var1"");
curl_setopt($ch, CURLOPT_HEADER, false);
curl_setopt($ch, CURLOPT_HTTPHEADER, array ('X-Forwarded-For: '.mt_rand(0, 255).'.'.mt_rand(0, 255).'.'.mt_rand(0, 255).'.'.mt_rand(0, 255),));
curl_setopt($ch, CURLOPT_USERAGENT, "Google Bot");
curl_setopt($ch, CURLOPT_FOLLOWLOCATION, true);
$fbhtml = curl_exec($ch);
curl_close($ch);

echo $fbhtml;
}


這樣就OK了阿，基本原理就是用PHP的curl_init爬FB影片播放器頁面，然後用AJAX吧爬出來的HTML結構回傳到JS，再用JS解析出class='img'的src值，最後在吧src值放到html結構中隨表單一起存入資料庫，這樣前台的影片區塊直接讀取資料庫儲存的fb影片縮圖src就能顯示縮圖了，來看一下結果。

fb縮圖都有取到值而且正常顯示，這樣功能就完成了!


幾個部分需要注意

1、解析出來的FB縮圖網址一定要存入資料庫，不要偷懶，如果不存資料庫而直接把解析src輸出顯示內容，假設首頁有10個FB影片那PHP就要去爬FB網址10次，很快你的網站IP就會被FB封鎖，而且這更消耗系統效能

2、FB縮圖網址存資料庫一定要用text或是更大的longtext格式，因為縮圖網址很長，絕對超過255字元限制，以下為縮圖範例網址：

https://scontent-tpe1-1.xx.fbcdn.net/v/t15.5256-10/s526x296/66163083_2438510279742298_5081324641952202752_n.jpg?_nc_cat=103&_nc_oc=AQmn2aq2y0Og9oYxrV7eBimvN9HZecDfwqMD1I65-iAUU5BUbeigPAfRdGEROs793mo&_nc_ht=scontent-tpe1-1.xx&oh=934cd5202bbcd7f87d4bed85600e67f7&oe=5E130FEC

3、ajax.php檔一定要做權限機制，例如只有管理員或是具有模組管理權限的人才能送值參進入，如果沒設權限機制那駭客可以透過讀取fbhumbnail.js傳入值參讓ajax.php一值去爬FB播放器網頁，這樣網站的IP也很快就會被FB封鎖


以上三點需要注意，如果好朋友有更好的方法可以取得facebook影片縮圖也歡迎不吝賜教，畢竟個人能力有限，或許有更好的方法也不一定


教學撰寫： 徐嘉裕 Neil hsu