Creating Facebook Quiz Application Without Database

By | December 4, 2010

In this tutorial i will show you how to create facebook quiz application without having a database. We will use .xml file to save questions and answers so it would be more easy to configure as compare to database.

you can view my demo app from here.

Step 1: Login to your Facebook account and goto http://www.facebook.com/developers to add facebook developers application.

Step 2: Click on setup application, fill the name of application, and agree to terms and conditions, you will get your Application ID, API key and Secret key which you will use in your application.

 

 


Step 3: Now download source code from here and extract it in your project directory, replace the “Application ID” and “keys” with your own application id and keys and also follow the instructions to set urls.

 

Step 4: Fill the basic information and under facebook Integration tab. Set canvas page and canvas urls as shown.

 

 

Canvas page = your application url in facebook
Canvas url = url of your project’s directory where you extracted the source files.

 

Now its time to explain the code.


Following files are there in the source code.

 

    1. Config.php (configuration & authentication file)

 

    1. Index.php (main file)

 

    1. Facebook.php (facebook official php client library)

 

    1. Questions.xml (xml file where questions and answers are stored)



1. Config.php (configuration & authentication file)

 

When someone visits “your application app.facebook.com/yourapp/” Facebook server will fetch data from your project directory “http//yourdomain.com/yourprojectdirectory”. The server will first look for index file and compiler will compile it first, but if it doesn’t find index file it will show the whole directory instead, and when it reaches the following line in “index.php” file

 

include_once “config.php”;

 

it will jump to “config.php” file to compile it.

 

Now take a look at “Config.php” file.

 

<?php

 

//set facebook application id, secret key and api key here
$fbconfig[‘appid’ ] = “123456789012345”;
$fbconfig[‘api’ ] = “12345678901234567890123456789012”;
$fbconfig[‘secret’] = “12345678901234567890123456789012”;

 

//set application urls here
$fbconfig[‘baseUrl’] = “http://www.yourdomain.com/yourprojectdirectory”; //your project url where your project is located;
$fbconfig[‘appBaseUrl’] = “http://apps.facebook.com/yourapp”; //your facebook application url;

 

$uid = null; //facebook user id

 

try{
include_once “facebook.php”;
}
catch(Exception $o){
echo ‘<pre>';
print_r($o);
echo ‘</pre>';
}
// Create our Application instance.
$facebook = new Facebook(array(
‘appId’ => $fbconfig[‘appid’],
‘secret’ => $fbconfig[‘secret’],
‘cookie’ => true,
));

 

//Facebook Authentication part
$session = $facebook->getSession();
$loginUrl = $facebook->getLoginUrl(
array(
‘canvas’ => 1,
‘fbconnect’ => 0,
‘req_perms’ => ”
)
);

 

$fbme = null;

 

if (!$session) {
echo “<script type=’text/javascript’>top.location.href = ‘$loginUrl';</script>”;
exit;
}
else {
try {
$uid = $facebook->getUser();

 

$fbme = $facebook->api(‘/me’);

 

 

 

} catch (FacebookApiException $e) {

}
}

 

function d($d){
echo ‘<pre>';
print_r($d);
echo ‘</pre>';
}
?>

 

As said before config.php file is configuration & authentication file thats why we will include this file where we the want the user to authenticate.

 

In the first part we have setup the application id and keys to make api calls and make application more social. After that we have set the urls.

 

And to include facebook php client library we have used the following code

 

include_once “facebook.php”;

 

Following is the code which we used to get user authentication

 

$session = $facebook->getSession();
$loginUrl = $facebook->getLoginUrl(
array(
‘canvas’ => 1,
‘fbconnect’ => 0,
‘req_perms’ => ”
)
);

 

 

 

as you see in the above code, no extended permission are set so it will only asks for basic user info. To get extended permission you have to use the following code

 

‘req_perms’ => ‘email,publish_stream,status_update,user_birthday,user_location,user_work_history’

 

See the full list of extended permissions from here.

 

2. Index.php (main file)

 

“Index.php” is your main file where your application code should be. you can embed your flash game or other app after

 

include_once “config.php”;

 

so that the user get authenticated before he will use your app or game.

 

3. Facebook.php (facebook official php client library)

 

Facebook.php is facebook official php SDK client library so nothing more to explain.


4. Questions.xml (file where questions and answers are stored)

 

We used Question.xml file to store questions and answers. To change questions and answers open question.xml file with notepad and edit it.

 

See facebook official documentation for more information about creating facebook application.

18 thoughts on “Creating Facebook Quiz Application Without Database

  1. suhas

    Hello Hasnain,

    Thanks for the brilliant tutorial. I really helped me a lot :). Its Brilliant work. Just need a small info. How do I put a publish button and post the result on my wall. Can you please help me regarding this. I t would be very helpful :).

    Reply
    1. HASNAIN

      I haven't experimented it yet, but you can try it by using "stream.publish" method and passing $score parameter. Let me know if it works.

      Reply
          1. Ahmed Bouich

            Dear im not a facebook api professional please can you give me the right code and where to put it and thanks bro

          2. HASNAIN

            Due to short of space and syntax highlighter problem i will not be able to put the code here, you can check this readme file it has full code will details to implement the code.

  2. Alex

    Hi Hasnain,
    i tried your tutorial but i keep getting errors with the config file! it always says parse error unexpected ">" in line 18 @ config.php

    this is the part where the echo '' is !! what can i do, i'm a php newbie

    Reply
    1. HASNAIN

      Hi Alex,
      I have checked the code, its working fine, if you are getting prase error there can be different causes but first make sure that you are using the PHP 5 version, otherwise you may get the prasing error. If you are already using PHP 5 then give you application link.

      Reply
      1. The Geek Underground

        Yup, same problem – unexpected '<' in line 18 – using PHP 5 and copy & pasted code into my config.php file, and entered my own app info. Would be nice to know how to fix. Definitely a syntax error.

        Reply
        1. HASNAIN

          I guess you haven't downloaded the source code mention in step 3, you just copied the code from the tutorial which is not the full source code and the error was occurred due to formatting text, Your code should be in plain text, so simply download the code, extract in your project directory and let me know if it solves your problem.

          Reply
    1. HASNAIN

      To get rid of redirection problem, make sure you have latest version of PHP SDK provided by Facebook. I also had the same same problem and it solved by updating the SDK. you can download the latest version of SDK from here.

      Reply
  3. Pingback: Useful tips for Facebook developer

Leave a Reply

Your email address will not be published. Required fields are marked *