Lo primero que debemos hacer es registrar nuestro sitio:Posteriormente en manejar dominios se debe verificar la propiedad del dominio siguiendo los pasos:

Luego se debe crear un ID cliente en Consola de APIs, crear un nuevo proyecto y en el menú seleccionar API Access.

Finalmente deberías ver el ID del cliente y otros datos necesarios para crear una aplicación. Allí mismo en el menú ve al apartado services y activa Google+ para poder trabajar con el. Manos al código, pero antes de eso debes descargar el paquete de librerías google-api-php-client. Después de descargado en la carpeta src ve al archivo config.php y busca:

// Datos obtenidos al crear el cliente
'oauth2_client_id' => 'CLIENTE_ID',
'oauth2_client_secret' => 'SECRET',
'oauth2_redirect_uri' => 'http://brianur.info',
//Datos obtenidos al verificar el dominio
'oauth_consumer_key'    => 'brianur.info',
'oauth_consumer_secret' => 'JA8HUXQGKHUWc2gIbpKZUYrO ',

<?php
/* Obtener datos del usuario en Google+
para crear un sistema de login.
www.BrianUR.info
*/
//'Incluimos' las librerías necesarias
require_once 'src/apiClient.php';
require_once 'src/contrib/apiPlusService.php';
session_start();
$client = new apiClient();
$client->setApplicationName("BrianUR.info");
$client->setScopes(array('https://www.googleapis.com/auth/plus.me'));
$plus = new apiPlusService($client);
if (isset($_REQUEST['logout'])) {
unset($_SESSION['access_token']);
}

if (isset($_GET['code'])) {
$client->authenticate();
$_SESSION['access_token'] = $client->getAccessToken();
header('Location: http://' . $_SERVER['HTTP_HOST'] . $_SERVER['PHP_SELF']);
}

if (isset($_SESSION['access_token'])) {
$client->setAccessToken($_SESSION['access_token']);
}

if ($client->getAccessToken()) {
$yo = $plus->people->get('me');
$_SESSION['access_token'] = $client->getAccessToken();
}
else
$authUrl = $client->createAuthUrl();

if (isset($yo)) {
$_SESSION['sesion'] = $yo;
$yo = $_SESSION['sesion'];
echo "<img src=\"" . $yo['image']['url'] . "sz=82\"/></br>";
echo "<strong>Nombre:</strong> " . $yo['displayName'] . "</br>";
echo "<strong>ID:</strong> " . $yo['id'] . "</br>";
echo "<strong>Sexo:</strong> " . $yo['gender'] . "</br>";
echo "<strong>Lema:</strong> " . $yo['tagline'] . "</br>";
}
if (isset($authUrl))
echo "<a class='login' href='$authUrl'>Acceder usando mi cuenta Google+</a>";
else
echo "<a class='logout' href='index.php?logout'>Salir</a>";
?>

Al acceder a la aplicación debe aparecer un enlace para conectarse con Google+, luego pide permiso:

Por ultimo si todo ha salido bien debería verse los datos que pedimos, algo así:

Ver demo

Primero debes editar tu aplicación en el área de desarrolladores, buscas donde diga Selecciona como tu aplicación se intrega con Facebook y en Sitio web escribes la URL del sitio. Posteriormente debemos crear un directorio, en mi caso lo he llamado descargas. Este directorio debe estar protegido para que nadie con solo obtener la URL del archivo pueda descargarlo directamente, posteriormente usando PHP se llama al archivo para que pueda ser descargado solo por usuarios que hagan el “pago”. En la carpeta mencionada anteriormente creamos un archivo .htaccess que debe tener lo siguiente:

AuthUserFile  /home/miweb/descargas/.htpasswd
AuthName "Que coño intentas hacer?"
AuthType Basic

Options All
<Limit GET POST PUT>
require valid-user
</Limit>

En AuthUserFile debe ir la ruta absoluta del directorio, el archivo .htpasswd es el encargado de guardar el usuario y el password encriptado del mismo; para crearlo usamos la utilidad htpasswd que viene integrada con Apache:

htpasswd -c .htpasswd usuario

Luego creamos un archivo PHP que será el encargado de loguear al usuario con la aplicación, pedir permisos de publicación, publicar en el muro, permitir la descarga del archivo:

