How to create a Facebook application, tutorial for beginners

  1. Previous
  2. Next
  3. Recent

    1. Signs 'He' May be Cheating on You
    2. 7 Vows of Hindu Marriage - Know What 'Saat Vachans' Mean
    3. RuPay vs Visa vs Mastercard vs American Express- A Comparison
    4. What is RuPay? Everything You Need to Know About India's Domestic Payment System!
    5. Top 10 Online Portals to Find a High Paying Job in India
    6. Top Indians who Revolutionized the IT Sector in India
    7. 8 Initiatives by Narendra Modi that Could Change the Future of the Nation
    8. 8 Work-from-home Jobs for Housewives, Students, and Part timers
    9. Complete Company Registration Process in India - Explained
    10. Change Name in India in 5 Steps - Filing Affidavit, Newspaper Ad & Gazette Notification

Facebook applications are a great way of engaging friends and fans. Everyday new apps are coming out, making Facebook-time more addictive.

If you wanted to create an app of yours then continue reading as we’ll tell you everything – right from designing the authentication dialog box to deploying app in Facebook for the world to use.

Before starting the tutorial, make sure you have a web server with SSL certification ie a https server than a http. If you don’t have one then you can get the hosting from Facebook’s partner.

The app we’re building today takes text from user and post to his wall as update.

First step before building a Facebook app is to register it by by providing app name, namespace, hosting url and other details. You’ll get an app id, app secret after this step.

Lets see how to code the entire app…just a few lines, don’t worry!

1. Authentication

Like all other apps, we need to show an authentication box to users at first. When a user hits ‘Go to App’, he can start using the app.

simple facebook app tutorial

Make an index.php file and put the below written code (replace app_id and canvas_page url). In the example, we’ve taken a app_id and canvas_page of my Flip My Update Facebook app.

<?php
app_id = "2xxxxxxxxxxxxx";
$canvas_page = "https://apps.facebook.com/flip-my-update/";

$auth_url = "https://www.facebook.com/dialog/oauth?client_id="
. $app_id . "&redirect_uri=" . urlencode($canvas_page)."&scope=publish_stream";
$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 {
<?php include('appdata.php'); ?>
}
?>

All first time users will see the oauth dialog while older users will not. In the example, when a user grants access to an app ‘appdata.php’ will be executed.

2. The appdata.php code

In the core code of our app – appdata.php, we will show a textbox where user enters text and post as update to his wall. This post would publish with app name at the bottom.

Save the following code in appdata.php in the same folder as index.php,

<?php
$feed_url = "https://www.facebook.com/dialog/feed?app_id=
". $app_id . "&redirect_uri=" . urlencode('https://apps.facebook.com/post-on-user-wall').";

if (empty($_REQUEST["post_id"]))
{
echo("<script> top.location.href='" . $feed_url . "'</script>");
}

else
{
echo ("Error!");
}
?>

Now the app is ready to launch. All we need is to deploy it to Facebook’s environment.

3. Deploy to Facebook

To make your Facebook app usable to everyone, we need to upload it to our web server. Upload all the app files ie index.php and appdata.php inside the folder you’ve specified in the Canvas Url/Secure Canvas Url.

Once you do this, goto apps.facebook/com/yourappnamespace. You should see your in action.

User posting update

post update on user wall

Update published to user wall

update posted on user wall

[Note: Developers wouldn’t see the authentication box but all other users would see it.]

Being a tutorial for beginners, this is a simple piece of coding. You can modify the same app and allow the app to post automatic updates to user wall. No need to ask for user permission again and again.

blog comments powered by Disqus