It’s possible to develop your Facebook Application locally, or at least most of its functionality.
Requirements
- A development environment, I’m using WampServer (you may use XAMPP, if you find yourself more comfortable with)
- A Facebook Application
- The Facebook PHP-SDK
Configuring the environment
Make sure that cURL is enabled/installed, also check for openssl extension if you are planning to use file_get_contents() (if you are using PHP).
WampServer Configuration
Facebook Application Settings
- Web Site Tab
Site URL: http://localhost/app_name/
Facebook Web Site Tab - Facebook Integration Tab
Canvas Page: http://apps.facebook.com/app_name/
Canvas URL: http://localhost/app_name/canvas/
Bookmark URL: http://apps.facebook.com/app_name/bookmark/
Canvas Type: IFrame
IFrame Size: Auto-resize
Facebook Integration Tab
Canvas Page
We use the same approach used in the PHP-SDK, just to test if it’s working.
UPDATE: This code uses the old PHP-SDK (v2.x). While the new PHP-SDK may work; once the JS-SDK is upgraded by Facebook this tutorial will be updated accordingly. (reference)
UPDATE: Code is now using the new PHP-SDK (3.x) and the new JS-SDK Auth 2.0
<?php
// Path to PHP-SDK
require '../src/facebook.php';
$facebook = new Facebook(array(
'appId' => 'APP_ID',
'secret' => 'APP_SECRET',
));
// See if there is a user from a cookie
$user = $facebook->getUser();
if ($user) {
try {
// Proceed knowing you have a logged in user who's authenticated.
$user_profile = $facebook->api('/me');
} catch (FacebookApiException $e) {
echo '<pre>'.htmlspecialchars(print_r($e, true)).'</pre>';
$user = null;
}
}
?>
<!DOCTYPE html>
<html xmlns:fb="http://www.facebook.com/2008/fbml">
<head>
<title>Facebook Application Local Development</title>
<link type="text/css" rel="stylesheet" href="css/reset.css">
<link type="text/css" rel="stylesheet" href="css/main.css">
</head>
<body>
<div id="login">
<?php if (!$user) { ?>
<fb:login-button></fb:login-button>
<?php } ?>
</div>
<div id="cont">
<?php if ($user): ?>
<img src="https://graph.facebook.com/<?php echo $user; ?>/picture">
<p>Hello <?php echo $user_profile['name']; ?>!</p>
<?php else: ?>
<strong><em>You are not Connected.</em></strong>
<?php endif ?>
</div>
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({
appId: '<?php echo $facebook->getAppID() ?>',
cookie: true,
xfbml: true,
oauth: true
});
FB.Event.subscribe('auth.login', function(response) {
window.location.reload();
});
FB.Event.subscribe('auth.logout', function(response) {
window.location.reload();
});
};
(function() {
var e = document.createElement('script'); e.async = true;
e.src = document.location.protocol +
'//connect.facebook.net/en_US/all.js';
document.getElementById('fb-root').appendChild(e);
}());
</script>
</body>
</html>Where the folder structure is something like:
app_name
¦ index.php
¦
+---canvas
¦ ¦ index.php
¦ ¦
¦ +---css
¦ main.css
¦ reset.css
¦
+---src
facebook.php
fb_ca_chain_bundle.crt
And we’re done!
Our Canvas Page
If you enjoyed this article, please consider sharing it!
Twitter Love!
Pingback: How To: Use Facebook Registration Plugin As Your Registration System | API? Yes Master!
Pingback: Determine If The User Likes (Fan Of) Your Page When Landing On Your Page Tab | API? Yes Master!