Background
Break News
How to add local font to Tailwind Css and NextJS? - Tutorial Design Pattern? - Blockchain Technology, How to create own Bitcoin virtual currency - Zustand mordern management state - Design Pattern - Flyweight Pattern? - Docker Full training Topic

[Tutorial] How to Create Awesome Facebook Apps in Easy Steps

Friday 1 July 2016
|
Read: Completed in minutes

[Tutorial] How to Create Awesome Facebook Apps in Easy Steps

Facebook is one of the social network in the world, so we should know how to programming with Facebook.

What need you do to become facebook developer!
1. Register one facebook account. Register here
2. Domain and Hosting
3. Register SSL Certificate (with https://) -  Example: Heroku, wordpress
4. Phone
5. IDE developer: Example: Notepad++, PHP Designer, Dream Weaver,...




Understand it will be help you in business so much in the future, ...

This tutorial will demo to you how to create a facebook apps and using facebook api (PHP SDK)
We're using Facebook API v2.6.








Step 1: Create your facebook account!

Step 2: Create your facebook apps, follow my instructions:


Login https://developers.facebook.com/

Create apps by "Add a new app"

How to Create Awesome Facebook Apps in Easy Steps - Webzone Tech Tips Zidane

Enter the name "Get Info Email List"
See below the options (this option maybe change up to Facebook development)

How to Create Awesome Facebook Apps in Easy Steps - Webzone Tech Tips Zidane

See the config apps:
Basic Settings:

How to Create Awesome Facebook Apps in Easy Steps - Webzone Tech Tips Zidane


Use Canvas Page name:
https://apps.facebook.com/email_list_app
Secure Canvas URL:
example: https://zidane.herokuapp.com/

Site URL:
https://zidane.herokuapp.com/
How to Create Awesome Facebook Apps in Easy Steps - Webzone Tech Tips Zidane

How to Create Awesome Facebook Apps in Easy Steps - Webzone Tech Tips Zidane

Valid OAuth redirect URLs:
https://zidane.herokuapp.com/callback.php
Advanced Settings:

How to Create Awesome Facebook Apps in Easy Steps - Webzone Tech Tips Zidane


Step 3: Build Source code


Download PHP SDK from the above link, after that use this link into your projects. Create two files with index.php and callback.php, set up your facebook SDK folder

Rename to facebook-sdk-v5

In source code remember   "always define the SDK source with /facebook-sdk-v5/"



How to Create Awesome Facebook Apps in Easy Steps - Webzone Tech Tips Zidane

Inside facebook-sdk-v5

How to Create Awesome Facebook Apps in Easy Steps - Webzone Tech Tips Zidane


Source code

index.php




<?php
   if(!session_id()) {
    session_start();
}
?>

<!DOCTYPE HTML>
<html>
<head>

    <title>Login with Facebook</title>
    <link href = "https://www.bootstrapcdn.com/twit
    ter-bootstrap/2.2.2/css/bootstrap-combined.min.css"  rel = "stylesheet" />

    <meta http-equiv="content-type" content="text/html" />
    <meta name="author" content="GallerySoft.info" />

    <title>Get list email address</title>
</head>

<body>

<?php

define('FACEBOOK_SDK_V4_SRC_DIR', __DIR__ . '/facebook-sdk-v5/');
require_once __DIR__ . '/facebook-sdk-v5/autoload.php';

echo "<h1>Welcome to get list email address!</h1>";

$fb = new Facebook\Facebook([
  'app_id'          => '144224829331429', 
// Replace {app-id} with your app id
  'app_secret'      => 'ff0af80e8d80467adadbf8fa32e6c312', 
  'default_graph_version' => 'v2.6',
    ]);
$helper = $fb->getRedirectLoginHelper();

// Optional permissions
$permissions = ['email', 'user_likes', 'manage_pages', 'publish_pages', 'read_stream']; 

$loginUrl = $helper->getLoginUrl('https://vilh.herokuapp.com/callback.php', $permissions);


// add below foreach let's it don't got Cross-site request forgery validation failed. 
// Required param “state” missing

foreach ($_SESSION as $k => $v)
{
    if (strpos($k, "FBRLH_") != FALSE){
        if (!setcookie($k, $v))
        {}
        else
            $_COOKIE[$k] = $v;
    }
}

echo '<pre>';
print_r ($_COOKIE);
echo '</pre>';


echo htmlspecialchars($loginUrl) . "<br> <br>";

echo '<a href="' . htmlspecialchars($loginUrl) . '">Log in with Facebook! ya</a>';

/*
try {
  // Returns a `Facebook\FacebookResponse` object
  $response = $fb->get('/me?fields=id,name', '{access-token}');
  
  echo '<pre>';  
  echo $response;  
  echo '</pre>';
  
} catch(Facebook\Exceptions\FacebookResponseException $e) {
  echo 'Graph returned an error: ' . $e->getMessage();
  exit;
} catch(Facebook\Exceptions\FacebookSDKException $e) {
  echo 'Facebook SDK returned an error: ' . $e->getMessage();
  exit;
}
*/

?>
</body>
</html> 

callback.php






<!DOCTYPE HTML>
<html>
<head>
    <meta http-equiv="content-type" content="text/html" />
    <meta name="author" content="GallerySoft.info" />

    <title>Login</title>
</head>

<body>


<?php

    // get UserInfo function - use it when you want to get information
    function getUserInfo()    
    {
         try {
          // Returns a `Facebook\FacebookResponse` object
          // $response = $fb->get('/me?fields=email', $accessToken);
          
          $response = $fb->get('/me?fields=id, name, email', $accessToken);
          $userNode = $response->getGraphUser();
          
          echo '<h3> Users Information </h3>';
          /*
          echo '<pre>';
          print_r ($userNode);          
          echo '</pre>';
          */
                    
          echo '<h1> Id: </h1>';
          echo ($userNode["id"]);
          
          echo '<h1> Name: </h1>';
          echo ($userNode["name"]);
          
          echo '<h1> Email: </h1>';
          echo ($userNode["email"]);
                    
          echo "<br>";
          
        } catch(Facebook\Exceptions\FacebookResponseException $e) {
          echo 'Graph returned an error: ' . $e->getMessage();
          exit;
          
        } catch(Facebook\Exceptions\FacebookSDKException $e) {
          echo 'Facebook SDK returned an error: ' . $e->getMessage();
          exit;
        }
    }  
?>


<?php

    foreach ($_COOKIE as $k=>$v)
    {
        if (strpos($k, "FBRLH_") != FALSE)
        $_SESSION[$k]  = $v;
    }

    // ph?i cรณ session_id
    if(!session_id()) {
        session_start();

    }
 

  // always define the SDK source with /facebook-sdk-v5/
   define('FACEBOOK_SDK_V4_SRC_DIR', __DIR__ . '/facebook-sdk-v5/');
   require_once __DIR__ . '/facebook-sdk-v5/autoload.php';

       
   $fb = new Facebook\Facebook([
          'app_id'          => '144224829331429', // Replace {app-id} with your app id
          'app_secret'      => 'ff0af80e8d80467adadbf8fa32e6c312',
          'default_graph_version' => 'v2.6',
          ]);

    $helper = $fb->getRedirectLoginHelper();
      
        

    try {
      $accessToken = $helper->getAccessToken();    
      
    } catch(Facebook\Exceptions\FacebookResponseException $e) {
      // When Graph returns an error
      echo 'Graph returned an error: ' . $e->getMessage();
      exit;
      
    } catch(Facebook\Exceptions\FacebookSDKException $e) {
   

  // When validation fails or other local issues
      echo 'Facebook SDK returned an error: ' . $e->getMessage();
      exit;
    }
    
        
    if (! isset($accessToken)) {
      if ($helper->getError()) {
        header('HTTP/1.0 401 Unauthorized');
        echo "Error: " . $helper->getError() . "\n";
        echo "Error Code: " . $helper->getErrorCode() . "\n";
        echo "Error Reason: " . $helper->getErrorReason() . "\n";
        echo "Error Description: " . $helper->getErrorDescription() . "\n";
      } else {
        header('HTTP/1.0 400 Bad Request');
        echo 'Bad request';
      }
      exit;
    }

    // Logged in
   
    // The OAuth 2.0 client handler helps us manage access tokens
    $oAuth2Client = $fb->getOAuth2Client();
    
    // Get the access token metadata from /debug_token
    $tokenMetadata = $oAuth2Client->debugToken($accessToken);
    

    // Validation (these will throw FacebookSDKException's when they fail)
    $tokenMetadata->validateAppId('144224829331429'); // Replace {app-id} with your app id
    // If you know the user ID this access token belongs to, you can validate it here
    //$tokenMetadata->validateUserId('123');
    $tokenMetadata->validateExpiration();
    
    if (! $accessToken->isLongLived()) {
      // Exchanges a short-lived access token for a long-lived one
      try {
        $accessToken = $oAuth2Client->getLongLivedAccessToken($accessToken);
      } catch (Facebook\Exceptions\FacebookSDKException $e) {
        echo "<p>Error getting long-lived access token: " . $helper->getMessage() . "</p>\n\n";
        exit;
      }
    
    /*
      echo '<h3>Long-lived</h3>';
      echo '<pre>';
      print_r($accessToken->getValue());
      echo '</pre>';
      echo '<br>';
      */
    }
    
    $_SESSION['fb_access_token'] = (string) $accessToken;    
  
    
   
          try {
            
            $response = $fb->get('/203174996740517/likes?fields=id, name, pic, username, picture, link', $accessToken);
            $graphObject = $response->getGraphEdge();
            
            /*
            echo '<pre>';
            print_r ($graphObject);
            echo '</pre>';
            
            echo '<hr>';        
            */           


           // echo $graphObject[0]['id'] . "<br>";

            $i =  0;
            foreach ($graphObject as $obj)
            {
                $i =  $i + 1;
                echo $i;
                echo '<h3> Id       = ' . $obj['id'] . '</h3>' ;           
                echo '<h3> name     = ' . $obj['name'] . '</h3>';
                echo '<h3> pic      = ' . $obj['pic'] . '</h3>';
                echo '<h3> username = ' . $obj['username'] . '</h3>';
                echo '<h3> picture  = ' . $obj['picture']["url"] . '</h3>';
                echo '<h3> link     = ' . $obj['link'] . '</h3>';
            }
    
                    
          echo "<br>";         
          
        } catch(Facebook\Exceptions\FacebookResponseException $e) {
          echo 'Graph returned an error: ' . $e->getMessage();
          exit;
          
        } catch(Facebook\Exceptions\FacebookSDKException $e) {
          echo 'Facebook SDK returned an error: ' . $e->getMessage();
          exit;
        }

    
    // User is logged in with a long-lived access token.
    // You can redirect them to a members-only page.
    // header('Location: https://vilh.heroku.com/members.php');

?>

</body>
</html>


If you don't have hosting for test, you can use Heroku cloud platform to test it! By upload to heroku. You can see this link (This can help you deploy any project to Heroku)



Are you interested in topic How to Create Awesome Facebook Apps in Easy Steps from Webzone Tech Tips? If you have any thoughts or questions, please share them in the comment section below. I would love to hear from you and chat about it

Webzone Tech Tips Zidane, all things tech tips web development





๐Ÿ™‡๐Ÿผ Your Feedback Is Valuable and Helpful to Us - Webzone - all things Tech Tips web development Zidane ๐Ÿ™‡๐Ÿผ
Popular Webzone Tech Tips topic maybe you will be like it - by Webzone Tech Tips - Zidane
As a student, I found Blogspot very useful when I joined in 2014. I have been a developer for years . To give back and share what I learned, I started Webzone, a blog with tech tips. You can also search for tech tips zidane on Google and find my helpful posts. Love you all,

I am glad you visited my blog. I hope you find it useful for learning tech tips and webzone tricks. If you have any technical issues, feel free to browse my posts and see if they can help you solve them. You can also leave a comment or contact me if you need more assistance. Here is my blog address: https://learn-tech-tips.blogspot.com.

My blog where I share my passion for web development, webzone design, and tech tips. You will find tutorials on how to build websites from scratch, using hot trends frameworks like nestjs, nextjs, cakephp, devops, docker, and more. You will also learn how to fix common bugs on development, like a mini stackoverflow. Plus, you will discover how to easily learn programming languages such as PHP (CAKEPHP, LARAVEL), C#, C++, Web(HTML, CSS, javascript), and other useful things like Office (Excel, Photoshop). I hope you enjoy my blog and find it helpful for your projects. :)

Thanks and Best Regards!
Follow me on Tiktok @learntechtips and send me a direct message. I will be happy to chat with you.
Webzone - Zidane (huuvi168@gmail.com)
I'm developer, I like code, I like to learn new technology and want to be friend with people for learn each other
I'm a developer who loves coding, learning new technologies, and making friends with people who share the same passion. I have been a full stack developer since 2015, with more than years of experience in web development.
Copyright @2022(November) Version 1.0.0 - By Webzone, all things Tech Tips for Web Development Zidane
https://learn-tech-tips.blogspot.com