<?php
require ("includes/facebook.php");
$appID = "00000000000000";
$secret = "00000000000000000000000000";
$facebook = new Facebook(array(
'appId' => $appID,
'secret' => $secret,
));
$user = $facebook->getUser();
if ($user) {
try {
$yo = $facebook->api('/me');
} catch (FacebookApiException $e) {
error_log($e);
$user = null;
}
//Saludar al usuario
echo "Hola ".$yo["name"]." cómo estás?";
//Publicación en el muro
$parametros=array('message' => '',
'name' => 'Tutoriales de Facebook - BrianUR.info',
'caption' => 'Estoy leyendo un tutorial sobre el desarrollo de aplicaciones en Facebook. Te lo recomiendo!',
'link' => 'http://www.brianur.info',
'description' => 'Es genial',
'picture' => 'http://brianur.info/brianur.png',
'actions' => array(array('name' => 'Entra ya!',
'link' => 'http://www.brianur.info')));
$facebook->api('/me/feed','post',$parametros);
// ALERTA: ESTE CÓDIGO ES VULNERABLE A LFI Y SÓLO ES USADO COMO EJEMPLO
if (isset($_GET['archivo'])){
$name = $_GET['archivo'];
header("Content-disposition: attachment; filename=$name");
header("Content-type: application/octet-stream");
readfile("descargas/".$name);
}
// FIN ALERTA
echo "<a href=\"index.php?archivo=librito.zip\">Descargar archivo.</a>";
} else {
//Enlace para iniciar sesion en la aplicación
$loginUrl = $facebook->getLoginUrl(array('scope' => 'publish_stream'));
echo "<a href='$loginUrl'>Pagar con una publicación</a>";
}
?>

Eso es todo, el anterior código es sencillo y puedes mejorarlo según tus necesidades. Es estrictamente necesario por seguridad cambiar el código usado para la descarga del archivo ya que es vulnerable a LFI, además es recomendado hacer algún tipo de validaciones necesarias para aumentar la seguridad (por ejemplo el uso de sesiones). Posteriormente agregaré la opción de conectarse con Twitter para hacer lo mismo.

<?php
$parametros=array('message' => 'Aprendiendo a desarrollar aplicaciones en Facebook',
				  'name' => 'BrianUR.info',
				  'caption' => 'Mi primer aplicacion en Facebook',
				  'link' => 'http://www.brianur.info',
				  'description' => 'Es genial',
				  'picture' => 'http://brianur.info/brianur.png',
				  'actions' => array(array('name' => 'Entra ya!',
                                      'link' => 'http://www.brianur.info')));
$facebook->api('/me/feed','post',$parametros);
?>

Puedes descargar el archivo facebook.php que necesitamos desde github. La versión actual es la 3.1.1, muy importante en tener en cuenta esto para las personas que ya habían desarrollado aplicaciones antes, ya que algunos métodos no funcionan en las nuevas versiones del SDK, como es el caso de getSession() que hacía parte de la Rest API, así que si ven un Fatal error: Call to undefined method Facebook::getSession() ya saben la razón.

Autenticación

El siguiente código siempre será necesario usarlo para poder autenticar el usuario con una aplicación (obtener un token, pedir permisos), si buscas por la red te podrás encontrar con múltiples formas para hacer este paso, hay personas que hacen varios tipos de validaciones (recomiendo que tu también lo hagas) para evitar errores; en este caso para ahorrar código y para que se entienda mejor he puesto lo estrictamente necesario:

<?php
/*
	Código de ejemplo para obtener datos del usuario en Facebook
	www.BrianUR.info
*/
// URL de la aplicación
$urlApp = "http://apps.facebook.com/brianur/";
// ID y Secret ID de la aplicación
$appId = "0000000000000";
$secret = "00000000000000000000000000000000";
//Llamada al Facebook SDK
include_once "facebook.php";
// Instanciamos el objeto Facebook
$facebook = new Facebook(array('appId' => $appId,
							   'secret' => $secret,
							   'cookie' => true));
// Obtenemos una session
$user = $facebook->getUser();
if (!$user){
// Si el usuario no está autentificado crea una URL para hacerlo.
// Se usa 'scope' para pedir permisos separados por coma.
// Se usa 'redirect_uri' para redireccionar a esa URL despues de la acción del usuario
$loginUrl = $facebook->getLoginUrl(
            array(
                'scope' => 'user_about_me',
                'redirect_uri' => $urlApp
            )
    );
echo "<script type=\"text/javascript\">top.location.href = '$loginUrl';</script>";
} else {
	// Hasta aquí el usuario tendría que estar autentificado con la aplicación.
	$yo = $facebook->api('/me');
	print_r($yo);
}
?>

