como crear una app para facebook

13
Como Crear una APP para Facebook Como Crear una APP para Facebook community-managers.eu Pasos para crear aplicaciones para fans page, como para aplicaciones externas, cuyo objetivo sea interactuar con los datos de facebook o implantar en una fans page datos de terceros, como una tienda online, pisterest, interportal... El proyecto se realiza bajo windows 2003 server, sql Server, IIS 6, y ASP. Tenemos que tener una cuenta como developer en Facebook. Una web SSL que funcione en todos los navegadores, pues firefox a cambiado y ahora no funcionan todos los certificados. Necesitaremos las siguientes funciones en ASP: Ÿ Función para decodificar base64 Ÿ Función para leer datos JSON Ÿ Función para encriptar-desencriptar. (Opcional)

Upload: jose-alfonso-benito-guerras

Post on 12-Jun-2015

9.009 views

Category:

Education


0 download

DESCRIPTION

Manual básico de como crear una app que usa datos de facebook.La hemos vuelto a subir pues no funcionaba muy bien el slideshare

TRANSCRIPT

Page 1: Como Crear una APP para Facebook

Como Crear una APP para Facebook

Como Crear una APP para Facebookcommunity-managers.eu

Pasos para crear aplicaciones para fans page, como para aplicaciones externas, cuyo

objetivo sea interactuar con los datos de facebook o implantar en una fans page datos de

terceros, como una tienda online, pisterest, interportal...

El proyecto se realiza bajo windows 2003 server, sql Server, IIS 6, y ASP.

Tenemos que tener una cuenta como developer en Facebook.

Una web SSL que funcione en todos los navegadores, pues firefox a cambiado y ahora no

funcionan todos los certificados.

Necesitaremos las siguientes funciones en ASP:

Ÿ Función para decodificar base64 Ÿ Función para leer datos JSONŸ Función para encriptar-desencriptar. (Opcional)

Page 2: Como Crear una APP para Facebook

Como Crear una APP para Facebook

Aéreas donde se va a trabajarcommunity-managers.eu

Trabajaremos en las siguientes áreas.

Facebook

Pagina web promocional o de instalación.

La propia aplicación

Esta podrá ser:Ÿ Tipo WEBŸ FlashŸ App AndroidŸ App ios

Page 3: Como Crear una APP para Facebook

Como Crear una APP para Facebook

Que podemos hacer?community-managers.eu

Algunos ejemplos de APP:

Para incluir en tu web, una Flash que lea los contenidos de tu Facebook, tus imagenes, y te

cree una galería, un museo, por el que puedas navegar y compartir con tus amigos.

Permitir escribir y publicar contenidos en tu muro de forma automática.

Capturar imágenes o video desde una webCam, modificarla y publicarla facebook, con el

fin de captar visitantes a tu page Fans.

Analizar lo que escriben tus fans en tu Fans Page y gestionarlo de forma externa.

Permitir ver en tu Fans Page contenidos de tu web o tienda Online.Permitir ver en tu Fans Page contenidos de otras redes sociales como Pinterest...Permitir ver y gestionar en tu Fans Page, ofertas, cupones descuentos, reservas.

Crear juegos o Aplicaciones para tu Fans Page con el fin de ganar seguidores, ofrecer

servicios, soporte...

Convertir tu Fans Page en un producto más profesional.

Page 4: Como Crear una APP para Facebook

Como Crear una APP para Facebook

Comenzamoscommunity-managers.eu

Vamos a crear una APP para poder ver una cuenta de picterest en mi Fans Page.

Comenzamos dando de alta la APP en Facebook.

Entrando en esta url y siempre que ya tengamos una cuenta de Developers.

https://developers.facebook.com/apps

En caso de no tener una cuenta, debemos de aceptar crea una ya que nos lo pedirá.

Page 5: Como Crear una APP para Facebook

Como Crear una APP para Facebook

Iniciocommunity-managers.eu

Si es nuestra primera APP tendremos una pantalla con una pequeña guía de lo que

podemos hacer.

Page 6: Como Crear una APP para Facebook

Como Crear una APP para Facebook

Createcommunity-managers.eu

