It’s possible to develop your Facebook Application locally, or at least most of its functionality.

 

Requirements

Back to top
 

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 curl and openssl
WampServer Configuration

Back to top
 

Facebook Application Settings

  • Web Site Tab
    Site URL: http://localhost/app_name/

    facebook website urlFacebook 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 TabFacebook Integration Tab

Back to top
 

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!

Facebook Canvas Page SampleOur Canvas Page

Back to top
  • Harry

    Fantastic tutorial, looking forward to more!

    Good facebook tutorials like this are few and far between….

  • Pingback: How To: Use Facebook Registration Plugin As Your Registration System | API? Yes Master!

  • vishal chawla

    Hello.

    When I try to run the code, it first asks me for login. Once I login, the page just keeps on flickering and does not proceed. Any inputs on this.

    Thank You.

    • Ibrahim Faour

      It should reload the first time only, can you share your code on Pasebin?

    • Vivek

      same here

  • Pingback: Determine If The User Likes (Fan Of) Your Page When Landing On Your Page Tab | API? Yes Master!

  • Pac

    Very helpful article….Thanks.

  • Jad

    hi! question: does the like button work if it is tested locally on a Canvas page ?

    • http://www.masteringapi.com Ibrahim Faour

      No, because Facebook scrapper needs an “online” end-point to crawl the page.

  • http://snarfed.org/ Ryan

    great article!

    i’ve recently released a utility to fill in a related gap in functionality. it’s a standalone implementation of Facebook’s FQL and Graph API that you can run on your development machine. among other things, it lets you test the actual HTTP requests your app would make to Facebook’s APIs but not depend on network connectivity and Facebook’s servers, which is nice for unit and integration tests.

    http://code.google.com/p/mockfacebook/

    happy hacking!

  • jeric

    i googled wamp server.. its seems it is needed so that we would be able to access  http:/localhost using the browser. isnt it the same when my IIS is on?
    i have a sample html on my localhost in the folder project and i tested it using http://localhost/projects/sample.html it works fine.. meaning i can already access localhost without the wamp server.. can you please tell my the difference why it is needed?

  • Sony Joy

    i wrote a php fangating program using php sdk, it works fine if the user is https enabled, but if the user is http enabled, it is not working, how to make fangate work even if the user is http enabled ?

  • http://www.facebook.com/bystwn22 Akhil T Raj

    thx

  • http://4rapiddev.com/ Hoan Huynh

    Thank you!

  • http://www.facebook.com/aram.baghdasaryan Aram Baghdasaryan

    Շատ շնորհակալություն: Դուք այս ձեր հոդվածով շատ օգնեցիք ինձ ու իմ նեռվերին: Իմացեք, որ ձեզ հայաստանից էլ կարդացող կա:


    Thanks from Armenia!

  • http://www.r-gate.net/ Mohamed Tair

    Thank you!

  • http://www.facebook.com/mahender.singh.71 Mahender Singh

    This is great tutorial, I am new to facebook apps and this helped a lot…Thankyou..

  • Blackjet

    This is the best article for those who would like to setup facebook app locally. Thank heaps!

  • Mohammed Farrah

    thanks a lot :)

  • admonhipno

    thanks!

  • http://www.facebook.com/adel.essafi Adel Essafi

    is there any kind of sample fb application please?

  • http://www.facebook.com/adel.essafi Adel Essafi

    what is the content of index.php in root directory?

  • http://www.facebook.com/profile.php?id=122613353 Steven Hyung-Ryul Chun

    having hard time trying to get this to work…

  • Salman

    it is awesome for me thnx dude

  • Salman

    hi can you tell me that (how can i fetch all data from facebook to my site? like ‘name’, ‘country’,’where i live’ and ‘about me’) thnx dude for posted this information to me.

  • vanamp

    Does not work for me. Don’t you have to put the App ID and App Secret somewhere?

    • Mohit

      you have to fill app id or you can use following method instead

      $facebook = new Facebook(array(
      ‘appId’ => AppInfo::appID(),
      ‘secret’ => AppInfo::appSecret(),
      ‘sharedSession’ => true,
      ‘trustForwarded’ => true,
      ));

  • Mohit

    Brilliant work…..Thanks a lot…you saved my time…. :)

  • http://setoelkahfi.web.id/ Seto El Kahfi

    you’re rock man :D
    thanks,

  • Nitin

    Really you did a great job….but i thing i want to know that i am getting all required values but i am not getting user email id…….could you please tell me how to get user email id too with other basic info(like first name, last name, email-id,gender)..

  • Shariful Islam

    great jobs indeed.thanx author.it helps me so much

  • sid

    awesome one helped me alot

  • Christopher Strydom

    Hi, i know this is an old article but i am really having troubles getting Facebook login to work on my wamp-server. I don’t want to create an app for Facebook but more have Facebook login on my website. From what i can tell you require an online domain. If i am wrong and there is a way to do this or the method you show can be used for this use to then please let me know :) Thanks, Chris.

  • Manisha Gaidhane

    HI, i am trying to create app url for localhost so it is giving me error “Something went wrong. We’re working on getting it fixed as soon as we can.” please suggest me way to solve this