Integrar Facebook Connect en tu sitio web

Noviembre 2016


Prerrequisitos


En primer lugar antes de abordar este tutorial, debes disponer de un conocimiento sólido en PHP y en JavaScript ya que estas APIs son difíciles de aprender.

Registrar su Aplicación


Para gozar de las APIs de Facebook, debes registrar una aplicación. Una vez que esta aplicación esté registrada, se te abastecerá una clave secreta y un ID de aplicación que son indispensables para interactuar con Facebook.

Recuperar PHP SDK


Este enlace te ayudará en gran parte de tu trabajo:

Cárgalo en tu servidor /src/facebook.php

Integra Facebook Connect

Instalar el botón


Facebook te ofrece dos maneras de construir tu botón: el método xfbml y otro método. Estudiaremos el otro método que es más flexible.

El otro método es bastante simple, es sólo un botón simple con cual asociamos funciones provenientes de JavaScript SDK.

Te dejamos un código JavaScript, que reúne lo esencial de lo que se necesita para hacer tu botón:

<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>


En este nivel es muy simple, para conectarte utiliza la función fblogin()en el momento del "clic" (onclick). Para desconectarse bastará con utilizar fblogout().


¿Concretamente qué van a hacer estas funciones?
  • fblogin(): verifica que el usuario esté conectado a Facebook, si estás conectado verificará que dispones de los derechos necesarios. Los derechos son personalizables: perms:'read_stream,publish_stream,offline_access' para modificar con éste artículo de referencia
  • fblogout(): Esta función desconectará al usuario de Facebook.

Recuperar los datos


Primero es necesario recuperar los datos, el código siguiente va a verificar que el visitante esté bien conectado a Facebook. Si éste es el caso y si tienes los permisos los datos automáticamente son registrados en un cuadro ($me).

Nota: debes anotar tu appid y tu clave secreta así como cambiar la ruta de tu archivo facebook.php.

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);    
 }    
} 

Observación: if($session) para someter a un test la presencia de sesión Facebook e if($me) para saber si dispones de datos del usuario.

Luego de recuperar los datos debes utilizarlos según tu sitio, como crear una cuenta miembro o servirte de ello para conectarte.

Si dispones de tu propio sistema de inscripción y de conexión entonces te servirá sólo de conexión si no puedes utilizarlo como sistema de inscripción.

Supongamos que te sirve solamente como un sistema de conexión, en la recepción de los datos debes verificar si conoces a este miembro y el método más simple es verificar la existencia del email en tu base. Si el usuario es inscrito entonces sólo tienes que a crear variables de sesiones como lo harías con tu propio sistema de conexión
  • Este artículo te presenta las etapas esenciales para tu sistema de conexión.

Problema que podrías encontrar


"¿Cómo saber que el usuario se desconectó de Facebook?"

En un mundo perfecto someteríamos a un test solamente la presencia de la variable $me y si no existe destruimos las variables de sesión. Pero como la vida no es perfecta y como decidiste tener 2 sistemas de conexión y que haciendo esto desconectarás a los usuarios que se conectaron sin Facebook (ya que $me no existe en este caso).

Entonces lo más simple es crear una variable de sesión $_SESSION['facebook'] que atestiguaría que te has conectado mediante Facebook. Y si esta sesión existe pero la variable $me no, esto quiere decir que el usuario se había conectado mediante Facebook y se desconectó después de que lo desconectamos.


Fuente: Facebook Developer

Consulta también :
El documento «Integrar Facebook Connect en tu sitio web » de CCM (es.ccm.net) se encuentra disponible bajo una licencia Creative Commons. Puedes copiarlo o modificarlo siempre y cuando respetes las condiciones de dicha licencia y des crédito a CCM.