Pulsamos sobre el botón Crear APP donde podremos incluir el nombre de la APP, que nos confirma si es valido el nombre.y el nombre corto de Facebook y que no podrá tener números, y nos permitirá acceder a

la aPP de forma mas fácil de recordar.

Nos da la opción de poder guardar la APP en unos servidores gratuitos., yo no lo uso.

Page 7: Como Crear una APP para Facebook

Como Crear una APP para Facebook

Createcommunity-managers.eu

Nos encontramos con 3 opciones de

configuración: Básica, Auth Dialog y Avanced

Desde Básica podemos definir como

interactua la APP con Facebook.

Desde Auth Dialog podemos definir como es

la ventana de autorización de la aplicación

que el visitante se encontrará, permitiendo

cambiar los contenidos a mostrar,

privacidad, condiciones, fotos, texto...

Desde Advance podemos definir muchas

opciones referente a autenticación, como

saber si nos han desautorizado, información

ampliada de contacto, como terminos del

servicios, privacidad...

Page 8: Como Crear una APP para Facebook

Como Crear una APP para Facebook

Configuración Básicacommunity-managers.eu

Logotipo de la APP de 75x75 pixels. Icono de 16x16, recomendamos usar un gif transparante.Icono de Pestaña Si la APP tiene pestaña en facebook, 111x74, aunque luego cada cliente puede cambiar esta imagen por otra suya.App Domain si se va usar distintos dominios del que acceder a la instalación, o que requieran hacer reedirecionamiento, pues sólo harán reedirecionamiento a las dominios indicados aquí o a facebook.

En este caso como vamos a aprovechar un certificado que ya tenemos en otro dominio, hemos creador un dominio virtual en el dominio que ya tiene un certificado, y que apunta al mismo directorio que el que no lo tiene.

Definimos la Categoría de la APP

Seleccionar como la APP va a interactuar con Facebook:

WEBSITE: sirve para usar facebook como medio para autentificar el acceso a otras web, muy util.

APP en Facebook: Para las APP que se usan en las Fans Page, y que tienes dos URL: una para cuando navegas sin SSL y otra con SSL que se está implantando de forma predefinida. Por lo que es muy importante tener un certificado e tu servidor.

Esta APP también puede aparecer de forma de Pestaña en nuestro muro y ahora de forma mas destacada, por lo que podemos indicarles otras URL distintas que para el APP, o las mismas.

Yo recomiendo que pasemos el id de la APP, y los datos básicas de edad, que es 21 por defecto y la localización, para el tema del idioma en las URL´s

Si queremos que se vea esta APP en un móvil, debemos de indicarle su URL

Page 9: Como Crear una APP para Facebook

Como Crear una APP para Facebook

Esquema general de instalacióncommunity-managers.eu

Desde mi web, o Fans Page o Correo, invito a que se instale la APP y le explico que es.Para ello le mando a un pagina intermedia de instalación y como parametro el id de la APP que hemos creado en Facbook.

Este paso me vale para un historial de las instalaciones, habilitar o no la instalación. Aquí leo de la base de datos los parámetros de la APP, si está habilitada, guardo un histórico y reedirigo a la siguiente URL

https://www.facebook.com/dialog/pagetab?app_id=APP_ID&next=https%3A%2F%2Freservas%2Eonrural%2Ecom%2Fapp%2Finstalltabreturn%2Easp%3Fapp%3D

Donde le paso la , y la URL de reedirecionamiento cuando haya elegido donde instalar.

APP_ID

APP_ID

Después de elegir en que Fans Page quiero, el sistema me devuelva el id de las Fans Page elegidas.Con Esta información creo las entradas oportuna en la base de datos.

Una vez de actualizada los datos le reedirigo de nuevo a Facebook, pero esta vez ya a la APP de la Fans Page donde hemos elegido que se instale.

Me aparece la APP con un menú adicional para administrar y configurar.

Si lo que quiero es poder modificar la configuración, en principio ya podíamos dar permisos de edición, pues ya se que es administrador. pero por seguridad voy a pedir que me autorice, a través de Facebook, con el fin de obtener mas información del usuario, incluso su correo, listado de amigos, aficiones, fotos, publicar en su muro....

Cuando menos cosa pidas, mas fácil será de que la acepten.

