codeofaninja
website

Display Facebook Videos To Your Website Script

Photo of Mike Dalisay
Modified Friday, February 10, 2012
by - @ninjazhai
Hi guys! After my post about displaying Facebook photos and events to website, some of you requested this post - how to display Facebook Fan Page Videos to your website or webpage. 

This one is useful if you want your Facebook videos to be shown in your website in a synchronized way. Once you uploaded a video in your fan page, it will be automatically shown to your website too. The advantages and risks of this is almost the same with what I discussed in my first post related to this one.



DOWNLOAD CODE LIVE DEMO

On the demo, I just uploaded some random videos of mine, taken using my Android phone. Haha!

In this post I'll show you the code on:

  • How to pull videos from you Facebook Page and display it to your website.
  • We will retrieve just the video's title, date it was created, the actual video and its description.

We were able to achieve this using the FQLFacebook PHP SDK. As of this posting,  the current PHP SDK version I downloaded is v.3.1.1. And of course, creating a Facebook App so you can have your own AppId and App Secret Id.

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
        <title>The Code Of A Ninja Dummy Page Videos</title>
        <style type='text/css'>
            #page_title{
                font-size:16px;
                font-weight:bold;
                margin: 0 0 10px 0;
            }
           
            .date_created{
                font:italic 12px Arial, Helvetica, sans-serif;
                color:#fff;
                margin:0 0 5px 0;
            }
           
            .video_desc{
                font:12px Arial, Helvetica, sans-serif;
                color:#fff;
                margin:0 0 5px 0;
            }
           
            .video_item{
                width:320px; /*i tried it with a bigger video and it's 400px*/
                float:left;
                padding:5px;
                background-color:brown;
                margin: 5px;
            }
           
            .video_title{
                font:20px Arial, Helvetica, sans-serif;
                font-weight:bold;
                color:#fff;
            }
        </style>
    </head>
<body>
<div class='page_title'>
    These videos are synchronized with this
    <a href='https://www.facebook.com/video/?id=221167777906963' target='_blank'>
        Dummy Page Videos
    </a>
</div>
<?php
require 'fb-sdk/src/facebook.php';

//specify you appId and secret
$facebook = new Facebook(array(
  'appId'  => 'change_to_your_app_id',
  'secret' => 'change_to_your_app_secret',
  'cookie' => true, // enable optional cookie support
));

//query to get videos
//specify you fan page id, I got 221167777906963
//you can also use the LIMIT clause here if you want to show limited number of videos only
$fql = "SELECT
            vid, owner, title, description, thumbnail_link,
            embed_html, updated_time, created_time
        FROM
            video
        WHERE owner=221167777906963"
;
           
$param  =   array(
 'method'    => 'fql.query',
 'query'     => $fql,
 'callback'  => ''
);
$fqlResult   =   $facebook->api($param);

//loop through each videos
foreach( $fqlResult as $keys => $values ){
   
    echo "<div class='video_item'>";
        echo "<div class='video_title'>" . $values['title'] . "</div>";
        echo "<div class='date_created'>Date Created: " . date( 'l, F d, Y', $values['created_time'] ) . "</div>";
        echo $values['embed_html'];
        echo "<div class='video_desc'>" . $values['description'] . "</div>";
    echo "</div>";
}
?>
   
  </body>
</html>

You can also retrieve other videos information if you want, please see the videos table of Facebook.

The Code of a Ninja Resources

For FREE programming tutorials, click the red button below and subscribe! :)
Thanks for the comments!
 
 
Fundamentals
"First do it, then do it right, then do it better."
~ Addy Osmani
"Talk is cheap. Show me the code."
~ Linus Torvalds
Let's Stay Connected!
g+ r
Android app on Google Play
© 2011-2014 The Code Of A Ninja. All rights reserved. Proudly Powered by Google Blogger. Images, logos, marks or names mentioned herein are the property of their respective owners.