Facebook Application Development With Open Graph

By | November 6, 2011

This is the first tutorial of Facebook application development with Open Graph series in which I will show you how to

  • Setup Facebook Application
  • Setup Open Graph for App
  • Setup Auth Dialog Preview For Authenticating user
  • Setup Permissions

So let’s start the tutorial without wasting any time, but before proceeding you can check the demo app.

Setup Facebook Application for Open Graph
Step 1: Go to http://developers.facebook.com/ and click on Apps.

If you haven’t Added the Developers App previously then it will ask you for authentication, click on allow to proceed.

Step 2: If you don’t have verified Facebook Account it will ask you to verify it.
After verifying your account it will take you to Apps section, here you have to click on Create New App button to start creating your app.

Step 3: Enter the App Display Name like in my case its Only Tips And Tricks, App Namespace will be your app URL: http://apps.facebook.com/yourappnamespace but you can change it later, Check the I Agree box and click on Continue button.

Step 4: Now it will take you to your app settings page

but before going further you have to upload app files to your hosting service for this just create a file Index.php and enter the following code for authenticating purpose replacing APP ID (highlighted in the image above) and Canvas Page URL(http://apps.facebook.com/yourappnamespace) and upload it into your app directory yoursite.com/yourapp/.

<?php

$app_id = "YOUR_APP_ID";

$canvas_page = "YOUR_CANVAS_PAGE_URL";

$auth_url = "https://www.facebook.com/dialog/oauth?client_id="
. $app_id . "&redirect_uri=" . urlencode($canvas_page);

$signed_request = $_REQUEST["signed_request"];

list($encoded_sig, $payload) = explode(‘.’, $signed_request, 2);

$data = json_decode(base64_decode(strtr($payload, ‘-_’, ‘+/’)), true);

if (empty($data["user_id"])) {
echo("<script> top.location.href=’" . $auth_url . "'</script>");
} else {
echo ("Welcome User: " . $data["user_id"]);
}
?>

 

Step 5: Now in Select how your app integrates with Facebook section in your app’s settings page click on App on Facebook and fill the Canvas URL (url where you unloaded your files yoursite.com/yourapp/) and click on Save Changes.

Here application setup has been completed.

Note: you may also need to specify the secure canvas url if you get warning .

Setup Open Graph for App
Step 1: Now to setup open graph click on Open Graph link located at left side.

 
Now if you are running Open Graph for the first time you’ll see the wizard, in which first field is verb and second is noun. In first field we will specify action as read and Object as article because in this app people will read articles which will be shown in their timeline, you can setup theses field according to your app requirement, after specifying action and object click on Get Started button.

Step 2: leave everything as it is in Edit your Action Type and click on Save Changes and Next button.

Step 3: Repeat the step 2 for Edit your Object Type and in the final step Create an Aggregation just click on Save and Finish button.

Setup Auth Dialog Preview for Authenticating user
You have just created the aggregation but the problem is when you go to Auth Dialog in your App Settings it will show you warning sign which says this Aggregation is missing preview actions and objects and also when you go to your app on Facebook it will show authentication window with Login and Cancel buttons saying Logging in will not add this app’s activity to Facebook instead of Add to Facebook Button. To rectify this problem follow these steps
Step 1:
Click on aggregation preview thumbnail the popup Read Preview window will appear click on Add New button in Preview Objects.

Step 2: Enter any title name as sample name in Title field and in Image field enter the URL of sample image and click on create.

Step 3: You will now see the object in the object preview field, click on Debug of the object.

It will take you to the object debugger, here you have to copy the og:url

Step 4: Now go back to popup window again and click on Add New button in Preview Actions

Here put the URL you have copied in the Article field and click on create.

You have now created the aggregation Preview you can now close the popup window.

Setup Permissions
To setup permissions go to your app’s settings page and click on Authenticated Referrals, fill the box as shown in the image with the permissions you want and then click on Save Changes when you are done.

Note: Publish_actions permission is necessary before your app can post actions to user’s timeline. If you will add Extended Permissions then Auth will be of two steps.

Your application setup is now complete you can test your app by going on to apps.facebook.com/yourappnamespcace.

In next tutorial i will try to cover how to publish actions with open graph.

 

11 thoughts on “Facebook Application Development With Open Graph

  1. Thiago

    Please let me know when you publish you next post (the one about “publish actions with open graph”). Thanks!

    Reply
  2. Patel pranay

    it says : Parse error: syntax error, unexpected ‘/’ in /home/pranay/public_html/socialreader/index.php on line 14

    Help soon if possible :)

    Reply
    1. Hasnain Post author

      Your code should be in plain text, formatted text can cause problems. It would be more easy to help if you can post your code here.

      Reply
  3. Julie Carter

    Index.php file
    Please forgive me, but I am old & stoopid and never had any coding training.

    However, I use a jooomla platform and created a (yourapp) folder in the root directory and placed the index.php file inside. Hence when I enter a URL, website/yourapp the raw .php file displays.

    Please advise this old fool!

    Thanks
    Julie

    Reply
  4. julie

    I have followed every step but cannot get the demo page to work. The folder I am using works OK on a test app. Have made all the changes to files as instructed, but get a white page when I use the canvas app and the demo page returns an error.

    Did all the Facebook configuration without issue.

    Can you help me please?

    Reply
  5. Julie

    My life is on hold as I cannot get his open graph to work. What amount of inducement would elicit a response? Please I need some help, I’ve gone over everything a dozen times.

    Fond regards
    Julie

    Reply
  6. Fedge

    Nice article. Thanks. I was having trouble setting up the preview objects. It’s not intuitive at all. We should just be able to paste in a list of our objects’ URLs IMO. Oh well. I’ll give this a shot.

    Reply
  7. Malik

    Hi,
    I created an Android app in which I used the Score API for my leaderboard. It works perfect for the facebook TEST users but not work for other users because of Open Graph issue..

    Is this tutorial also work for Mobile App or only for Web?

    Reply

Leave a Reply

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