El anterior código retorna varios datos del usuario, para ver datos ocultos se requiere el uso de permisos extendidos.

Métodos

Ejemplos útiles

Mostrar todos los amigos de un usuario:

<?php
$amigos=$facebook->api('/me/friends');
foreach($amigos['data'] as $amigo){
echo "Nombre: ".$amigo['name']." ID: ".$amigo['id'];
}
?>

Mostrar los primeros 10 amigos por ID y Nombre:

<?php
$amigos=$facebook->api('/me/friends?limit=10&fields=id,name');
foreach($amigos['data'] as $amigo){
echo "Nombre: ".$amigo['name']." ID: ".$amigo['id'];
}
?>

Mostrar foto de perfil del usuario:

<?php
$yo=$facebook->api('/me');
$fotoPerfil = "<img src='http://graph.facebook.com/".$yo['id']."/picture?type=large'/>";
echo $fotoPerfil;
?>

Publicar en muro:

<?php
$parametros=array('message' => 'Aprendiendo a desarrollar aplicaciones en Facebook',
				  'name' => 'BrianUR.info',
				  'caption' => 'Mi primer aplicacion en Facebook',
				  'link' => 'http://www.brianur.info',
				  'description' => 'Es genial',
				  'picture' => 'http://brianur.info/brianur.png',
				  'actions' => array(array('name' => 'Entra ya!',
                                      'link' => 'http://www.brianur.info')));
$facebook->api('/me/feed','post',$parametros);
?>

Creando una aplicación en Facebook Developers

Antes que nada para poder crear una aplicación debes tener tu cuenta verificada, para eso puedes agregar tu número de móvil y luego esperar a que te llegue un SMS con un código que debes usar para la verificación, he podido ver que a algunas personas no les llega el código y eso se debe al operador móvil que usan (Comcel), en mi caso usando Tigo funcionó perfectamente.

Para crear y editar aplicaciones se usa Facebook Developers, si es la primera vez que accedes a el te pedirá permisos y si ya habías creado una aplicación te darás cuenta que la interfaz cambió. Ahí veremos un botón llamado Crear una nueva aplicación:

App Display Name: Nombre de la aplicación.

App Namespace: Se usa para la url de la aplicación y se puede modificar cuando se quiera, en este caso quedaría algo como http://apps.facebook.com/brianur/ no debe tener mayúsculas ni espacios.

Así de fácil se crea una aplicación, ahora debemos “conectarla” con el servidor que tengamos para la aplicación y para eso en la pagina donde estamos vamos a Select how your app integrates with Facebook:

En este caso solo vamos a utilizar App on Facebook, luego hablaré de las otras opciones. En Canvas URL y Secure Canvas URL se especifica la URL del servidor que sencillamente lo que hace es mostrar en un iframe esa URL dentro de Facebook. En Secure Canvas agregas un https:// a la dirección, es importante que tu servidor soporte SSL y en caso de que no lo haga debes contactar con tu proveedor de hosting para que lo agregue a tu cuenta; este punto en si no es obligatorio de realizar, además de que pocas personas usan “navegación segura” pero es recomendable hacerlo.

¡Eso es todo! prueba tu mismo en editar todas las opciones disponibles para la aplicación como por ejemplo subir un icono para ella o escribir una descripción.

Ahí es donde Open Graph trabaja, permitiendo con un simple método incluir información precisa sobre nuestro sitio web para una correcta representación del contenido de nuestro sitio en redes sociales. En el caso específico de la red social de Mark Zuckerberg, usar este método no solo nos servirá a la hora de compartir un enlace sino también cuando un usuario le de un “me gusta” a un post, en vez de publicarse en su muro un simple enlace aparecerá el titulo, descripción y imagen que nosotros queramos; de esta forma podemos atraer nuevos visitantes/clientes.

¿Cómo funciona Open Graph?

Sencillo, solo debes incluir en la cabecera de tu sitio la etiqueta <meta> especificando la información de la siguiente forma:

