Do not speak Spanish? Read this post in English.

Viernes, 29 d octubre d 2010.

Crear una aplicación con Facebook Graph Api, en modo IFrame

Y después del post sobre como crear una aplicación con la nueva Facebook Graph api en modo FBML le toca al turno a la aplicación del modo IFrame, que sin duda poco a poco va teniendo más sentido dado que Facebook va a terminar por eliminar la posibilidad de crear aplicaciones FBML en su sistema. La verdad es que este post lleva escrito un tiempo pero pro problemas entre mi Facebook y mi hosting no funcionaba bien el ejemplo. Espero que a día de hoy esto esté resuelto y pido disculpas si os provoca problemas el ejemplo al visitarlo.

El modo IFrame en las aplicaciones de Facebook se caracteriza porque la aplicación pasa a estar realmente en tu propia página web y Facebook simplemente muestra un IFrame (un marco) en su sistema con el que cargar tu web. Facebook, con sus últimos cambios pasa a recomendar este sistema para que los desarrolladores se pongan las pilas y creen sus aplicaciones al mismo tiempo como aplicaciones de Facebook y como webs que usan Facebook como base. Así pues, esta pequeña explicación irá en este sentido: la posibilidad de crear una aplicación que valga a la vez para ser cargada en Facebook o en nuestra propia web.

Antes de seguir dejar también claro que voy a centrarme en mostrar la parte de servidor de la aplicación. Las buenas aplicaciones IFrame suelen valerse de un SDK de servidor y al mismo tiempo incorporan el SDK javascript para las acciones en la parte de cliente: etiquetas FBML, acciones de login, solicitudes, etc. Como solo vamos a tratar con la parte del servidor nos veremos forzados a no usar etiquetas FBML y tratar el login de usuario sin ventanas modales ni popUps.

Si quieres aprender un poco sobre el SDK javascript de Facebook puedes consultar este mismo blog para ver un ejemplo de uso del SDK javascript de Facebook.

1. Configurando nuestra aplicación en el panel de Facebook

Empezamos como siempre ( puedes ver los pasos para crear tu aplicación en el tutorial de Facebook de este blog ): Con un usuario de Facebook creamos nuestra nueva aplicación dándonos de alta en la aplicación de desarrolladores. A partir de ahi configuramos nuestra aplicación como sigue:

  • En la sección "Acerca de" escribimos los datos de nuestra app. Estos datos no van a afectar a la programación de la aplicación aunque es importante tomarse algunos minutos en rellenarlos.
  • La sección "Web Site" es donde configuramos nuestra web como una aplicación separada de Facebook (como con el antiguo Facebook Connect). Aquí debemos completar al menos el campo "Site URL", donde indicaremos la url de inicio nuestra aplicación en nuestro servidor.
  • La sección "Facebook Integration", es la que trata la aplicación cuando es visualizada dentro de Facebook. Rellenamos "canvas URL" también con la URL donde queda la aplicación en nuestro servidor y así ambas partes responderán con el mismo código. Aparte de esto, marcamos "Canvas Type" como "Iframe" y seleccionamos el tamaño de Iframe que deseemos.
  • El resto de las secciones podemos dejarlas como vienen por defecto

Ahora pasamos a descargar el SDK de servidor que queramos usar para nuestro desarrollo. La lista de SDK's disponibles la podemos encontrar en este enlace. Para los ejemplos de este artículo usamos la facebook PHP SDK. Nos la bajamos y la incluimos -con un "include()"- en el flujo de todas las páginas que vaya a ir cargando la aplicación.

A partir de aquí ya podemos empezar a escribir el código PHP de nuestra aplicación. Este lo subiremos a la carpeta que hemos indicado como "canvas URL" y como "Site URL" que es donde Facebook va a ir a buscar la interacción con nuestra aplicación.

2. Creando el objeto $facebook

Para crear nuestro objeto facebook, basta con incluir el facebook PHP SDK al principio de nuestro código y llamar a la clase "Facebook". A esta le pasaremos 3 parametros en un array numérico:

- appId, es el id numérico que le da Facebook a nuestra aplicación.
- secret, es el código secreto (que no debe ser publicado) que nos permite identificar las conexiones.
- cookie, es un valor con el que indicar si se aceptan sesiones por cookie o no. Por defecto es mejor marcarlo a "true" para que una vez cargada la sesión de usuario esta se maneje por cookies.

Así pues nuestro código quedará así:

require 'facebook.php';
/*
Los datos de configuración los sacamos...
- De La página de resumen de nuestra aplicacion
- De la pestaña de configuracion "Facebook Integration"
- Viendo el código de ejemplo que nos ofrece facebook.
*/
 
$facebook = new Facebook(array(
  'appId'  => '123456789012', // Id. de aplicación
  'secret' => '1234567890abcdef1234567890abcde', // Aplication Secret|Clave Secreta
  'cookie' => true
));

3. Creando la sesión de usuario en Facebook con Facebook Graph Api y el PHP SDK

Una vez tenemos la clase iniciada tenemos que identificar al usuario actual en ella para poder rescatar e interactuar con sus datos. Con la sesión iniciada la clase de Facebook podrá hacer las consultas a Facebook incluyendo un código especial -llamado token- en las peticiones. Este código es la base de la conexión con Facebook -llamada OAuth2.0- y sin él nuestro desarrollo no accederá a ningún dato del usuario.

Empezamos por una declaración muy simple...

// Extraemos la sesión, sin ella Facebook graph no va a funcionar
$fbSession = $facebook->getSession();

Esto informará en "$fbSession" de si la sesión ha sido iniciada o no. Sin embargo, esto no crea la sesión por si sola. Al estar trabajando en nuestra propia página la sesión tiene que venir dada o bien por URL o bien por coockies. La forma más corriente de conseguir esta sesión es mediante el SDK Javascript que lanza directamente un popUp de login, sin embargo como hemos dicho que vamos a intentar prescindir de este, lo que haremos será redirigir al usuario hacia el sistema de Login de Facebook para que este nos lo devuelva con las variables de sesión.

Aquí vamos a tener que diferenciar 2 formas distintas de hacerlo puesto que estamos creando una aplicación que funciona al mismo tiempo dentro y fuera de Facebook la forma de dirigir al usuario no será la misma. Así que antes de nada deberemos detectar en nuestro sistema si el usuario está viendo nuestra aplicación a través de Facebook o directamente en nuestra web. Un ejemplo de como hacerlo sería mediante el Rererrer:

if ( substr(strtolower($_SERVER['HTTP_REFERER']),0,24) == 'http://apps.facebook.com')
{
 // aplicación dentro de facebook
}
else
{
 // aplicación cargada directamente
}

Otra forma sería examinando si facebook nos ha enviado la variable "fb_sig_in_iframe", que envía siempre (queramos o no) cuando carga a través de iframe una app:

if ( isset($_GET['fb_sig_in_iframe']) && $_GET['fb_sig_in_iframe'] == 1 )
{
  // aplicación dentro de facebook
}
else
{
  // aplicación cargada directamente
}

3.1 Cargando la sesión de usuario desde dentro de Facebook

Solucionado esto, pasemos a ver como logar al usuario cuando este lanza nuestra aplicación. El SDK de PHP nos permite usar el método "getLoginUrl" para crear urls de login a las que dirigir al usuario. Este recibe varios posibles parámetros a través de un array asociativo. Veamos cuales necesitamos.

- canvas y fbconnect: nos indica si la forma de cargar la aplicación.
- next: nos indica la url a la que volverá el usuario cuando termine de identificarse
- cancel_url: En el caso de pedir permisos al usuario y este negarlos, esta es la url a la que se devolverá al usuario cuando termine de identificarse
- req_perms: Nos permite pedir permisos especiales al usuario (lo veremos más tarde)

Una vez tengamos la url a la que dirigir al usuario, con javascript le redirigiremos a esta directamente. El usuario ya está en facebook y acaba de pedir entrar en una aplicación con lo que no le sorprenderá que directamente se le identifique.

// Desde Facebook:
  	
// Usamos la funcion getLoginUrl para conseguir el link de login
// Las urls de vuelta tendrán que ser entonces las de Facebook
$url = $facebook->getLoginUrl(array(
  'canvas' => 1,
  'fbconnect' => 1,
  'next' =>  'http://apps.facebook.com/ikpruebas-iframe/', // indicamos la url de la app
  'cancel_url' =>  'http://apps.facebook.com/ikpruebas-iframe/', // indicamos la url de la app
  'req_perms' => 'read_stream,publish_stream' // Más permisos en: http://developers.facebook.com/docs/authentication/permissions
));
// Redirect a la página de login y permisos de Facebook
echo "<script type='text/javascript'>top.location.href = '$url';</script>";
// usamos "top" para que sea toda la página la que se redirija y no solo el iframe

3.2 Cargando la sesión de usuario desde el acceso directo a nuestra web

Este caso es bastante parecido, pero con algunos pequeños cambios:

- Para empezar la url de vuelta de "next" y "cancel_url" será la de nuestro servidor en vez de la de la app, puesto que el usuario quería entrar en nuestro dominio y por tanto no tiene mucho sentido que acabe dentro de facebook.
- Aparte de esto, si bien es posible crear un redirect (php o javascript) al usuario directamente esto también podría asustarle... Imagina que estás en una web y al entrar en una sección de golpe te pide permisos de Facebook, da miedo, ¿no crees? Por eso creo que es mucho mejor mostrar al usuario una página donde se le explique que va a ser conectado con Facebook y al final de esta un link para conectarse.

// Fuera de Facebook:
  	
