Add Facebook Connect to your website

December 2016



Prerequisites


This tutorial requires a sound knowledge in PHP and JavaScript as these APIs are quite difficult to use. This is a basic tutorial and may contain imperfections, thank for sharing your comments.

Create your application


To access the Facebook APIs, you must register an application. Once registered, it will provide you with a secret key and an application ID that are essential to interact with.

Get PHP SDK


Download PHP SDK
Upload to your server: /src/facebook.php

Integrate Facebook Connect

Install the button


Facebook offers two ways to build your button: The XFBML method and other method. We will consider the second method, which is more flexible.

It's just a simple button to which we shall associate functions from the JavaScript SDK library.

This JavaScript code which brings together the required funtions:
<script type="text/javascript">    
function fblogout() {    
          FB.logout(function () {    
     window.location.reload(); });    
    }    
      window.fbAsyncInit = function() {    
        FB.init({    
          appId   : '<?php echo $facebook->getAppId(); ?>',    
          session : <?php echo json_encode($session); ?>,    
          status  : true,    
          cookie  : true,    
          xfbml   : true    
        });    

        FB.Event.subscribe('auth.login', function() {    
          window.location.reload();    
        });    
      };    

      (function() {    
        var e = document.createElement('script');    
        e.src = document.location.protocol + '//connect.facebook.net/fr_FR/all.js';    
        e.async = true;    
        document.getElementById('fb-root').appendChild(e);    
      }());    
          //your fb login function    
          function fblogin() {    
     FB.login(function(response) {    
              //...    
            }, {perms:'read_stream,publish_stream,offline_access'});    
   redir();    
          }    
        </script>


To initiate connection, you call the fblogin() function during the onclick event.
To disconnect you can simply call fblogout().


fblogin() : verifies that the user is connected to facebook, if you are connected it will check that you have the necessary rights. Rights are customizable: perms:'read_stream,publish_stream,offline_access'
Learn more: http://developers.facebook.com/docs/authentication/permissions

fblogout(): This function will logoff the user from Facebook.

How to retrieve data?


The following code will verify that the visitor is connected to Facebook and automatically record data to a table ($me), given that you have the necessary permissions. Note that you must write down your appid and your secret key and change the path to your facebook.php file.

require 'function/facebook/facebook.php';    
$facebook = new Facebook(array(  'appId'  => '',  'secret' => '',  'cookie' => true,));    
$session = $facebook->getSession();    
$me = null;    

if($session){    
 try {    
  $uid = $facebook->getUser();    
  $me = $facebook->api('/me');    
 }    
 catch(FacebookApiException $e){    
  error_log($e);    
 }    
} 


Note: if($session) is used to test the presence of Facebook session and if($me) to see if you have the user data

So once the data is retrieved, you will need to use then on your website:
If you have a custom registration and login system, this data can be used to intiate connection to a particular accoun
Learn more: User Registration Flows

__ To be completed __

Sources:
Facebook

Related :

This document entitled « Add Facebook Connect to your website » from CCM (ccm.net) is made available under the Creative Commons license. You can copy, modify copies of this page, under the conditions stipulated by the license, as this note appears clearly.