<head>
<title>El Tales</title>
<meta property="og:title" content="El Tales"/>
<meta property="og:type" content="movie"/>
<meta property="og:url" content="http://tales.com/info/"/>
<meta property="og:image" content="http://visajes.com/tales.jpg"/>
<meta property="og:site_name" content="Tales"/>
<meta property="fb:admins" content="TU_ID"/>
<meta property="og:description"
content="El tales o visaje visajoso es aquel elemento visaje que se une con el tin
         para formar el visajimiento conocido como TinTales, el cual reune cosillas varias."/>
</head>

Cada una de las propiedades son bastante descriptivas, no todas son obligatorias pero las que siempre tienen que ir son: og:title, og:type, og:image, og:url. Los usos de este protocolo son muchos, para que te des cuenta puedes visitar la documentación en Facebook donde explican cada una de las propiedades que puedes usar.

Antes que nada hay que entender el funcionamiento de esta “nueva” API, la cual nació con la idea de simplificar el desarrollo de las aplicaciones. Básicamente nos permite obtener datos de distintos objetos como por ejemplo el objeto User o el objeto Event y las conexiones entre ellos. Esto se podría representar como una base de datos, por ejemplo si “buscáramos” el objeto user sería como hacer un select * from users y recibiríamos un array con los datos. Los objetos disponibles actualmente son: Users, Pages, Events, Groups, Applications, Status messages, Photos, Photo albums, Profile pictures, Videos, Notes y Checkins.

Cada objeto tiene un identificador Único (ID) con el que se puede acceder a su información que sería algo como https://graph.facebook.com/ID. Por ejemplo si probáramos con mi ID https://graph.facebook.com/brianurban nos debería devolver un array con nombre, ID, genero y otros datos que son públicos, pero en caso de querer acceder a datos privados como por ejemplo el email del usuario se debe pedir permisos y tener un token de acceso, sobre este tema detallare más en otro post.

Cada objeto esta relacionado con otros, a eso se les llama Conexiones como por ejemplo la conexión friends o la conexión posts a los cuales se puede acceder desde http://graph.facebook.com/ID/Conexion. Los objetos disponibles actualmente son: Friends, News feed, Profile feed (Wall), Likes, Movies, Music, Books, Notes, Photo Tags, Photo Albums, Video Tags, Video Uploads, Events, Groups, Checkins.

La Graph API también nos permite hacer consultas a varios objetos a la vez (multiquerys) de la forma http://graph.facebook.com?ids=ID,ID o hacer la consulta de datos específicos http://graph.facebook.com/1230140028?fields=email,name. Incluso podemos hacer un limit, imagínense lo que se podría demorar consultar todos los amigos de un usuario, suponiendo que ese usuario tiene 4.000 amigos, para ello solo haríamos  un limit a la conexión friends http://graph.facebook.com/ID/friends?limit=15.

Como ven el funcionamiento de esta API es bastante sencilla, teniendo en mente su funcionamiento se pueden hacer cosas fácilmente como por ejemplo publicar en el muro, crear albums… próximamente iremos viendo como hacer este tipo de cosas.

Enviar la aplicación al directorio

Cuando la aplicación tiene por lo menos 5 usuarios mensuales (no fans) se puede enviar al directorio de aplicaciones. La clara ventaja de realizar este paso es que podemos aumentar los usuarios de la misma y por otro lado he podido comprobar que Facebook es menos restrictivo con las acciones de la aplicación. El proceso de aprobación en el directorio se demora más o menos 24 horas.

Evitar hacer uso de publicaciones automaticas

Es cierto que con las publicaciones automáticas en el perfil de los usuarios la aplicación puede crecer muy rápido, pero Facebook puede considerar tu aplicación como generadora de spam y solo sería necesario un par de horas para que te la bloqueen ya que cuentan con un sistema de detección de acciones sospechosas. Mi recomendación es que las publicaciones sean generadas por eventos realizados por el usuario, como por ejemplo al dar click en un botón, o por lo menos hacer uso de sesiones para que solo se haga una publicación automática.

No usar rutas relativas

Cuando se trabaja en modo FBML no se puede usar rutas relativas ya que ocasionaría un error. En este caso obligatoriamente se deben usar rutas absolutas, una solución simple sería poner la ruta del servidor dentro de una variable y luego al necesitar la ruta se imprime esa variable junto al nombre del archivo.

