community-managers.euComo Crear una APP para Facebook     Pasos para crear aplicaciones para fans page, como para aplicaci...
community-managers.euAéreas donde se va a trabajar     Trabajaremos en las siguientes áreas.     Facebook     Pagina web p...
community-managers.euQue podemos hacer?     Algunos ejemplos de APP:     Para incluir en tu web, una Flash que lea los con...
community-managers.euComenzamos     Vamos a crear una APP para poder ver una cuenta de picterest en mi Fans Page.     Come...
community-managers.euInicio     Si es nuestra primera APP tendremos una pantalla con una pequeña guía de lo que     podemo...
community-managers.euCreate     Pulsamos sobre el botón Crear APP     donde podremos incluir el nombre de la APP, que nos ...
community-managers.euCreate     Nos encontramos con 3 opciones de     configuración: Básica, Auth Dialog y Avanced     Des...
community-managers.euConfiguración Básica     Logotipo de la APP de 75x75 pixels.     Icono de 16x16, recomendamos usar un...
community-managers.eu    Esquema general de instalaciónDesde mi web, o Fans Page o Correo,invito a que se instale la APP y...
community-managers.euProcedimiento de la Instalación     Base de datos:     Ÿ Historia       para guardar los accesos, el ...
community-managers.euYa estamos en la pasarela de la APP     Que nos pasa Facebook Cuando llama a nuestra APP?     Nos pas...
community-managers.euYa estamos en la APP     Si es la primera vez que como administrador vemos esta APP, tenemos que ir d...
community-managers.euFín     La semana que biene amplio información y mejoras.Como Crear una APP para Facebook
Upcoming SlideShare
Loading in …5
×

Como Crear una APP para Facebook

10,030 views
9,818 views

Published on

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

Published in: Education
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
10,030
On SlideShare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
87
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

Como Crear una APP para Facebook

  1. 1. community-managers.euComo Crear una APP para Facebook 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)Como Crear una APP para Facebook
  2. 2. community-managers.euAéreas donde se va a trabajar 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 iosComo Crear una APP para Facebook
  3. 3. community-managers.euQue podemos hacer? 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.Como Crear una APP para Facebook
  4. 4. community-managers.euComenzamos 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á.Como Crear una APP para Facebook
  5. 5. community-managers.euInicio Si es nuestra primera APP tendremos una pantalla con una pequeña guía de lo que podemos hacer.Como Crear una APP para Facebook
  6. 6. community-managers.euCreate 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.Como Crear una APP para Facebook
  7. 7. community-managers.euCreate 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...Como Crear una APP para Facebook
  8. 8. community-managers.euConfiguración Básica 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 URLComo Crear una APP para Facebook
  9. 9. community-managers.eu Esquema general de instalaciónDesde mi web, o Fans Page o Correo,invito a que se instale la APP y le explicoque es.Para ello le mando a un pagina intermediade instalación y como parametro el id de laAPP que hemos creado en Facbook.Este paso me vale para un historial de lasinstalaciones, 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%2Finstalltabretur n%2Easp%3Fapp%3DAPP_ID Donde le paso la APP_ID, y la URL de reedirecionamiento cuando haya elegido donde instalar. Me aparece la APP con un menú adicional para administrar y configurar. Después de elegir en que Fans Page quiero, el sistema me devuelva el id Si lo que quiero es poder modificar la configuración, en principio ya de las Fans Page elegidas. podíamos dar permisos de edición, pues ya se que es administrador. pero Con Esta información creo las entradas oportuna en la base de datos. 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 Una vez de actualizada los datos le reedirigo de nuevo a Facebook, pero amigos, aficiones, fotos, publicar en su muro.... esta vez ya a la APP de la Fans Page donde hemos elegido que se instale. Cuando menos cosa pidas, mas fácil será de que la acepten. Como Crear una APP para Facebook
  10. 10. community-managers.euProcedimiento de la Instalación 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. Ÿ APP Almacena 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. Ÿ Homes Yo 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 Page Ejemplo: tabs_added[2440669623578]=1#_=_ el facebook_id de la Fans Page es 2440669623578 y su valor es 1 de Correcto. Para obtener los distintos facebook_id de las Fans Page lo podemos hacer Código para leer la url de la Fans Page: recorriendo la colección de objeto Request y ver si el nombre tiene el texto set objHttp = Server.CreateObject("Msxml2.ServerXMLHTTP") tabs_added, con esto ya podemos leer dicho facebook_id objHttp.open "GET", "https://graph.facebook.com/" & facebook_id, false objHttp.setRequestHeader "Content-type", "application/x-www-form- Ahora creamos un registro en la Tabla Homes para cuando el visitante a la APP urlencoded" es el Admisnitrador, otro para cuando es Fans, y otro cuando No es Fans. objHttp.Send Usamos los parámetros que hemos definido en la Tabla APP que en definitiva data= objHttp.responseText es decir que paginas van a ver o reedirigir según quien es el que ve la APP. set dataString = parseObject(data,1) url_web =cstr(dataString("link")) 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. Ya podemos reedirigirlo. añadiendo a la url esto: ?sk=app_" & app_id 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.Como Crear una APP para Facebook
  11. 11. community-managers.euYa estamos en la pasarela de la APP 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 Procedimiento. signed_request=request("signed_request") Cargar los datos de la tabla APP con el app_id de la APP requestArray = split(signed_request,".") sig = Base64Decode(requestArray(0)) ´ esto es timestamp Cargamos el ID del registro ,que es administrador ,de la tabla data=Base64Decode(requestArray(1)) ´ homes, para esta app y esta pestaña. Ahora ya solo tenemos que descodifcar la cadena de parámetros si no es administrador: que está en formato JSON, creando un diccionario con los ver si tenemos una entrada en la tabla de homes con los valores. Valores que pueden ser de cualquier tipo, incluso array. parámetros que nos da facebook, con el fin de poder personalizar mas nuestra APP, si no existiera la creamos con Cuando configuramos en Facebook la APP, incluimos como los valores por defecto de la APP. parámetro a la url, la id de la APP, por eso la linea de app_id=request("app_id") Guardamos histórico. En nuestro caso es tan sencillo como esto: 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 set dataString = parseObject(data,1) como administrador, para así poder usar los parámetro de la facebook_id=cstr(dataString("page")("id")) APP. facebook_admin= dataString("page")("admin") facebook_liked=dataString("page")("liked") En las url del registro debería de ir si es para Fans o Nofans. 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.Como Crear una APP para Facebook
  12. 12. community-managers.euYa estamos en la APP 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 https://www.facebook.com/dialog/oauth?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 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 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_ENCODEComo Crear una APP para Facebook
  13. 13. community-managers.euFín La semana que biene amplio información y mejoras.Como Crear una APP para Facebook

×