Programming with Facebook is really fun and integrating it to any website makes it a little bit better. You'll know that there are real people interested to your content. Today we're going to do a code that:
1. Gets photo albums and photos of a facebook fan page (using Facebook PHP SDK and FQL).
2. Display these photos to a webpage (assuming it is your website).
 |
| Show your facebook photos to your website |
This one is useful if you want your facebook pictures to be shown in your website in a synchronized way. Once you uploaded an image in your fan page, it will be seen automatically in your website too.
This technique has the following Advantages:
1. You save your server disk space.
2. You got instant photo manager (facebook photos)
3. You save bandwidth since the photos shown in your website are loaded from facebook's repository.
4. Please add your comment if you know other advantages.
Risks:
1. When facebook is down (Well, I never encounter facebook was down)
2. Facebook is not responsible if you lost your data. (Read section 15 of their terms)
3. Please add your comment if you know other disadvantages or risks.
Steps
1. Create an App. This will enable you to get your App ID and App Secret. They are needed to access facebook data.
2. Our index.php well have the following code.
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> <title>Display Facebook Page Photos On Your Website by http://www.codeofaninja.com/</title> <!-- Just adding some style --> <style type='text/css'> body{ font-family: "Proxima Nova Regular","Helvetica Neue",Arial,Helvetica,sans-serif; } .fbAlbumImage, .fbAlbum{ float: left; height: 170px; padding: 10px; width: 150px; } </style> </head> <body> <!-- Just some heading --> <div style='font-size: 16px; font-weight: bold; margin: 0 0 10px 0;'> This album is synchronized with this <a href='https://www.facebook.com/pages/COAN-Dummy-Page/221167777906963?sk=photos'> Dummy Page Album </a> | Tutorial Link: <a href="http://www.codeofaninja.com/2011/06/display-facebook-photos-to-your-website.html"> Display Facebook Photos On Website With FQL And jQuery Lightbox </a> </div> <?php //include the fb php sdk require 'fb-sdk/src/facebook.php'; $facebook = new Facebook(array( 'appId' => 'changeToYourAppId', 'secret' => 'changeToYourAppSecret', 'cookie' => true, // enable optional cookie support )); //defining action index isset( $_REQUEST['action'] ) ? $action = $_REQUEST['action'] : $action = ""; /* * This will show */ if( $action == ''){ echo "<p>COAN Dummy Page Albums</p>"; // select albums from our dummy page $fql = "SELECT aid, cover_pid, name FROM album WHERE owner=221167777906963"; $param = array( 'method' => 'fql.query', 'query' => $fql, 'callback' => '' ); $fqlResult = $facebook->api($param); foreach( $fqlResult as $keys => $values ){ //to get album cover $fql2 = "select src from photo where pid = '" . $values['cover_pid'] . "'"; $param2 = array( 'method' => 'fql.query', 'query' => $fql2, 'callback' => '' ); $fqlResult2 = $facebook->api($param2); foreach( $fqlResult2 as $keys2 => $values2){ $album_cover = $values2['src']; } //show the album echo "<div class='fbAlbum'>"; echo "<a href='index.php?action=list_pics&aid=" . $values['aid'] . "&name=" . $values['name'] . "'>"; echo "<img src='$album_cover' border='1'>"; echo "</a>"; echo "<div>{$values['name']}</div>"; echo "</div>"; } } /* * This will show the photo(s) on the clicked album. */ if( $action == 'list_pics'){ isset( $_GET['name'] ) ? $album_name = $_GET['name'] : $album_name = ""; echo "<div><a href='index.php'>Back To Albums</a> | Album Name: <b>" . $album_name . "</b></div>"; // query all the images in the album $fql = "SELECT pid, src, src_small, src_big, caption FROM photo WHERE aid = '" . $_REQUEST['aid'] ."' ORDER BY created DESC"; $param = array( 'method' => 'fql.query', 'query' => $fql, 'callback' => '' ); $fqlResult = $facebook->api($param); echo "<div id='gallery'>"; foreach( $fqlResult as $keys => $values ){ if( $values['caption'] == '' ){ $caption = ""; }else{ $caption = $values['caption']; } echo "<div class='fbAlbumImage'>"; echo "<a href=\"" . $values['src_big'] . "\" title=\"" . $caption . "\">"; echo "<img src='" . $values['src'] . "' />"; echo "</a>"; echo "</div>"; } echo "</div>"; } ?> <!-- activate jQuery lightbox --> <script type="text/javascript" src="jQuery-lightbox/js/jquery.js"></script> <script type="text/javascript" src="jQuery-lightbox/js/jquery.lightbox-0.5.js"></script> <link rel="stylesheet" type="text/css" href="jQuery-lightbox/css/jquery.lightbox-0.5.css" media="screen" /> <script type="text/javascript"> $(function() { $('#gallery a').lightBox(); }); </script> </body> </html>
There are lots of other album information that you can retrieve. Not only album information, but also other information visible on facebook. Just check the availabe tables that you can query on facebook. Facebook Query Language (FQL) is of great help too since we are already familiar with SQL. We don't have much to study. :)
Regarding "Headers already sent..." issues, you can learn more fixing that here.
UPDATE LOGS
February 25, 2013
February 25, 2013
- Changed CSS
- Added some comments on code
- Used the latest Facebook PHP SDK (v.3.2.2)
- Changed the live demo link
- Changed code download link
The Code of a Ninja Resources
For FREE programming tutorials, click the red button below and subscribe! :)
website