Usar Javascript lo menos posible

Por motivos de seguridad Javascript no funciona del todo y menos cuando nuestra aplicación es usada en modo FBML. En el caso de necesitar usar mucho Javascript es recomendable que la aplicación funcione en modo iframe.

Establecer unos términos de uso

Para evitar malos entendidos con los usuarios o con el mismo Facebook es recomendado establecer dentro de la aplicación unos términos de uso explicando de algún modo el funcionamiento de la aplicación, el uso que se le da a los datos de los usuarios y las cosas que creas convenientes.  De esta forma cualquier persona que use la aplicación debe tener presente que acepta los términos de uso.

Pensar en el futuro de la aplicación

Al crear una aplicación debes pensar a futuro en posibles inconvenientes que te puedan surgir y tener algunas soluciones a mano. Por ejemplo si tu aplicación esta alojada en un servidor compartido y de un momento a otro crece significativamente lo más posible es que ese servidor no resista la gran cantidad de visitas o como en mi caso, me suspendieron la cuenta por alto consumo de CPU.

Si quieres ganar dinero con la aplicación usa algún sistema de pago por impresiones, en este tipo de casos usar Adsense no es muy rentable ya que ellos pagan por clicks y un click en una aplicación no valdría tanto como en una web común. Es cuestión de que pruebes con sistemas de publicidad para ver cual te paga mejor.

Facebook permite a las aplicaciones poder tomar datos concretos de los usuarios, como por ejemplo el nombre para dar un saludo, el ID, el sexo y entre otros. Por razones de privacidad hay datos que no se pueden obtener y para ello hay que pedir permisos al usuario. En este caso vamos a suponer que necesitamos el email y fecha de cumpleaños del usuario, al no tener los permisos veríamos algo como:

Hay varias formas de poder pedir permisos, en este caso veremos como hacerlo usando un tag FBML llamado fb:prompt-permission:

<fb:prompt-permission perms="email,user_birthday">Dar permisos a la aplicación</fb:prompt-permission>

Dentro del atributo perms se debe escribir los permisos que necesitamos separados por coma, en este caso email y user_birthday, adicionalmente hay otro atributo llamado next_fbjs con el que podemos redireccionar al usuario después de dar el permiso. Antes de cerrar el tag debemos escribir un texto, que se verá como un enlace que al ser clickeado mostrará una ventana pidiendo los permisos:

Al aceptar los permisos el enlace anterior no se volverá a mostrar y veremos los datos pedidos en la aplicación:

Anteriormente había explicado como mostrar aleatoriamente las frases desde un archivo de texto usando PHP, el problema de usar este método es que se puede volver muy fastidioso estar editando el archivo de texto para introducir una nueva frase; el uso de una base de datos convierte este proceso en algo más sencillo ademas nos de muchas más ventajas como la posibilidad de permitirle a los usuarios enviar sus propias frases, mostrar todas las frases en una tabla, etc.

Creando la base de datos en MySQL

Se debe crear una base de datos con el nombre que quieran, en este caso yo usare el nombre “app_quotes” y luego debemos crear una tabla con una estructura como la siguiente:

CREATE TABLE frases
 (
 id INT PRIMARY KEY AUTO_INCREMENT,
 frase VARCHAR(150)
 );

Después de crear la tabla deben insertar las frases para luego mostrarlas.

Recuperar las frases desde la base de datos

$conexion = mysql_connect("localhost", "usuario", "password");
mysql_select_db("app_quotes", $conexion);
$consulta = "SELECT frase FROM frases ORDER BY RAND() LIMIT 1";
$query = mysql_query($consulta, $conexion) or die(mysql_error());
$row = mysql_fetch_row($query);
$frase = $row[0];
echo "La frase del día es: ".$frase;

Publicar la frase en el muro

<script>
 function publicar(){
 var mensaje = "<?php echo $frase; ?>";
 var user_message_prompt = "¿Deseas comentar algo?";
 var user_message = "Que buena frase!";
 var attachment = {'media':
 [{'type':'image',
 'src':'http://tuweb.info/logo.png',
 'href':'http://apps.facebook.com/tuaplicacion/'}],
 'name': mensaje +'<br />',
 'description':'Frases Urban'};

 Facebook.streamPublish(user_message,attachment,'','',user_message_prompt);
 }
publicar();
</script>

Ver ejemplo