// Usamos la funcion getLoginUrl para conseguir el link de login
// Las urls de vuelta tendrán que ser entonces las de nuestro site, no las de Facebook
$url = $facebook->getLoginUrl(array(
  'canvas' => 0,
  'fbconnect' => 1,
  'next' =>  'http://blog.ikhuerta.com/donde-voy/prueba-iframe/',
  'cancel_url' =>  'http://blog.ikhuerta.com/donde-voy/prueba-iframe/',
  'req_perms' => 'read_stream,publish_stream' // Más permisos en: http://developers.facebook.com/docs/authentication/permissions
));
// Página para con explicación de que va a ser conectado y un link para logarnos en Facebook. En este ejemplo solo mostramos el link...
echo "<a href='$url'>Conectarse con Facebook</a>";

4. Pidiendo permisos al usuario con Facebook Graph Api y el PHP SDK

Los permisos son accesos a información o acciones que los usuarios dan a nuestras aplicaciones. Por defecto no podemos hacer mucho más que consultar el nombre del usuario y algunos de sus datos. Pero podemos preguntarle a este si nos permite hacer otras cosas con su cuenta. Estos permisos van desde acciones simples como permitir a la aplicación ver las fotos del usuario hasta controlar totalmente la cuenta del usuario en cualquier momento desde dentro y fuera de Facebook. Es preciso examinar que permisos vamos a necesitar para que nuestra aplicación haga lo que nosotros deseamos y pedirle al usuario tan solo estos permisos... de otra forma podemos perder demasiados usuarios en el proceso.

Los distintos tipos de permisos, así como las acciones que nos permite hacer los usuarios al aceptarlos quedan descritos en esta página.

Como hemos visto al identificar al usuario podemos usar la variable "req_perms" para que se soliciten los permisos al usuario en ese mismo momento. Nada tan simple como añadir separados por comas los distintos permisos que necesitamos y Facebook se encargará de solicitarlos -pero solo si no los tenemos ya-.

El problema con los permisos no viene tanto por pedirlos como por controlar si los tenemos antes de hacer nada que no nos esté prohibido. Pero eso lo veremos dentro de unos pocos párrafos...

5. Solicitando datos a la Facebook Graph Api con el PHP SDK

La nueva Facebook Graph Api ha simplificado mucho la forma de hacer peticiones. Básicamente tenemos que ir formando los nodos sobre los que queremos ir accediendo en forma de url. Con esta uri montada llamaremos al método "api()" que nos devolverá un array con la información solicitada. La documentación de la Graph api es bastante clara con lo que no deberías tener serios problemas para entenderla. Por ejemplo:

  • "/me" Me dará la información del usuario logado.
  • "/me/friends" Me dará información de quienes son sus amigos.
  • "/me/feed" me dará los mensajes en su muro...

A partir de esta información yo puedo ir anidando una petición tras otra hasta encontrar lo que busco. Primero podría sacar mi lista de amigos y de ahí, con su id, solicitar cualquiera de sus datos (siempre que tenga permiso para acceder al él).

En el tutorial para crear aplicaciones de Facebook en modo FBML, lo que hicimos fue sacar la información del usuario y las fotos de sus amigos. En este ejemplo, puesto que como no hemos usado el SDK Javascript no disponemos de FBML simplemente sacaremos el nombre del usuario y el de sus amigos (nada de fotos), si quieres ver el mismo ejemplo con FBML mira dicho tutorial...

// Usando la Api
// miramos si hay sesión iniciada
if ($fbSession )
{ 
  // el php sdk usa excepciones php así que al usarlo lo hacemos dentro de un try para capturarlas...
  // si no sabes usarlas simplemente copia el formato del código
  try 
  {
    // accedemos a los datos del usuario logado...
    $me = $facebook->api("me");
    echo "<h3>Hola ". $me['name'] . "</h3>";
		
    // Y luego a los datos de sus amigos...		
    $myFriends = $facebook->api("me/friends");
    echo "<p>Estos son tus amigos: </p><p>";
    foreach ($myFriends['data'] as $friend)
    {
      echo $friend['name'] . " - ";
    }		
    echo "</p>";
  }
  catch (FacebookApiException $e) 
  {
    // Aqui escribe tus propias funciones para capturar el error de la excepcion "$e"
    var_dump($e);
  }
}

6. Creando un mensaje en el muro del usuario que usa nuestra aplicación

Ahora veremos como publicar contenido en el muro de los usuarios. Pero antes recordemos el tema de las excepciones: No se puede publicar en el muro de los usuarios si estos no nos han dado permiso para hacerlo. Por este motivo antes de hacer este tipo de acciones es necesario comprobar si nuestra aplicación tiene los permisos necesarios para hacerlo.

Desgraciadamente, la parte de Facebook Graph api no nos deja consultar los permisos de un usuario por lo que la forma más cómoda que tenemos para hacerlo en cualquier momento es usando la API FQL. Esta es una parte de la api que nos permite consultar datos más rebuscados a modo de sentencias SQL. Por suerte para nosotros el SDK PHP también nos permite lanzar este tipo de consultas. Para ello solo tenemos que lanzar la llamada al método api() como un array en el que le indicamos el método "fql.query" y la query que queremos lanzar. Veamos un ejemplo de como solicitar el nombre del usuario de esta forma:

$user_name = $facebook->api(array(
  'method'     => 'fql.query',
  'query'     => "SELECT name FROM user WHERE uid = me()", // or "SELECT name FROM USER WHERE uid = ".$me['id']
  'callback'    => ''
));

Ligeramente más dificil, ¿verdad? Es por esto que yo recomendaría usar para la mayor parte de los datos la Graph Api y solo cuando se necesiten datos secundarios, del sistema o con relaciones complejas usar FQL.

Podéis ver un detalle de todos los tipos de datos accesibles con FQL -y comprobar que son muchos más que con la Graph APi- en este enlace.

Volviendo al tema que nos ocupa, los permisos, veamos como rescatarlos con FQL:

// tablas y campos FQL en: http://developers.facebook.com/docs/reference/fql/
// los nombres de los permisos en: http://developers.facebook.com/docs/authentication/permissions
$fbperms = $facebook->api(array(
  'method'     => 'fql.query',
  'query'     => "SELECT publish_stream,user_likes FROM permissions WHERE uid = me()", // or "SELECT PERMISSION_NAME FROM permissions WHERE uid = ".$me['id']
  'callback'    => ''
));
if ( isset($fbperms[0]["publish_stream"]) && $fbperms[0]["publish_stream"] == 1 ) 
{
  // tenemos permisos para publicar en el muro
}
else
{
  // no los tenemos :(
}

Ahora sí! Ya estamos preparados para intentar publicar en el muro del usuario con Graph Api. Para hacer la publicación usaremos también el método "api()" solo que en este caso en vez de incluirle una sola variable tendremos que pasarle 3:

  • La url en el formato de Facebook Graph que indica a que nos referimos
  • El método de la llamada, en este caso POST, porque enviamos datos
  • Los datos que enviamos en forma de array

Veamos como quedaría entonces la comprobación de permisos junto con la publicación en el muro del usuario:

$fbperms = $facebook->api(array(
  'method'     => 'fql.query',
  'query'     => "SELECT publish_stream,user_likes FROM permissions WHERE uid = me()", // or "SELECT PERMISSION_NAME FROM permissions WHERE uid = ".$me['id']
  'callback'    => ''
));
		
if ( isset($fbperms[0]["publish_stream"]) && $fbperms[0]["publish_stream"] == 1 ) // comprobamos si tenemos permisos de publish_stream (para publicar en el muro)...
{
  $newPostId = $facebook->api( '/me/feed', 'POST', array ( 
    // vars at http://developers.facebook.com/docs/reference/api/post 
    'message' => 'Estoy aprendiendo a usar la API de facebook en modo Iframe',
    'link' => 'http://blog.ikhuerta.com/crear-una-aplicacion-con-facebook-graph-api-en-modo-iframe', 
    'name' => 'Tutorial para aprender a usar la facebook graph api en modo Iframe'
  ));
  echo "<h2>Se ha publicado un mensaje en el muro del usuario</h2>";
}
else
{
  echo "<h2>No se ha podido publicar nada: El usuario no ha dado permiso a esta aplicación para publicar en su muro</h2>";
}

Y se acabó

Con esto ya puedes empezar a dar forma a tus aplicaciones IFrame en Facebook. Si quieres ver la aplicación de este tutorial puedes hacerlo visitando...

Recuerda que en realidad son la misma aplicación 😉