Page 10: Como Crear una APP para Facebook

Como Crear una APP para Facebook

Procedimiento de la Instalacióncommunity-managers.eu

Base de datos:Ÿ Historia

para guardar los accesos, el país desde donde entran, la edad, la pestaña y la APP, así como la Fecha, hora, IP y algún otro campo configurable para saber que hace en la APP.

Ÿ APPAlmacena la información de configuración de la APP, por temas de seguridad, por si tengo que volver a crearla en Facebook, un campo que sería bueno encriptar, que es el KEY de la app,q ue tendremos que usar para pedir datos a fecebook, una vez que nos han autorizado a hacerlo junto con la clave que nos generó Facebook. También podemos guardar, si está activa o no, y las paginas de aterrizaje del administrador, de si es o no fans, y el tipo de APP.

Ÿ HomesYo la llamo así, y es donde se guardan los tipos de paginas que hemos creado y poder configurarlas, o reedirigirlas. Se crea una para cada tipo de parámetro que me da Facebook, así podré dirigir a una u otra URL en función de quien visita la APP, ademas incluye una entrada para el Administrador de la APP donde se almacena los distintos parámetros de las distintas APP y la clave de verificación y permiso de acceso a los datos de Facebook.

Como instalar una pestaña con nuestra APP en nuestras Fans Page? Desde está dirección: https://www.facebook.com/dialog/pagetab?app_id=APP_ID&next=Url_siguente?id=APP_ID nos va a permitir añadir a todas las Fans Page nuestras que queramos. Recomendamos reedirigir a esta URL desde otra pagina intermedia nuestra, donde le pasamos el APP_ID, así podemos tener un histórico de instalaciones, y sí esta url cambiara, no afectaría a lo anterior, pues lo cambaríamos en esta pagina intermedia.

El parametro Url_siguente debe de ser una pagina nuestra que analice lo que nos devuelve Facebook y a de estar en el mismo Dominio que configuramos en la APP.Los parámetro devuelto, tipo request, es algo así: app=124464054344609&tabs_added[244066962356363]=1#_=_&tabs_added[244066962353453]=1#_=_&tabs_added[2440669623578]=1#_=_Por un lado la app_id, y luego un parámetro por cada Fans Page que hemos elegido. cuyo nombre del query incluye el id de laFans PageEjemplo: tabs_added[2440669623578]=1#_=_ el facebook_id de la Fans Page es 2440669623578 y su valor es 1 de Correcto.

Para obtener los distintos de las Fans Page lo podemos hacer recorriendo la colección de objeto Request y ver si el nombre tiene el texto tabs_added, con esto ya podemos leer dicho

Ahora creamos un registro en la Tabla Homes para cuando el visitante a la APP es el Admisnitrador, otro para cuando es Fans, y otro cuando No es Fans.Usamos los parámetros que hemos definido en la Tabla APP que en definitiva es decir que paginas van a ver o reedirigir según quien es el que ve la APP.

facebook_id

facebook_id

Ahora ya solo tenemos que reedirigirle a la url de la aplicación en la Fans Page instalada, para ello, tenemos que averiguar cual es el link de esta Fans Page.

Esto lo hacemos con https://graph.facebook.com/facebook_id

que nos devuelve una cadena en formato JOSN con todos los datos de la Fans Page. Cogemos el parámetro link Ver en la siguiente pagecomo se hace esto.

Código para leer la url de la Fans Page:set objHttp = Server.CreateObject("Msxml2.ServerXMLHTTP") objHttp.open "GET", "https://graph.facebook.com/" & facebook_id, false objHttp.setRequestHeader "Content-type", "application/x-www-form-urlencoded" objHttp.Senddata= objHttp.responseTextset dataString = parseObject(data,1)url_web =cstr(dataString("link"))

Ya podemos reedirigirlo. añadiendo a la url esto: ?sk=app_" & app_id

Page 11: Como Crear una APP para Facebook

Como Crear una APP para Facebook

Ya estamos en la pasarela de la APPcommunity-managers.eu

Que nos pasa Facebook Cuando llama a nuestra APP?

