HƯớng dẫn lấy toàn bộ video fanpage facebook vào website của bạn sử dụng facebook api video

Hôm nay, mình xin hướng dẫn các bạn cách lấy toàn bộ video, description, like và comment trên fanpage của một facebook bất kỳ, để nhúng vào website của mình, sử dụng Facebook Api để get content về.

Đầu tiên, mình phải đăng ký một ứng dụng facebook. Ứng dụng facebook sẽ cung cấp cho chúng ta một ID, và token. 

Có được ID và token ta get truy vấn qua facebook Api, sẽ trả về cho chúng ta một đoạn json bao gồm tất cả các link video, description,comment và like trên facebook fanpage, sau đó chúng ta sẽ đọc dữ liệu json đó và nhúng vào website của mình.

Các bạn có thể xem demo của mình bên dưới:

Link xem demo ứng dụng: 

https://laptrinhvb.net/tutorial-video-programming-dot-net.html

Bước 1: Các bạn đăng ký một ứng dụng facebook, các bạn có thể vào đường dẫn sau để tạo một ứng dụng

https://developers.facebook.com/

Sau khi đăng ký xong bạn sẽ được :

https://graph.facebook.com/oauth/access_token?client_id=YOUR_APP_ID&client_secret=YOUR_APP_SECRET&grant_type=client_credentials

Bước 3: Các bạn nhúng Bootstrap và Jquery vào để định dạng CSS với nội dung như code bên dưới:

<meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
  
    <title><?php echo $page_title; ?></title>
  
    <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
  
 
 
  
<div class="container">
  
</div> <!-- /container -->
  
<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>
  
<!--[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]-->

Bước 4: Các bạn tạo các biến đặc biệt sau:

$profile_photo_src = "https://graph.facebook.com/{$fb_page_id}/picture?type=square";
$access_token = "CHANGE_TO_YOUR_ACCESS_TOKEN";
$fields = "id,title,description,created_time,from,source";
$limit = 5;

Trong đó: 

$profile_photo_src: là đường đường dẫn hiển thị tấm hình của bạn đại diện cho mỗi video.

$access_token: là token của bạn được facebook api cung cấp khi bạn đăng ký thành công ứng dụng.

$fields: là các trường mà chúng ta muốn lấy về bao gồm id, tiêu đề, diễn giải, tạo bởi thời gian nào, từ đâu và link của video

$limit: là số lượng tin video mà các bạn muốn lấy về

Bước 5: Tạo Json link, ta sẽ sử dụng hàm file_get_contents đề lấy những thông tin fanpage facebook về qua facebook api.

$json_link = "https://graph.facebook.com/v2.6/{$fb_page_id}/videos?access_token={$access_token}&fields={$fields}&limit={$limit}";
$json = file_get_contents($json_link);
 
$obj = json_decode($json, true);
$feed_item_count = count($obj['data']);

Bước 6: Ta  sẽ sử dụng Foreach để đọc tất cả các element trong json_link mà chúng ta vừa lấy về được và hiển thị lên website theo ý muốn của mình.

for($x=0; $x<$feed_item_count; $x++){
    echo "<div class="row">";
        // video source
        $source = $obj['data'][$x]['source'];
  
        // display Facebook video
        echo "<div class="col-md-6">";
            echo "<video controls="" class="embed-responsive-item">";
                echo "<source src="{$source}" type="video/mp4">";
            echo "</video>";
        echo "</div>";
          
  
        echo "<div class="col-md-6">";
  
            // user's custom message
            $title = isset($obj['data'][$x]['title'])
                        ? htmlspecialchars_decode($obj['data'][$x]['title']) 
                        : "Video #" . $obj['data'][$x]['id'];
              
            $description = isset($obj['data'][$x]['description']) ? $obj['data'][$x]['description'] : "";
            $description = htmlspecialchars_decode(str_replace("
", "<br>", $description));
  
            // when it was posted
            $created_time = $obj['data'][$x]['created_time'];
            $converted_date_time = date( 'Y-m-d H:i:s', strtotime($created_time));
            $ago_value = time_elapsed_string($converted_date_time);
  
            // from
            $page_id = $obj['data'][$x]['from']['id'];
            $page_name = $obj['data'][$x]['from']['name'];
  
            // display video title
            echo "<h2 style="margin: 0 0 .5em 0;">{$title}</h2>";
  
            // display video description
            echo "<div>";
                echo $description;
            echo "</div>";
  
            // display when it was posted
            echo "<div style="margin:.5em 0 0 0; color: #999;">";
                echo "Posted {$ago_value} by <a href="https://facebook.com/{$page_id}" target="_blank">{$page_name}</a>";
            echo "</div>";
  
        echo "</div>";
          
        echo "<div class="col-md-12">";
            echo "<hr style="margin:2em 0; border:thin solid #f1f1f1;">";
        echo "</div>";
    echo "</div>";
}

Bước 7: chúng ta tiếp tục viết hàm để định dạng ngày post bài viết 

ví dụ: post cách đây bao nhiêu giờ hoặc ngày...

// to get 'time ago' text
function time_elapsed_string($datetime, $full = false) {
 
    $now = new DateTime;
    $ago = new DateTime($datetime);
    $diff = $now->diff($ago);
 
    $diff->w = floor($diff->d / 7);
    $diff->d -= $diff->w * 7;
 
    $string = array(
        'y' => 'year',
        'm' => 'month',
        'w' => 'week',
        'd' => 'day',
        'h' => 'hour',
        'i' => 'minute',
        's' => 'second',
    );
    foreach ($string as $k => &$v) {
        if ($diff->$k) {
            $v = $diff->$k . ' ' . $v . ($diff->$k > 1 ? 's' : '');
        } else {
            unset($string[$k]);
        }
    }
 
    if (!$full) $string = array_slice($string, 0, 1);
    return $string ? implode(', ', $string) . ' ago' : 'just now';
}

Vậy là xong, chúc các bạn thành công. Mọi thắc mắc các bạn có thể để lại comment bên dưới, mình sẽ hướng dẫn các bạn.

Cám ơn các bạn đã theo dõi.