Nota: los servidores de OVH (donde está alojado este blog) están teniendo serios problemas con las llamadas a la api de facebook :( , por ese motivo es posible que de vez en cuando aparezca un error al cargar la aplicación. En caso de que suceda, por favor, recarga la página un par de veces hasta que desaparezca.

El código

También puedes copiar todo el código de la aplicación para crear la tuya propia a partir de aquí:

<?php
// Config: 
// Página "Acerca de" Como se desee, no afecta a la aplicación.
// Pagina "Web Site" debemos indicar Site URL con la url de nuestra aplicación.
// Página "Facebook Integration", rellenamos canvas URL con la carpeta donde está nuestro index.php // Canvas Type lo pasamos a Iframe.
// El resto lo dejamos por defecto.

// Preparando e iniciando la clase de facebook SDK
require 'facebook.php';
/*
Los datos de configuración los sacamos...
- De La página de nuestra aplicacion
- De la pestaña de configuracion "Facebook Integration"
- Viendo el código de ejemplo que nos ofrece facebook.
*/

$facebook = new Facebook(array(
  'appId'  => '123456789012', // Id. de aplicación
  'secret' => '1234567890abcdef1234567890abcde', // Aplication Secret|Clave Secreta
  'cookie' => true
));

// Extraemos la sesión, sin ella no sabremos si graph va a funcionar
$fbSession = $facebook->getSession();

// Si no tenemos sesión: Forzamos la sesión y pedimos permisos al usuario...
if (!$fbSession)
{
  // Vemos si el usuario está cargando nuestra aplicación desde Facebook	
  if ( substr(strtolower($_SERVER['HTTP_REFERER']),0,24) == 'http://apps.facebook.com')
  // también nos sirve: if ( isset($_GET['fb_sig_in_iframe']) && $_GET['fb_sig_in_iframe'] == 1 )
  {
    // Aplicación cargada desde Facebook:
  	
    // Usamos la funcion getLoginUrl para conseguir el link de login
    // Las urls de vuelta tendrán que ser entonces las de Facebook
    $url = $facebook->getLoginUrl(array(
      'canvas' => 1,
      'fbconnect' => 1,
      'next' =>  'http://apps.facebook.com/ikpruebas-iframe/',
      'cancel_url' =>  'http://apps.facebook.com/ikpruebas-iframe/',
      'req_perms' => 'read_stream,publish_stream' // Más permisos en: http://developers.facebook.com/docs/authentication/permissions
    ));
    // Redirect a la página de login y permisos de Facebook
    echo "<script type='text/javascript'>top.location.href = '$url';</script>";
  }	
  else
  {
    // Fuera de Facebook:
  	
    // Usamos la funcion getLoginUrl para conseguir el link de login
    // Las urls de vuelta tendrán que ser entonces las de nuestro site, no las de Facebook
    $url = $facebook->getLoginUrl(array(
      'canvas' => 0,
      'fbconnect' => 1,
      'next' =>  'http://blog.ikhuerta.com/donde-voy/prueba-iframe/',
      'cancel_url' =>  'http://blog.ikhuerta.com/donde-voy/prueba-iframe/',
      'req_perms' => 'read_stream,publish_stream' // Más permisos en: http://developers.facebook.com/docs/authentication/permissions
    ));

    // Página para con un link para logarnos en Facebook. En este ejemplo solo mostramos el link...
    echo "<a href='$url' target='_top'>Conectarse con Facebook</a>";
  	
    // También podríamos lanzar:
    // header( 'Location: ' . $url );
    // pero creo que quedaría extraño entrar en una web y ver Facebook de golpe...
  }
  die(); // un die, para parar el proceso, hay formas más elegantes, pero esto es un script 😉
}

// Con sesión ya iniciada...
echo "<h1>Ejemplo Aplicacion de Facebook</h1><p>M&aacute;s info en <a href='http://blog.ikhuerta.com/crear-una-aplicacion-con-facebook-graph-api-en-modo-iframe'>el blog de ikhuerta</a></p>";

// Usando la Api
if ($fbSession )
{ 
  try 
  {
    // accedemos a los datos del usuario logado...
    $me = $facebook->api("me");
    echo "<h3>Hola ". $me['name'] . "</h3>";

    // Y luego los datos de sus amigos
    $myFriends = $facebook->api("me/friends");
    echo "<p>Estos son tus amigos: </p><p>";
    foreach ($myFriends['data'] as $friend)
    {
      echo $friend['name'] . " - ";
    }		
    echo "</p>";
    
    // Pedimos permisos	 al usuario
    // FQL tables and fields reference at: http://developers.facebook.com/docs/reference/fql/
    // Permission Names at: http://developers.facebook.com/docs/authentication/permissions
    $fbperms = $facebook->api(array(
      'method'     => 'fql.query',
      'query'     => "SELECT publish_stream,user_likes FROM permissions WHERE uid = me()", // or "SELECT PERMISSION_NAME FROM permissions WHERE uid = ".$me['id']
      'callback'    => ''
    ));
		
    if ( isset($fbperms[0]["publish_stream"]) && $fbperms[0]["publish_stream"] == 1 ) // comprobamos si tenemos permisos de publish_stream (para publicar en el muro)...
    {
      $newPostId = $facebook->api( '/me/feed', 'POST', array ( 
	  	// vars at http://developers.facebook.com/docs/reference/api/post 
        'message' => 'Esto se ha escrito automaticamente con la API',
        'link' => 'http://blog.ikhuerta.com/crear-una-aplicacion-con-facebook-graph-api-en-modo-iframe', 
        'name' => 'Aprende a usar la API de facebook en Modo Iframe'
      ));
      echo "<h2>Se ha publicado un mensaje en el muro del usuario</h2>";
    }
    else
    {
      echo "<h2>No se ha podido publicar nada: El usuario no ha dado permiso a esta aplicación para publicar en su muro</h2>";
    }
  }
  catch (FacebookApiException $e) 
  {
    // Aqui escribe tus propias funciones para capturar el error de la excepcion "$e"
    var_dump($e);
  }
}
?>

Temas Relacionados: programacion tutoriales

Autor:

80 Comentarios para “Crear una aplicación con Facebook Graph Api, en modo IFrame”

  1. Alejandro dice:

    Muy interesantes tus posts, parte del PFC que tengo que hacer es una app para facebook, que me recomiendas FBML o iframe (la acabaré antes de año?. Y otra cosa, como puedo hacer que para publicar el mensaje me salga el popup pudiendole poner el comentario yo?

    Gracias

    • ikhuerta dice:

      Si solo es una y no es muy compleja en cuanto a usuarios y bbdd te recomendaria fbml puesto que ahi la interpretacion de las etiquetas fbml es automatica y cosas como el popup que pides se resuelven con pequeños añadidos a la etiqueta form.

      En cuanto a iframe te va a permitir más libertad, la posibilidad de tener tu version fuera de fb y además lo aprendido te servira el año que viene si te animas a hacer nuevas. Para cosas como popups mirate el sdk javascript (tienes un ejemplo funcionando en este blog). Veras que puedes lanzar facilmente este tipo de cajas como ventana nueva. Una vez ahi con modificar esa orden por un iframe modal ya lo tendrias.

  2. Julian dice:

    Me sale un error cuando copio esta pagina y hago la prueba en el facebook... He puesto el facebook.php en el servidor y lo ecuentra, la cuestion es que no me muestra la lista de amigos y no me publica en mi muro... me dice:

    object(FacebookApiException)#2 (7) { ["result:protected"]=> array(2) { ["error_code"]=> int(6) ["error"]=> array(2) { ["message"]=> string(42) "Couldn't resolve host 'graph.facebook.com'" ["type"]=> string(13) "CurlException" } } ["message:protected"]=> string(42) "Couldn't resolve host 'graph.facebook.com'" ["string:private"]=> string(0) "" ["code:protected"]=> int(6) ["file:protected"]=> string(56) "/home/vol11/byethost5.com/b5_6628390/htdocs/facebook.php" ["line:protected"]=> int(557) ["trace:private"]=> array(4) { [0]=> array(6) { ["file"]=> string(56) "/home/vol11/byethost5.com/b5_6628390/htdocs/facebook.php" ["line"]=> int(522) ["function"]=> string(11) "makeRequest" ["class"]=> string(8) "Facebook" ["type"]=> string(2) "->" ["args"]=> array(2) { [0]=> string(29) "https://graph.facebook.com/me" [1]=> array(2) { ["method"]=> string(3) "GET" ["access_token"]=> string(96) "153245684718137|2.QByFATDAJEq83I1_lyqFzQ__.3600.1288573200-622277859|Q01ms9948Vsow7VUbuPvGPhX2q4" } } } [1]=> array(6) { ["file"]=> string(56) "/home/vol11/byethost5.com/b5_6628390/htdocs/facebook.php" ["line"]=> int(490) ["function"]=> string(13) "_oauthRequest" ["class"]=> string(8) "Facebook" ["type"]=> string(2) "->" ["args"]=> array(2) { [0]=> string(29) "https://graph.facebook.com/me" [1]=> array(1) { ["method"]=> string(3) "GET" } } } [2]=> array(6) { ["file"]=> string(56) "/home/vol11/byethost5.com/b5_6628390/htdocs/facebook.php" ["line"]=> int(443) ["function"]=> string(6) "_graph" ["class"]=> string(8) "Facebook" ["type"]=> string(2) "->" ["args"]=> array(1) { [0]=> string(2) "me" } } [3]=> array(6) { ["file"]=> string(53) "/home/vol11/byethost5.com/b5_6628390/htdocs/index.php" ["line"]=> int(80) ["function"]=> string(3) "api" ["class"]=> string(8) "Facebook" ["type"]=> string(2) "->" ["args"]=> array(2) { [0]=> array(2) { [0]=> &object(Facebook)#1 (7) { ["appId:protected"]=> string(15) "153245684718137" ["apiSecret:protected"]=> string(32) "1dd98874c6d793893030e50e103703a7" ["session:protected"]=> array(6) { ["session_key"]=> string(52) "2.QByFATDAJEq83I1_lyqFzQ__.3600.1288573200-622277859" ["uid"]=> string(9) "622277859" ["expires"]=> int(1288573200) ["secret"]=> string(24) "nptNBtH4qyALwWVcYV5uVg__" ["access_token"]=> string(96) "153245684718137|2.QByFATDAJEq83I1_lyqFzQ__.3600.1288573200-622277859|Q01ms9948Vsow7VUbuPvGPhX2q4" ["sig"]=> string(32) "846b10eb730e8e73b407f7a208df233c" } ["signedRequest:protected"]=> NULL ["sessionLoaded:protected"]=> bool(true) ["cookieSupport:protected"]=> bool(true) ["baseDomain:protected"]=> string(0) "" } [1]=> string(6) "_graph" } [1]=> array(1) { [0]=> string(2) "me" } } } } }

    y he puesto el numero de aplicacion y la clave... Les pido el favor de ayudarme a resolver este lio... el facbook.php que pongo es el sdk php v2 1.2... Gracias

  3. Angel dice:

    Hola Iñaki, muy interesante tu artículo, preparándonos para el año que viene. Estoy muy interesado en este tema, pero soy autodidacta y ya sabes...
    Si me permites una consulta,el código me da el siguiente error:
    Parse error: parse error, unexpected '{' in /var/www/vhost/staedler.org/home/html/fb/app_comentarios/index.php on line 77
    es esta:
    try
    { <<<<<<<< línea 77

    La URL: http://apps.facebook.com/sdcomenta/
    Mi servidor tiene: PHP 4.3.9, eso es una mala noticia ¿no?
    ¿se puede solucionar?

    Muchas gracias por tu atención.
    Un abrazo, Angel

  4. Marc dice:

    Tengo el mismo problema que Julian, el código se ha ejecutado correctamente en la primera visita, pero en la segunda daba este error:

    object(FacebookApiException)#2 (8) { ["result":protected]=> array(1) { ["error"]=........

    quizás sea algo de sesión, voy a ver...

  5. Marc dice:

    El error sucede siempre en google crome. En Explorer me funciona bien!
    Alguin sabe què sucede?
    Bueno, muchas gracias!!

  6. Marc dice:

    Bueno, ya lo he solucionado!! Era una tonteria, he borrado cookies, navegación etc de google chrome.... y por fin me funciona correctamente!! Muchissimas gràcias!!

  7. jordi dice:

    Hola :
    Haber si alguien le da el mismo error que a mi y sabe cual es la solución se lo agredecere

    lanzo mi aplicacion :
    http://apps.facebook.com/numerologico/

    y me responde con una pantalla de error :

    <?php

    if (!function_exists('curl_init')) {
    throw new Exception('Facebook needs the CURL PHP extension.');
    }
    if (!function_exists('json_decode')) {
    throw new Exception('Facebook needs the JSON PHP extension.');
    }

  8. mendu dice:

    buenas, estoy empezando una aplicacion con los ejemplos que as puesto y a la hora de logearse me redirecciona al sitio de facebook donde me deberia decir que tipo de permisos requiere y no, me esta mostrando un mensaje de facebook "Error mientras se cargaba la página".El codigo es sencillo aunque no entiendo muy bien el tema de 'next' => 'http://apps.facebook.com/ikpruebas-iframe/',
    'cancel_url' => 'http://apps.facebook.com/ikpruebas-iframe/',

    son la misma direccion entonces ahi gestionara si se ha logueado con exito o no supongo. Y por la parte de la configuracion de facebook creo que tenerlo todo correcto, antes en fbml no tenia ningun problema pero ahora en iframe me esta costando un poco. gracias de antemano

  9. mendu dice:

    pues si, la configuracion de facebook no estaba completada del todo. en la parte de Site URL y Site Domain no estaba bien definida, ahora va perfecto. gracias

  10. Buen dia estoy haciendo una aplicacion http://apps.facebook.com/hotnutizate_staging/ funciona correctamente pero cuando un usuario intenta entrar le muestra un logo de facebook y al dar lcick en el ya pide los permisos de la aplicacion y posteriormente entra ala aplciaicon mepodrian decir como evitar eso?

    Saludos

  11. ikhuerta dice:

    A ver si puedo resolver algunas dudas, pero antes de nada recordar a todo el mundo:

    ESTO ES UN POST DE INICIO NO UN FORO DE SOPORTE A LA API

    Tendriais mucha mças ayuda acudiendo a los foros de facebook con vuestras dudas.

    Dicho esto, contesto lo que veo directamente:

    Julian:

    Tal y como te dice la excepcion: Couldn't resolve host 'graph.facebook.com'

    TU servidor tiene problemas para encontrar a grah.facebook.com. Esto le esta pasando a algunos hostings... cambia de hosting o espera a que lo resuelvan. No es tu culpa, no puedes hacer nada.

    Yo mismo he tendido ese problema con mi hosting y me espere y ahora va mejor.

    Angel,

    Efectivamente el SDK PHP estça hecho para PHP5. Creo que harias mejor buscando suporte para PHP5 que intentando cambiar las funciones por otras compatibles con PHP4

    Marc,

    Me alegro de que lo solucionases tu solo. Cuidado que esto se basa todo en Coockies. Es una buena costumbre ir borrandolas para desarrollar.

    Jordi,

    Las excepciones son bastante claras: no tienes los modulos de curl ni json instalados en tu servidor. Instalalos o mira que alguien te los instale. Estos dos modulos son casi obligatorios a dia de hoy para usar distintas apis.

    Medu,

    Esos dos campos son lo mas importante de la configuracion. Hay que vigilarlos siempre. Sobre las dos urls que se indican en el array que dices son para decirle a facebook a donde tiene que llevar el usuario si acepta permisos y a donde si no los acepta. Asi puedes hacer paginas de gracias por aceptarlos o avisos del tipo "como no has aceptado la apliacion no va a funcionar"

    Alejandro,

    Mira si estas diferenciando correctamente si el usuario entra mediante facebook o directamente? Si entrro en tu aplicacion directamente la cosa funciona perfectamente, sonde muestra ese mensaje es al cargarlo dentro de facebook. Creo que en vez de hacer la redireccion con javascript cuando estas dentro de facebook para que cambie toda la pagina y no solo el iframe la estas haciendo siempre con php con lo que facebook se encuentra con que tiene que cargarse a si mismo dentro del iframe y muestra esa ventana en la que deberia (para que no haya un bucle).

  12. Muchisimas gracias XD, no creas que no busque en el foro de facebook pero no encontraba respuestas, me has salvado lo resolvi como me recomendaste una redireccion de js a la pagina principal XD, de nuevo muchas gracias.

    Saludos

  13. Jean Rodriguez dice:

    Hola, a mi me gustaría hacer algo parecido, quisiera poder enviarle a los usuarios de mi aplicación de Facebook, actualizaciones en su muro. Es decir, que yo, desde una pagina web externa o desde mi aplicación facebook, pueda publicar contenido en el muro de aquellas personas que usan mi aplicacion. Como podria hacer esto? Es muy dificl o con pequeños cambios se podria hacer? Gracias por la Ayuda.

  14. Jordi dice:

    Gracias ikehuerta.
    Efectivamente tengo desactivados los modulos cURL y JSON y segun me comenta el adminstrador del servidor , son módulos insergurs y por tanto no me los quiere actvar.
    Solución cambiar de servidor

    De momento lo he resuelto así :
    http://apps.facebook.com/numerologico/
    al pulsar sobre el se abre la apliación.

    PD :Animos que gracias a personas como tú podemos ir avanzando, ya que la documentación de fb está en inglés y es problemática.

  15. Gonzalo dice:

    Hola, primero que nada, felicitaciones por el espacio que tenes, viene genial para uno poder informarse y realizar sus propias aplicaciones.

    Bueno, yo me he leído el ejemplo y lo adapte a mis necesidades, quisiera pedirte tu pequeña ayuda, pues es solamente con un detalle y se que con esto también podrás ayudar a muchas personas que tienen el mismo problema. Se trata de poner variables dentro del array para publicar en el muro, pues ahí es donde he estado probando desde hace 3 días y no he dado con una solución.

    Por Ejemplo:

    $var= "hola"
    /****************************************************************/
    'message' => 'Esto se ha escrito automaticamente con la API',
    'link' => 'http://blog.ikhuerta.com/',
    'name' => 'Aprende a usar la API de facebook en Modo Iframe'
    /****************************************************************/
    Lo que quiero es colocar esa variable $var, o sea mostrarla dentro de MESSAGE, pero no me ha el contenido.

    Agradezco tu respuesta pues he estado buscando por todos lados, he intentado, pero no he podido.

  16. Pedro dice:

    Hola Iñaki.
    Soy desarrollador de ASP Clásico y me gustaria saber si existe un SDK de Facebook para ASP. Si no existiera me recomiendas que utilize el de Java Script?
    Gracias.

  17. ikhuerta dice:

    No,
    por desgracia no hay ninguna por parte de facebook. Puedes ver las que hay aquí:

    http://developers.facebook.com/docs/

    Mi recomendación sería que si tu app es sencilla la bases en Javascript + ajax (para capturar datos) y si es más compleja que bajes la PHP y la traduzcas a ASP.net En ASP normal creo que te van a faltar objetos que te faciliten un poco las llamadas Oauth...

  18. Darwin dice:

    Muy buen manual
    gracias a el hice
    http://apps.facebook.com/calificar/

    ahora mi pregunta es como se hace o endonde busco
    para crear el boton de compartir con mis amigos y que le aparezca la lista de amigo a ellos y puedn compartirlos
    les agradeceria mucho esta respuesta
    una 10 voy a recomendar esta pagina

  19. Fabian dice:

    He estado tratando de aprenter con tu articulo . he echo una aplicacion y va bien , pero algunas personas le sale el erro
    "Couldn't resolve host 'graph.facebook.com'" , a la hora de publicar y atros no .. esto por que puede ser ?

    te agredesco si me puedes ayudar !

  20. Jazhiel dice:

    Fabian :

    el mensaje de couldnt resolve host graph.facebook.com
    es problema de tu alojamiento web, que no puede conectarse con el servidor de fb, no es error tuyo. simplemente espera a que solucione o cambia de servidor.

    Iñaki contactame porfavor, estoy con los ultimos detalles de la app :)

  21. david dice:

    quisiera saber como hacer para publiar un comentario en el muro de un amigo. es con fql ??? ayuda x favor. muchas gracias x el tutorial,me sirvio mucho

  22. Gerard dice:

    Primero de todo, felicitarte por este gran tutorial
    Queria comentarte una duda que tengo sobre la integración de una app a una fanpage.
    El caso es que dentro de la aplicacion utilizo un formulario para enviar los datos del usuario, pero la sorpresa, es que al hacer el submit me marcha de la pagina para irse a la app de facebook. No hay manera de que se haga el sumit en la misma pagina sin tener que redirigirte a la app de facebook?
    Un saludo y gracias!

  23. ikhuerta dice:

    David,

    basta con que en lugar de llamar a api() con "/me/feed" llames con "/[idUsuarioAmigo/feed" y ya publicas en su muro.

    Gerard,

    No entiendo tu pregunta... si estas dentro de un iframe al hacer el submit de un form se recarga dentro de iframe con lo que sigues dentro de facebook, no?

  24. Gerard dice:

    Si, en teoria si y ejecutando desde la misma app funciona, pero sin embargo cuando esta es ejecutada dentro de una fanpage (creando la pestaña con el iframe dentro cargado) esta me redirecciona al hacer el post.
    Me he explicado :S
    Gracias por la rapida respuesta

    • ikhuerta dice:

      Con las pestañas nunca puede hacerse tanto como con las AppStore reales... Aun no se si te entiendo bien pero bueno:

      si lo que intentas es poner un iframe dentro de una pestaña facebook no te va a dejar. No admite iframes y el tag de fbml para iframes no va tampoco con pestañas.

      Lo q si puedes hacer es crear todo un form en la pestaña y ponerle el action hacia donde quieras. Si quieres q el usuario se quede dentro de facebook deberías enviar el form hacia tu URL de la app donde tengas la pagina de proceso del form. Facebook te copiara al llamar a tu iframe la variables por get que le lleguen a la app. No así con variables por post.

      Espero haber ayudado.

  25. Johan dice:

    Hola,

    yo tambien tengo el error Couldn't resolve host 'graph.facebook.com', alguien podria decirme si saben de algun hosting gratuito que no tenga este problema y que pueda hacer mi aplicacion de facebook sin problemas

  26. Gerard dice:

    Buenas de nuevo Iñaki,
    No utilizo un iframe dentro, simplemente te comente que utilizaba el tipo iframe de facebook.
    La app tiene un formulario dentro, lo que hace es enviar los datos por post(no utilizo get) pero al enviarlos me marcha de la pestaña para abir el action del formulario, no lo trata todo dentro de la misma pestaña.
    He probado de todo, pero siempre me sigue marchando de la fanpage hacia la app al hacer el submit.
    El action he probado de poner la url de la web, la url de la app y ambas me hace lo mismo.
    Un saludo y muchas gracias por tu tiempo.

  27. ikhuerta dice:

    Gerard,

    Creo que es que no te acabo de entender...

    A ver si tu app es en modo iframe tienes 3 posibilidades donde podria estar tu formulario:

    1) Tu formulario esta dentro de una pagina de tu app, por ejemplo la home, la que ves cuando accedes a esta. Facebook la cargará dentro de un iframe suyo. Ese Iframe es en realidad tu web con lo que no puede darte problemas ya que salvo que especifiques target="_top" en algun link, lo que hagas afecta solo a tu pagina.

    2) Tu formulario esta dentro de tu web, que solo una facebook como si fuese el antiguo Facebook Connect (para logar al usuario y publicarle en el muro). En este caso es aun más simple... todo lo que hagas es en tu propia web.

    3) Tu formulario está dentro de la página de pestaña de la aplicación. Es decir. Has añadido tu app a tu pagina de facebook y aparece como una pestaña de esta. En ese caso es de lo que te hablaba antes en el anterior comentario.

    - Por mucho que le digas modo iframe: la pestaña siempre es en FBML
    - Esa pestaña es una única página, todo lo que hagas en ella se va de esa página: forms, links, etc. No puedes tener varias paginas de pestaña ni puedes pasarle parametros del tipo que sea a una pestaña aunque se envie el formulario sobre su propia url. Es una página hecha para presentar tu APP y un resumen de sus datos. SOLO para eso.

    Si vas a enviar un form desde la pestaña, tienes que hacerlo sobre alguna página de la app (que sea del tipo de las dos primeras que te he mencionado al principio). Para eso veo 3 opciones:

    1) Si vas a enviar sobre tu pagina directamente, no hay problema. Envias un post y se recibe y ejecuta.

    2) Si vas a enviar sobre una pagina de app que se carga dentro de facebook entonces tienes que enviar por get no por post. Esto es porque facebook copia todo lo que hagas a partir de la url definida para llamar a la tuya. Por ejemplo si mi app es "apps.facebook.com/miapp/" y mi aplicación está en "www.dominiodemiapp.com"

    - Si cargo: "apps.facebook.com/miapp/mipagina" se cargará en realidad "www.dominiodemiapp.com/mipagina"
    - Si cargo: "apps.facebook.com/miapp/mipagina?var=value" se cargará en realidad "www.dominiodemiapp.com/mipagina?var=value"
    - Pero si envio datos por post, no llegan a mi app realmente.

    3) La tercera es la forma que yo usaría y pasa por hacer la primera de todas pero que la pagina al recibir y procesar la pagina haga una redireccion 301 hacia una url dentro de facebook:

    - Tengo al usuario en mi pestaña que envia un form hacia "www.dominiodemiapp.com/procesarForm" este se procesa y lanza una redireccion 301 hacia "apps.facebook.com/miapp/pagina-de-gracias" Esta internamente cargará "www.dominiodemiapp.com/pagina-de-gracias"

    De esta forma el usuario lanzaría el form en una pestaña, se procesaría con los datos en el post y seguiría dentro de facebook (ahora en tu app)

  28. hernan dice:

    Hola Iñaki, realmente tengo que felicitarte por el esmero y las ganas que le pones a esto, aparte de los conocimientos que tenes, un genio total.
    Te cuento, estoy creando una iframe app para meter dentro de una solapa y tengo 2 problemas:

    El 1ero es que cuando quiero solicitar los permisos con el código que explicas tan bien aca, si veo la app desde el dominio propio (app.facebook.com/....) se ve bien el cuadro de solicitud de permisos, pero cuando la levanto en la tab, me aparece el logo de facebook para hacer click alli y de ahi te lleva a la página app.facebook.com/.... Lo interesante es que en la tab veo que aparece el cuadro de pedido de permisos un toque nomas y desaparece, como si se fuera de la página o si fuese reemplazado por este logo que te comento.

    El 2do problema es el cuadro para enviar invitaciones, sé que no está explicado en este blog pero el problema es que al usarlo en el tab, se va del espacio provisto por FB y no se ven los botones de invitación. Te pego el código que estoy usando para hacer aparecer este cuadro, por si es un problema del código, o hay que usar otro.

    Desde ya muchisimas gracias y nuevamente felicitaciones por este gran trabajo que haces en "des-burrarnos" a todos

    Código de para presentar cuadro de invitación:

    FB.init({ appId:'xxxxxxxxxxxxxx', cookie:true, xfbml:true });

  29. hernan dice:

    Hola nuevamente Iñaki, leyendo la respuesta anterior que le diste a Gerard me surje una pregunta mas:
    Alli decis que
    - Si cargo: "apps.facebook.com/miapp/mipagina" se cargará en realidad "www.dominiodemiapp.com/mipagina"

    Pero a mi me pasa que, por ej, tengo la app apuntada a "www.dominiodemiapp.com/mipagina/index.php" y si pongo la direccion "apps.facebook.com/miapp/mipagina" me muestra index.php ... sabes si estoy comentiendo algun error?

    Esto me gustaría saberlo porque una de las cosas que quiero hacer es (si se puede) en mi app, que tengo cargada en una pagina (en una tab) tengo un formulario. Me gustaría que este formulario tenga como action (destino) la direccion "apps.facebook.com/miapp/procesar.php" con target="_top" como para que cuando se haga el submit a ese form, lo que se abra sea el canvas (no se si se llama canvas a esto) apps.facebook.com/.... con el resultado del procesamiento del form (espero ser claro) Se puede hacer esto?
    MUCHAS GRACIAS Iñaki

  30. hernan dice:

    (aclaracion: recuerda que en index.php tengo un iframe en realidad, en donde en esta caso, cargo form.php)
    index.php sería donde apunta la app, que tengo metida en una tab de mi fan page

    • ikhuerta dice:

      Buenas hernán,

      Creo que te has liado un poco... Voy por partes y con los dos puntos mas importantes de lo que comentas.

      1. Los tabs ni se comportan como Apps, ni se cargan en iframe, ni te permiten crear iframes dentro. Es decir: no pidas permisos dentro del código de un app porque no funcionará, no la trates como si fuera un iframe porque a día de hoy siempre es FBML y no intentes cargarle iframes porque no te hará ni casi ni con la etiqueta iframe de HTML ni con la de fbml.

      2. Facebook no es nada inteligente con las urls. Si tu lo apuntas a /miapp/índex.Php cuando cargues Apps.Facebook.com/tuapp/otrapagina.Php Facebook en realidad cargara /miapp/índex.Phpotrapagina.Php. Por lo tanto es mejor siempre indicarle una carpeta y contar o con que se ejecutara índex.php o usar

      Por ultimo y aunque menos importante con lo l cuadro d selección de amigos no puedes hacer nada. Tiene el diseño que tiene... :(

  31. Gerard dice:

    Carai, gran explicación :)
    Mi caso es el 3ero, un formulario dentro de una app que esta esta dentro de una pestaña de la fanpage.
    Lo que hago es enviar y recibir en mi pagina, pero trato los datos por POST. Voy a averiguar un poco mas sobre el tema con lo que me has comentado y a ver si lo soluciono.
    Un saludo y gracias de nuevo.

  32. Pablo dice:

    ikhuerta: la verdad.. y sin animos de adular, el mejor tutorial que he leido.

    Me da casi verguenza preguntarte por mi problema porque es muy basico y se que inviertes ya bastante tiempo en compartir con todos en tus posts.

    Basicamente, subi tu script a mi web en /facebook/index.php y le cambie las urls 'next' y parece funcionar pero el flujo del programa no llega nunca a imprimir los datos del usuario ("Hola ...")

    Me podras orientar ? muchas gracias desde ya! Pablo

  33. Pablo dice:

    La otra cosa es que si intento correr el script "example.php" provisto por Facebook en https://github.com/facebook/php-sdk/

    ... me da el error "Uncaught OAuthException: Invalid OAuth access token signature" lo cual tambien obtengo si en tu script intento pasar los chequeos que haces antes de imprimir la informacion de usuario.

    Que puede estar pasando amigo ? los scripts lo he subido en

    http://soysocial.net/facebook/index.php (el tuyo)
    http://soysocial.net/facebook/example.php (el oficial)

    Gracias desde ya!

  34. Hola excelente artículo...felicitaciones..

  35. Pablo dice:

    Amigo: la parte de los permisos lo tengo tal cual vos:

    // dentro de fb
    $url = $facebook->getLoginUrl(array(
    'canvas' => 1,
    'fbconnect' => 1,
    'next' => 'http://apps.facebook.com/soysocial/',
    'cancel_url' => 'http://apps.facebook.com/soysocial/',
    'req_perms' => 'read_stream,publish_stream'
    ));

    ...

    // fuera de fb
    'canvas' => 0,
    'fbconnect' => 1,
    'next' => 'http://soysocial.net/facebook',
    'cancel_url' => 'http://soysocial.net/facebook',
    'req_perms' => 'read_stream,publish_stream' // Más permisos en: http://developers.facebook.com/docs/authentication/permissions
    ));

    Los datos de la app como appId y secret los he copiado bien ademas hice varias aplicaciones y en todas me paso lo mismo.

    Que podra ser ? sera que tengo mal configurado desde la pagina de facebook mi app ? si me envias un correo te paso los datos de mi cuenta asi si queres le hechas una mirada.... hasta te puedo pasar los datos del http://ftp.........

    No se......que hacer puesto que segui "los pasos" 😐

    Gracias por tu tiempo amigo!

  36. ira dice:

    Hola Iñanki, lo primero como todo el mundo felicitarte y agradecerte el post. Desde que han cambiado a la ultima API cada vez es mas complicado encontrar informacion y sobre todo ejemplos.

    Mi problema es el siguiente y aunque he leido y buscado documentacion todavia no he encontrado la forma de solucionar mi problema. He probado casi de todo y nada no hay forma.

    Mi problema es en una aplicacion multipagina dentro del Iframe de FB, no se como generar las url para que al acceder a otro enlace del menu no se pierda la sesion, he probado a pasar la variable de usuario y aunque la pasa bien la pagina se refresca automaticamente y vuelve a iniciar la sesion... Esto pasa sin pasar la variable de usuario uid y pasandola, siempre se carga dos veces.
    Serias tan amable por favor de guiarme hacia la luz? Llevo unos dias dandole vueltas, he probado todo lo que he encontrado, como poner los links absolutos (apps.facebook.com/canvas/opcion.php) y con target _top. (encontre esto en los foros de developers en fb) pero nada no hay forma y no entiendo que o porque me pasa esto o como solucionarlo...

    Muchas gracias y ojala tengas un minutillo para ayudarme.

    Un saludo

  37. ikhuerta dice:

    Buenas,

    No acabo de entender el problema y el link que me pasas no va 😉

    Cuando inicias sesión (con permisos o sin ellos) en facebook. Este te devuelve al usuario con una serie de parametros por GET que te lo identifican.

    Si al iniciar la clase de facebook marcas las cookies a "true" estos datos se guardan en cookie con lo que salvo en explorer 7 (con privacidad alta) no debería darte problemas ya que a partir de ahí la sesión se inicia ella sola al iniciar la clase Facebook.

  38. ira dice:

    Buenas,

    Perdona ayer con la desesperacion escribi mal tu nombre.
    Entiendo perfectamente lo que comentas (ahora, estoy un poco perdido porque no se si se lo dices a Pablo o a mi)
    Por si acaso te resumo mi problema y al cual todavia no he encontrado solucion.
    La aplicacion es multi pagina, al pinchar en cualquier link del menu, nos carga la url de destino, pero ha perdido la sesion.
    Le he dado vueltas y no consigo solucionarlo. Y cookies esta en true, por lo que he podido leer es que las url de los enlaces del menu esttan mal hechos y es en lo que no caigo. como deben ser esos enlaces...

    Muchas gracias y perdona, entiendo que esto es un blog y no quieres que acabe como un foro...

    Un saludo

  39. Alexis dice:

    Estoy empezando a armar apps de facebook, segui todo el tutorial, pero no me queda claro la ultima parte en la que te fijas si tenes acceso a publicar en el muro de los usuarios, si en el login cuando el usuario acepta los distintos requisitos (entre los que esta publicar en el muro) ya no queda guardado y se puede publicar si o si? Y si presiona que no lo permite la aplicacion no carga, no es asi? o en que me equivoco?

  40. ikhuerta dice:

    Buenas

    Ira. Si tienes las cookies y sabes que en algun momento ha habido sesión o te estas cargando las cookies, o se crean en un entorno que luego no puede leer o no tiene sentido (quizas cambias de subdominio? quizas las cookies dependian de alguna carpeta?)

    Alexis,

    Nunca puedes asegurar que tienes permisos. Incluso habiendo forzado que o los da o nada el usuario puede editar su configuracion de privacidad y quitarte los permisos incluso durante la misma sesión. Es por esto que siempre debes controlar si puedes publicar antes de hacerlo.

  41. Alexis dice:

    Gracias por contestar, y ahora estoy teniendo el mismo problema que ira, cuando pido los permisos me los da pero solo crea la sesion en el index, cuando cambio a cualquier otra parte de la aplicacion ya no tiene la sesion y tengo que volver a pedirla.

    Yo antes de este tutorial estaba usando FBML y guardaba los datos en una base de datos (id, access token, y sig), para despues poder publicar sin necesidad de que el usuario se conecte a la aplicacion. Es posible hacer esto en modo Iframe?

    Saludos y muy bueno tu blog, me sirvio muchisimo.

  42. Alexis dice:

    Me contesto solo por si alguien necesita lo mismo que yo, para guardar los datos del usuario (id, access token, sig) en una base de datos, simplemente hay que recorrer el array $fbSession.

    Ahora el unico problema que tengo es el mismo que comentaba Ika, y es que tengo la sesion creada en algunas secciones y en otras no. Y supuestamente una vez que das acceso en el inicio ya deberia quedar guardada para siempre y existir en todas las secciones de la app.

  43. ira dice:

    Lo primero agradecerte la molestias y como comente en un post anterior pedir disculpas por utilizar tu blog como si de un foro se tratase.
    La verdad es que desde que han actualizado a la ultima API es difilisimo enconrar ejemplos y mas aun que alguien se moleste en indicarte el camino a seguir.

    Al ver que Alexis tiene el mismo problema me hace preguntarme, debo incluir el archivo de inicio de sesion en cada pagina de la aplicacion???

    Un saludo y mil gracias

  44. Alexis dice:

    Ira, yo lo que hice fue meter todo lo de las sesiones en un archivo, y ese archivo cargarlo en todas las paginas, pero igual no pasa lo mismo, y por ahi no se porque te vuelve a pedir los permisos, por ej. entrar en inicio y te pide los permisos, pasas a la seccion1 y te vuelve a pedir los permisos, o directamente no aparece la sesion, no se que puede ser..

  45. ira dice:

    Buenas,

    Alexis,
    Si, yo tambien hago eso, y lo que ocurre es que me carga la pagina 2 veces, 1 sin sesion y luego otra con sesion... El jaleo viene cuando redirecciono a un insert ya que me lo hace dos veces. una sin los datos del usuario y la segunda bien. Lo he solucionado pasando los datos del usuario desde el formulario y en la pagina de los inserts anular el inicio de sesion, pero es una chapuza y me gustaria hacerlo bien..

    Por la poca informacion que he podido encontrar respecto a este tema, cada vez que se carga un enlace en el iframe al ser desde una direccion externa a FB pierde la sesion, para que esto no ocurra tienen que hacerse los links del menu de una forma concreta y es con la que no doy. se supone que deberian ser asi:
    <a href="" target="_top">xxxxxx
    Curiosamente indican que el target _top es necesario para que no se cargue toda la pagina de FB en el Iframe, pero a mi me pasa todo lo contrario...
    Si te parece bien y con el permiso de Iñaki te paso mi mail e intentamos solucionar o entender esto por ahi, tampoco es plan de usar el blog de Iñaki como si de un foro se tratase...(fakieflip3@yahoo.com)

    Un saludo

  46. angel dice:

    Hola, buen tutorial pero lástima que no funcione y no es por el servidor en donde lo probe porque probe otra aplicacion y funciono correctamente, creo que dejo de funcionar por las actualizaciones que hizo facebook, espero alguien responda si le funciono.

    PD: el error esta en la conexion y/o en identificar la session

  47. ikhuerta dice:

    Buenas Angel,

    Si entras en los enlaces (cuyo código es exactamente el que se indica en el tutorial) funciona perfectamente. Así que debe haber algo que hagas o hayas configurado mal (en facebook o en tu servidor) por lo que no funcione correctamente.

    Por otro lado se por otros desarrollos y por comentarios que me han hecho que este sistema funciona perfectamente.

    Eso sí, hay que tener mucho cuidado con los datos de sesión ya que facebook en su SDK PHP los maneja en Cookie y cuando llama a las paginas con FBML no hay cookie que valga asi que hay que forzarle a entender la sesión de otra forma (por ejemplo editando el SDK y cambiando Cookies por variables de session o de BBDD.

  48. ikhuerta dice:

    Alexis, Ira

    Lo que le comento en el ultimo parrafo a Angel es lo que os sucede a vosotros. Teneis que encontrar una forma comoda de manejar la sesion de Facebook sin usar coockies ya que como es Facebook el que llama a vuestra pagina estos datos se pierden.

    Una forma comoda es ir arrastrando el ID (interno o de FB) de usuario en la url solicitada y así poder rescatar los datos.

    Aunque la verdad es que para aplicaciones más complejas yo os recomendaría que pasaseis al modo Iframe ya que ahi la sesión la manejas sin problemas y simplemente tienes que añadir el SDK javascript a las paginas para poder cargar objetos FBML. No olvideis que aunque Facebook no se haya cargado el 1 de enero las paginas FBML terminará haciendolo y de echo la semana pasada ya dio pasos en este sentido (como permitir pestañas iframe).

  49. Alexis dice:

    Hola Ikhuerta, gracias por respondernos, y me quedo una duda cuando dijiste que nos pasemos al modo iframe, yo lo estoy haciendo en modo iframe, y por eso es que eh estado siguiendo este tutorial que es para crear en modo iframe. Osea que solo tendriamos que usar el SDK de Javascript para enviar los datos? Ahora mismo me pondre a investigar como hacerlo, aunque si conoces algun tutorial que lo explique te agradeceria.

    Un saludo y disculpa por robarte un poco de tu tiempo. Quizas debrias poner alguna que otra publicidad para que podamos retribuirte de alguna manera.

  50. Arturo dice:

    Excelente tutorial me ayudo muchísimo para validar la sesiones un saludos

  51. Raul dice:

    Que tal ,
    Esta bueno el tutorial , si no es mucha pedir , podrias darme la mano en un punto .

    Estoy mostrando solo las fotos en una cuadricula , pero
    Lo que quiero es que al mostar los resultados las fotos esten en una table de 10 columnas como tendria que hacer .

  52. cvaz (sebas) dice:

    Buenas.. el tuto parece exelente, aun que todabia no logro terminarlo.
    solo comento para publicar lo que aparece:
    solo con importar "facebook.php"

    "Fatal error: Cannot redeclare class FacebookApiException in /home/a5773762/public_html/facebook.php on line 91"

    😐
    facebook.php (v.2.1.2)

  53. cvaz (sebas) dice:

    el problema era del index.php
    yo ya tenia una web hecha en un index.php y quise poner lo de tu tutorial y no funcionaba..

    lo hice de nuevo desde cero, y anduvo perfecto!...
    muy buen tuto...

    (la pagina la pondre dentro de otro iframe... calculo que si lo importo como php.. tendria que seguir con errores.. :/ )

    muchas gracias :)

  54. cvaz (sebas) dice:

    el hosting tiene que soportar ssl.. :/
    pequeño detalle :/

  55. julian dice:

    he estado intentando plublicar en el feed de un usuario de mi aplicacion pero facebook no me lo permite ni asi. idUsuario/feed"
    ni con stream publish
    solo me lo permite si el usuario es mi amigo komo puedo publicar en el muro sin que sea mi amigo
    iki ayudame

  56. Alienmau dice:

    Ola fijate q tengo un problema casi similar al de JULIAN pero no me marca q tenga problemas con conectar con graph.facebook.com, sino mira:

    object(FacebookApiException)#2 (7) { ["result:protected"]=> array(2) { ["error_code"]=> int(77) ["error"]=> array(2) { ["message"]=> string(51) "Problem with the SSL CA cert (path? access rights?)" ["type"]=> string(13) "CurlException" } } ["message:protected"]=> string(51) "Problem with the SSL CA cert (path? access rights?)" ["string:private"]=> string(0) "" ["code:protected"]=> int(77) ["file:protected"]=> string(24) "/var/www/fb/facebook.php" ["line:protected"]=> int(614) ["trace:private"]=> array(5) { [0]=> array(6) { ["file"]=> string(24) "/var/www/fb/facebook.php" ["line"]=> int(575) ["function"]=> string(11) "makeRequest" ["class"]=> string(8) "Facebook" ["type"]=> string(2) "->" ["args"]=> array(2) { [0]=> string(29) "https://graph.facebook.com/me" [1]=> array(2) { ["method"]=> string(3) "GET" ["access_token"]=> string(96) "115609538481398|2.yGery0T_kS4lyfjfA7PLeg__.3600.1300906800-645572675|ayZXtAjeFcQBucpR4R9CY4KuGPY" } } } [1]=> array(6) { ["file"]=> string(24) "/var/www/fb/facebook.php" ["line"]=> int(539) ["function"]=> string(13) "_oauthRequest" ["class"]=> string(8) "Facebook" ["type"]=> string(2) "->" ["args"]=> array(2) { [0]=> string(29) "https://graph.facebook.com/me" [1]=> array(1) { ["method"]=> string(3) "GET" } } } [2]=> array(4) { ["function"]=> string(6) "_graph" ["class"]=> string(8) "Facebook" ["type"]=> string(2) "->" ["args"]=> array(1) { [0]=> string(2) "me" } } [3]=> array(4) { ["file"]=> string(24) "/var/www/fb/facebook.php" ["line"]=> int(492) ["function"]=> string(20) "call_user_func_array" ["args"]=> array(2) { [0]=> array(2) { [0]=> &object(Facebook)#1 (8) { ["appId:protected"]=> string(15) "115609538481398" ["apiSecret:protected"]=> string(32) "9893c6ed158fcbeee90d9bbc9f6bce97" ["session:protected"]=> array(6) { ["session_key"]=> string(52) "2.yGery0T_kS4lyfjfA7PLeg__.3600.1300906800-645572675" ["uid"]=> string(9) "645572675" ["expires"]=> string(10) "1300906800" ["secret"]=> string(24) "mojoPfFKYAjMxNTg_cvEGw__" ["access_token"]=> string(96) "115609538481398|2.yGery0T_kS4lyfjfA7PLeg__.3600.1300906800-645572675|ayZXtAjeFcQBucpR4R9CY4KuGPY" ["sig"]=> string(32) "4681fde9b1b2ff1226d94c0804be213d" } ["signedRequest:protected"]=> NULL ["sessionLoaded:protected"]=> bool(true) ["cookieSupport:protected"]=> bool(true) ["baseDomain:protected"]=> string(0) "" ["fileUploadSupport:protected"]=> bool(false) } [1]=> string(6) "_graph" } [1]=> array(1) { [0]=> string(2) "me" } } } [4]=> array(6) { ["file"]=> string(21) "/var/www/fb/index.php" ["line"]=> int(80) ["function"]=> string(3) "api" ["class"]=> string(8) "Facebook" ["type"]=> string(2) "->" ["args"]=> array(1) { [0]=> string(2) "me" } } } }

    Cualquier ayuda te agradesco bastante amigo

  57. Alienmau dice:

    Ya lo he resuelto, resulta q busque n google este problema y ai q modificar o mas bien añadir 2 lineas de codigo al facebook.php:

    $opts[CURLOPT_SSL_VERIFYPEER] = false;
    $opts[CURLOPT_SSL_VERIFYHOST] = 2;

    En la funcion 'protected function makeRequest', justo despues de la siguiente linea:

    $opts = self::$CURL_OPTS;

    para quedar asi la funcion completa:

    /////////////
    protected function makeRequest($url, $params, $ch=null) {
    if (!$ch) {
    $ch = curl_init();
    }

    $opts = self::$CURL_OPTS;
    //Inica Agregado por Alienmau ya que mandaba error de SSL CA certify
    $opts[CURLOPT_SSL_VERIFYPEER] = false;
    $opts[CURLOPT_SSL_VERIFYHOST] = 2
    //Fin Agregado Alienmau
    if ($this->useFileUploadSupport()) {
    $opts[CURLOPT_POSTFIELDS] = $params;
    } else {
    $opts[CURLOPT_POSTFIELDS] = http_build_query($params, null, '&');
    }
    $opts[CURLOPT_URL] = $url;

    // disable the 'Expect: 100-continue' behaviour. This causes CURL to wait
    // for 2 seconds if the server does not support this header.
    if (isset($opts[CURLOPT_HTTPHEADER])) {
    $existing_headers = $opts[CURLOPT_HTTPHEADER];
    $existing_headers[] = 'Expect:';
    $opts[CURLOPT_HTTPHEADER] = $existing_headers;
    } else {
    $opts[CURLOPT_HTTPHEADER] = array('Expect:');
    }

    curl_setopt_array($ch, $opts);
    $result = curl_exec($ch);
    if ($result === false) {
    $e = new FacebookApiException(array(
    'error_code' => curl_errno($ch),
    'error' => array(
    'message' => curl_error($ch),
    'type' => 'CurlException',
    ),
    ));
    curl_close($ch);
    throw $e;
    }
    curl_close($ch);
    return $result;
    }
    /////

    Con esto el bendito problema sobre "Problem with the SSL CA cert (path? access rights?)" se ha resuelto, aunque igual mi duda es porque se tiene q modificar esto en el SDK de PHP?? Si alguien sabe el motivo comente,

    mietras SOLUCIONADO MI PROBLEM!!!!

  58. Shutten dice:

    Hola Alienmau, no eres tu es tu servidor. Deberías cambiarte de host que tenga activado CURL, SSL, JSON, PHP5 como mínimo. El problema es que no te puedo decir un host gratuito para tus pruebas en estos momentos. Si conoces alguno te agradecería lo postees para la comunidad que quiere empezar en esto.

    Btw, muy buena pagina ikhuerta.
    Saludos.

  59. Chris Baltazar dice:

    Hola que gran aporte de verdad.

    Sin embargo quisiera ayuda con el siguiente problema, parece ser que ee el mismo problema de algunos aunque yo me he basado en el mensaje de la excepcion

    - "SSL certificate problem, verify that the CA cert is OK" -

    SUcede el momento de recuperar la informacion del usuario...

    De verdad lo necesito, te agradeceria mucho si me pudieras apoyar un poco para terminar con esto...

    Saludos

  60. Chris Baltazar dice:

    Hola de nuevo, gracias me di cuenta un poco tarde de la solucion a mi problema pero ya quedo. Ahora solo me resta una duda mas, podria ayudarme a decifrar como fue posible incluir en el POST del muro la imagen del sitio y parte de su contenido tambien...??

    Agradezo cualquier comentario...

    Hasta pronto

  61. Eric dice:

    Hola, segui todos los pasos y me quedo al 100% de una vez

    Gracias por el tutorial, sigue asi

    Saludos desde Panama

    Eric-Webmaster

  62. Federico dice:

    Hola! A mi me resulto todo de pelos!!! Lo único que no me sale es el logo de la aplicación al lado cada vez que se postea en el muro (wall) de la gente que usa la aplicacion. ¿Alguien sabe porque?

    Saludos desde Argentina

  63. Santiago dice:

    Mis felicitaciones por este tutorial muy bueno para novatos como yo, llegue a hacerlo funcionar, lee hasta los datos de mis amigos pero no me permite publicar en mi muro, me dice que "No se ha podido publicar nada: El usuario no ha dado permiso a esta aplicacion para publicar en su muro", que puedo estar haciendo mal?... desde ya muchas gracias.

  64. sebas dice:

    Yo tengo una version de este script funcionando bien

    en vez de postear en el muro del usuario mismo, postea en el muro de mi fanpage ( cambie me/feed por id/feed )

    Bueno, el tema es que si la persona que ejecuta este script ha dado a ME GUSTA de mi fanpage anteriormente, entonces va perfecto

    pero si el usuario no ha dado a ME GUSTA tira este error

    Sus comentarios: averobject(FacebookApiException)#2 (7) { ["result:protected"]=> array(1) { ["error"]=> array(2) { ["type"]=> string(14) "OAuthException" ["message"]=> string(23) "(#210) User not visible" } } ["message:protected"]=> string(23) "(#210) User not visible" ["string:private"]=> string(0) "" ["code:protected"]=> int(0) ["file:protected"]=> string(49) y sigue y sigue

    supongo que estara deshabilitado el hecho de postear en mi muro a alguien que no ha dado a ME GUSTA

    o no tiene relacion alguna?

    y si Sí es asi, como puedo hacer que la gente pueda usar esta funcionalidad sin tener que pedirles que antes den al ME GUSTA?

    muchas gracias por el estupendo trabajo

    saludos

  65. Hola, buenos días.

    Estoy intentando crear una app que simplemente linke a una url externa a facebook. Es decir, que cuando alguién la pinche, se habra la url de mi tienda online que no tiene las dimensiones para aparecer en el frame de facebook. Pero no doy con ninguna solución :(

    Puedes echarme un cable, o deciemr donde puedo encontrar una solución.

    1000 gracias!

  66. Liri dice:

    Hola buenos tarde.
    me responde con una pantalla "No se ha podido publicar nada: El usuario no ha dado permiso a esta aplicación para publicar en su muro". Pero no sale la pantalla "Se ha publicado un mensaje en el muro del usuario".

    Cualquier ayuda te agradezco mucho.

  67. Ruben dice:

    Hola que tal saludos, ua pregunta porque me para redireccionando a la misma pagina de aplicacion, nunca carga! Saludos, segui todo tal cual.

  68. Alejandro dice:

    Hola una consulta y para poder cargar en una iframe por ejemplo un listado de tus productos almacenados en tu propio servidor ... es el mismo procedimiento? Gracias

  69. Holman dice:

    Buenas noches Iñaki, tengo un lio con un desarrollo accediendo a Facebook pero desde .NET tu haz realizado esta implementacion en NET?

  70. Jesús Santos dice:

    Hola Iñaki:

    Primero que nada me gustó mucho tu publicación, he estado buscando como hacer aplicaciones facebook y es de lo mejor que he encontrado, por ello quería comentarte si de casualidad sabes cómo podría hacer para mostrar las fotos del usuario que se loggea en mi sitio web, ya que en mi aplicación necesito que el usuario pueda escoger una de sus fotos del facebook, he buscado por todos lados y no he encontrado nada.

    De antemano muchas Gracias!!

  71. Rollanime dice:

    Excelente gracias. Ahora a trabajar a ver como queda esa APPI

  72. Renato Aguilar dice:

    Hola este post es algo viejito creo pero la verdad me ha servido mucho como refencia, de verdad es una bendicion que aya gente como vos que comparta lo que sabe y aun mas ayudar cuando pueden.
    Tengo exactamente el mismo problema que Liri. este if me esta botando por falso y me dice que los usuarios no dieron permiso para publicar en el muro, alguien sabe porque es esto. Gracias por la ayuda y ojala alguien me responda.
    Saludos a la distancia ...!

    if ( isset($fbperms[0]["publish_stream"]) && $fbperms[0]["publish_stream"] == 1 ) // comprobamos si tenemos permisos de publish_stream (para publicar en el muro)...
    {
    ingreso
    }
    else
    {
    echo "No se ha podido publicar nada: El usuario no ha dado permiso a esta aplicación para publicar en su muro";
    }

  73. Carlos Fernando dice:

    Hola amigo, excelente tu aporte y a todos los que siguen esta web. Tengo una inquietud, yo desarrollo páginas web, actualmente tengo 10 páginas web que comparten un mismo cms el cual es desarrollado por mis amigos y yo creamos un item donde lo que el dueño de la web publique dentro de ella se postee un su fan page y en su twitter, resulta que funciona perfecto pero por cada web tengo que crear una aplicación. Como podria conectar una sola aplicación para todas las web que manejo??.

    Muchas gracias.

  74. Ariel dice:

    Hola, muy buen aporte tienes en tu blog. Una consulta: si se hace una aplicacion que corra en Facebook y quieres que al pulsar un boton se envie una notificacion al creador de la aplicacion, es necesario el manejo de permisos?
    Gracias.
    Saludos.

    • ikhuerta dice:

      No se contestarte seguro, pero diría que si. Aunque si vas a controlar perfectametne la aplicación yo antes enviaría un email con código de servidor por detrás sin mediar con facebook.

  75. Juan Pablo dice:

    Hola.

    Apenas logro entender de lo que hablan aqui en este post. Definitivamente es para avanzados. Ikhuerta ayudame: Quiero ganar mas seguidores en mi fanpage de facebook, para ello he pensado en realizar concursos en mi web, como x ejemplo regalar entradas a partidos, camisetas, dinero, etc, poniéndole al usuario como requisito dar primero "me gusta" a la pág, luego redirigirlo a un formulario donde deberá llenar sus datos personales para participar en dicho concurso,es decir, el usuario no tendrá acceso al formulario sino da "Like". En mi país decimos "Cachas" (entiendes)?
    Indícame un tutorial que me explique paso a paso como hacer esto desde 0. Midirección Web es http://www.amarilloeselcolor.com

    Gracias de antemano

Anímate y deja tu comentario

$post = $( $('.hnews')[0] ); ga('ec:addProduct', { // Provide product details in a productFieldObject. 'id': $post.attr('id'), // Product ID (string). 'name': $('h1 a',$post).text(), // Product name (string). }); ga('ec:setAction', 'detail'); var isRead = false; var isStarted = false; $( window ).scroll(function() { if ( !isStarted ) { isStarted = true; $post = $( $('.hnews')[0] ); ga('ec:addProduct', { // Provide product details in a productFieldObject. 'id': $post.attr('id'), // Product ID (string). 'name': $('h1 a',$post).text(), // Product name (string). 'quantity' : 1 }); ga('ec:setAction', 'add'); ga('send', 'event', 'scroll', 'post-read-start', {'nonInteraction': 1}); ga('ec:addProduct', { // Provide product details in a productFieldObject. 'id': $post.attr('id'), // Product ID (string). 'name': $('h1 a',$post).text(), // Product name (string). 'quantity' : 1 }); ga('ec:setAction', 'checkout', { 'step' : 1 }); ga('send', 'event', 'scroll', 'post-read-start', {'nonInteraction': 1}); } if ( !isRead && ( $(window).scrollTop()+$(window).height() ) > $('div.share').offset().top ) { isRead = true; $post = $( $('.hnews')[0] ); ga('ec:addProduct', { // Provide product details in a productFieldObject. 'id': $post.attr('id'), // Product ID (string). 'name': $('h1 a',$post).text(), // Product name (string). 'quantity' : 1 }); ga('ec:setAction', 'purchase', { 'id' : Math.floor((Math.random() * 999999999999) ), 'revenue': '0' }); ga('send', 'event', 'scroll', 'post-read', {'nonInteraction': 1} ); } });