Nos pasa un Request con el nombre signed_request y es dos cadena codificada en base64, separadas por un “.”Con hace un split, tendremos la primera cadena, que es un timestamp, que no vamos a usar, y la segunda cadena es la información de interés. Ambas están codificadas en base 64 y el resultado es un String en formato JSON, que es una forma de pasar parámetros como si fuera una cadena de texto sencilla y fácil de entender.

Así se hace, es ASP

signed_request=request("signed_request")requestArray = split(signed_request,".")sig = Base64Decode(requestArray(0)) ´ esto es timestampdata=Base64Decode(requestArray(1)) ´

Ahora ya solo tenemos que descodifcar la cadena de parámetros que está en formato JSON, creando un diccionario con los valores. Valores que pueden ser de cualquier tipo, incluso array.

Cuando configuramos en Facebook la APP, incluimos como parámetro a la url, la id de la APP, por eso la linea de app_id=request("app_id")

En nuestro caso es tan sencillo como esto:

set dataString = parseObject(data,1)facebook_id=cstr(dataString("page")("id"))facebook_admin= dataString("page")("admin")facebook_liked=dataString("page")("liked")facebook_locale=dataString("user")("locale")facebook_age_min=dataString("user")("age")("min") app_id=request("app_id")

Hay mas datos, pero estos son los que nos interesan.

Procedimiento.Cargar los datos de la tabla APP con el app_id de la APP

Cargamos el ID del registro ,que es administrador ,de la tabla homes, para esta app y esta pestaña.

si no es administrador:ver si tenemos una entrada en la tabla de homes con los parámetros que nos da facebook, con el fin de poder personalizar mas nuestra APP, si no existiera la creamos con los valores por defecto de la APP.

Guardamos histórico.

Reedirigimos a la url, que viene en el registro que hemos leído, donde también pasamos el ID de la tabla homes de la entrada como administrador, para así poder usar los parámetro de la APP.

En las url del registro debería de ir si es para Fans o Nofans.

Page 12: Como Crear una APP para Facebook

Como Crear una APP para Facebook

Ya estamos en la APPcommunity-managers.eu

Si es la primera vez que como administrador vemos esta APP, tenemos que ir directamente a la pagina de configuración, que será un formulario de entrada de datos, pero que antes debemos de pedir permiso al Administrador si podemos usar esta APP.

Esto se hace por seguridad, por saber si han eliminado o no la APP, y por obtener mas información de la Fans Page o del administrador, como amigos, gustos, contenidos, correo, fotos...

Esto se hace desde esta URL

client_id=APP_ID&redirect_uri=URL_de_vuelta&scope=TOKEN"

En TOKEN le ponemos email, y con esto podremos obtener el correo del cliente. uel de permisos:

https://developers.facebook.com/docs/authentication/permissions/

En URL_de_vuelta a una pagina para que lea los codigos de autorización, leer los datos necesarios y luego reedirigirla a la app de nuestra Fans Page. , esto lo hemos visto antes como ir a la app de la Fans Page. tambien incluimos el Id del homes del administrador, para actualizar los datos que nos devuelven.

Ojo reeidirigir esta URL en el “_TOP” pues si no nos saldrá un recuadro de ir a facebook, pues estamos en u iframe de la APP.

Lo mismo, desde una pagina nuestra ponemos el botón de autorizar, con el acceso a la política de por que te vamos a pedir esos datos.

Facebook nos devuelve en formarto normal como request, el code, y si a habido algun error el erro, la razon y la descripción.

Este code lo guardamos en la tabla de homes.

Ahora podemos leer los datos que nos interesa, usando

Recuerda las normas de tu Fans Page que debes de cumplir. http://www.facebook.com/page_guidelines.php

Recuerda de pasar todas las URL de vuelta en formato URL_ENCODE

https://www.facebook.com/dialog/oauth?

Msxml2.ServerXMLHTTP como ya hemos visto, y usando la siguiente URL

https://graph.facebook.com/oauth/access_token?client_id=APP_ID&client_secret=APP_KEY&code=CODE

que nos devuelve los datos en formato JSON

Page 13: Como Crear una APP para Facebook

Como Crear una APP para Facebook

Fíncommunity-managers.eu

La semana que biene amplio información y mejoras.