Tutorials – How to Create a FaceBook Application 2014

The magic of Fb for entrepreneurs is that it is a 1000-million robust platform of active, engaged users,  largely spoiling  time while they are at work. They are tolerant, mellow, and don’t expect much. You can wow them. The magic is to engage on Facebook, not to simply present yourself. Essentially: move beyond the “like.” This is where Facebook apps loom large.

Basic requirement to Build a Facebook app

1. Basic requirement to build a Facebook app
2. The best place to host your Facebook application

Steps To create a Facebook app

1. Register your App
2. Configuring your App Settings
3. Authorization and Coding

1. Register your App

Goto : https://developers.facebook.com/apps and Click on Create New App button on the right.

Please note you must have verified your Facebook account to create apps on Facebook. Click here for more information on verifying your account.
A Dialog Box will pop up. It will ask you three things :
App Name : Your Application Name ( It can be anything)
App Namespace : It is used for defining the URL for Facebook App. It must be unique. For example, If your namespace is "ShashaHack" , then your Facebook App URL will look like this: https://apps.facebook.com/ShashaHack

Web Hosting: It is the webspace provided by Facebook for your app via Heroku for free. If you are familiar with heroku and want to use it for hosting, then Check the mark. Otherwise, leave it as it is, if you want to use your own hosting. I won’t suggest you to use heroku because it has so many restrictions and heroku don’t provide a SSL for your apps.

2. Configuring your App

Now, Facebook will generate your unique APP ID and APP SECRET which you must use in your application.  Once you’ve created a Facebook app, select the “App on Facebook” section and specify a Canvas and Secure Canvas URL:

Fields which are necessary to make your app work :
(i) App Domains: This is domain of your hosting site. In my case , It is “www.manjeshojha.com“.
(ii) Website with Facebook Login: It is where the application is located. In my case, It is “http://www.manjeshojha.com/firstapp/“.
(iii) App on Facebook : In this , there are two things,
Canvas URL: It is same as above i.e. place where application is located. Facebook uses canvas URL to pull out the content of application and load it in an iframe. In my case, It is “http://www.manjeshojha.com/firstapp/“.
Secure Canvas URL: Facebook now uses HTTPS secure connection on their website. Some Facebook users have enabled “Secure Browsing: and some does not. Therefore, If you enter same “CANVAS URL” in this field, then the app will work, but only for those users who have not enabled Facebook secure browsing. Therefore, Your domain must have SSL connection to work your app globally. In my case, It is https://www.manjeshojha.com/firstapp/

3. Authorization And Coding

Personally I use PHP SDK for creating  my apps, you can also use the same
The Facebook SDK for PHP provides a rich set of server-side functionality for accessing Facebook’s server-side API calls. These include all of the features of the Graph API and FQL. You can download the Facebook SDK for PHP from GitHub.
Now open example/example.php file in downloaded code and edit appId and secret.

<?php
/**
 * Copyright 2011 Facebook, Inc.
 *
 * Licensed under the Apache License, Version 2.0 (the "License"); you may
 * not use this file except in compliance with the License. You may obtain
 * a copy of the License at
 *
 *     http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
 * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
 * License for the specific language governing permissions and limitations
 * under the License.
 */

require '../src/facebook.php';

// Create our Application instance (replace this with your appId and secret).
$facebook = new Facebook(array(
  'appId'  => '344617158898614',
  'secret' => '6dc8ac871858b34798bc2488200e503d',
));

// Get User ID
$user = $facebook->getUser();

// We may or may not have this data based on whether the user is logged in.
//
// If we have a $user id here, it means we know the user is logged into
// Facebook, but we don't know if the access token is valid. An access
// token is invalid if the user logged out of Facebook.

if ($user) {
  try {
    // Proceed knowing you have a logged in user who's authenticated.
    $user_profile = $facebook->api('/me');
  } catch (FacebookApiException $e) {
    error_log($e);
    $user = null;
  }
}

// Login or logout url will be needed depending on current user state.
if ($user) {
  $logoutUrl = $facebook->getLogoutUrl();
} else {
  $loginUrl = $facebook->getLoginUrl();
}

// This call will always work since we are fetching public data.
$naitik = $facebook->api('/naitik');

?>
<!doctype html>
<html xmlns:fb="http://www.facebook.com/2008/fbml">
  <head>
    <title>php-sdk</title>
    <style>
      body {
        font-family: 'Lucida Grande', Verdana, Arial, sans-serif;
      }
      h1 a {
        text-decoration: none;
        color: #3b5998;
      }
      h1 a:hover {
        text-decoration: underline;
      }
    </style>
  </head>
  <body>
    <h1>php-sdk</h1>

    <?php if ($user): ?>
      <a href="<?php echo $logoutUrl; ?>">Logout</a>
    <?php else: ?>
      <div>
        Login using OAuth 2.0 handled by the PHP SDK:
        <a href="<?php echo $loginUrl; ?>">Login with Facebook</a>
      </div>
    <?php endif ?>

    <h3>PHP Session</h3>
    <pre><?php print_r($_SESSION); ?></pre>

    <?php if ($user): ?>
      <h3>You</h3>
      <img src="https://graph.facebook.com/<?php echo $user; ?>/picture">

      <h3>Your User Object (/me)</h3>
      <pre><?php print_r($user_profile); ?></pre>
    <?php else: ?>
      <strong><em>You are not Connected.</em></strong>
    <?php endif ?>

    <h3>Public profile of Naitik</h3>
    <img src="https://graph.facebook.com/naitik/picture">
    <?php echo $naitik['name']; ?>
  </body>
</html>

Once you edit appId and secret please upload the downloaded code into your web server ! Cheers now your app is ready !!
 If you want any hep from my side please comment on this post/-