Archivo

Posts Tagged ‘Graph API’

Facebook Para los Sitios Web

7 de agosto de 2011 1 comentario
Facebook f8 Conference

Image by grace mcdunnough via Flickr

Facebook Platform permite que su sitio web sea más social. Puede utilizar los Plugins Sociales, tales como el botón “Like” para conducir el compromiso del usuario con una sola línea de código HTML. El Login Button y Registration Plugin permiten simplificar o eliminar su registro de usuario y sesión. Por último, el Graph API le permite acceder a la gráfica social plena de un usuario determinado, que le permite crear una verdadera experiencia personal profunda.

Esta guía le guiará a través de los fundamentos de la creación de una aplicación Web que aprovecha estas características. Los ejemplos en esta guía en el uso de PHP para la programación del lado del servidor y HTML / JavaScript en el código de cliente. Estos ejemplos son muy sencillos y fácilmente traducibles a otros idiomas.

En este documento:

  • Social Plugins
  • Autenticación
  • Personalización
  • Analytics


Social Plugins

Social Plugins son la forma más sencilla de empezar a trabajar con la plataforma Facebook. Los plugins son integrables características sociales que pueden ser integrados en su sitio con una línea de HTML. Debido a que se hospedan en Facebook, los plugins son personalizados para todos los usuarios que están conectados a Facebook, incluso si están visitando su sitio por primera vez.

El Plugin social más importante es el Like Button, que permite a los usuarios compartir su página con sus amigos con un solo clic. Usted puede agregar un botón a una página con una etiqueta iframe:

Facebook developers like plugins

Hay una serie de opciones para el botón “Like”, incluyendo la opción de incluir los nombres y las fotos de los perfiles de los amigos del usuario, que también han gustado de la página. Aquí está un botón para el sitio de Facebook Developers:

Facebook developers like plugins

Una vez que se ha incluido el botón”Like” en su sitio, puede utilizar otros plugins sociales para convertir las interacciones de los usuarios en experiencias más atractivas a través de su sitio. Puede utilizar el complemento de Activity Feed Plugin para mostrar a los usuarios un flujo de gente como los últimos comentarios de sus amigos en su sitio. Puede utilizar el complemento de Recommendations Plugin para mostrar las recomendaciones personalizadas de la página a los usuarios basados ​​en los gustos y comentarios en todo el sitio. Aquí están las actividades y los plugins recomendados para el sitio de Facebook Developers:

Facebook developers like plugins

La mayoría de los Plugins sociales se pueden integrar con su sitio, simplemente, incluyendo la etiqueta iframe para el plugin dentro de su página. Hay varios plugins sociales, tales como los comentarios y en vivo, que requieren el uso de XFBML (eXtended Facebook Markup Language). XFBML es un conjunto de elementos XML que se pueden incluir en sus páginas HTML para mostrar Plugins Sociales. Cuando la página se carga, los elementos XFBML en el documento son procesados ​​por el SDK de JavaScript, lo que resulta en el plug-in adecuado que se quede en su página.

Desde Facebook Developers proveen los elementos XFBML para todos sus plugins Sociales. Por ejemplo, el botón “Like” también se puede colocar en su página utilizando el equivalente XFBML:

 Facebook developers like plugins

 

Las versiones iframe de los plugins de Facebook son los que más se utilizan, ya que requieren un mínimo conocimiento de la plataforma Facebook. Las versiones XFBML suelen ser utilizadas por los desarrolladores más sofisticados en busca de más control y consistencia en su código base.

Empezar no puede ser más sencillo. Sólo tienes que seleccionar el plugin de la página Plugin Social y siga los pasos en el configurador de siempre. Estas configuraciones, como a continuación, ayudará a configurar tu plugin y generar todo el código necesario para agregar a su sitio.

 

Like Config


Autenticación

Facebook te ayuda a simplificar y mejorar el registro de usuario y de inicio de sesión mediante el uso de Facebook como el sistema de identificación. Los usuarios ya no tendrán que rellenar otro formulario de inscripción o recordar otro nombre de usuario y contraseña para usar el sitio. Siempre y cuando el usuario esté suscrito en Facebook, automáticamente se firmó en su sitio también. El uso de Facebook para el inicio de sesión que proporciona toda la información que necesita para crear una experiencia social, personalizada desde el momento en que el usuario visita su sitio web en su navegador.

Facebook Platform usa OAuth 2.0 para la  autenticación y la  autorización. Mientras que usted puede agregar acceso a su sitio usando OAuth 2.0 directamente (ver Authentication Overview), de código abierto JavaScript SDK es la forma más sencilla de utilizar Facebook para iniciar sesión.

El SDK de JavaScript requiere que se registre su sitio web con Facebook para obtener una ID de la aplicación (o Id de aplicación). El Id de aplicación es un identificador único para su sitio web que asegura que tenemos el nivel adecuado de seguridad en el lugar entre el usuario y su sitio web. El siguiente ejemplo muestra cómo cargar el SDK JavaScript una vez que tiene su Id de aplicación:

 

Facebook developers like plugins 

Una vez que haya cargado el SDK JavaScript en tu página y se inicializa con su Id de aplicación, sólo tiene que agregar el botón Ingresar a su página utilizando el <fb:login-button>. El elemento XFBML como se muestra a continuación:

 Facebook developers like plugins

 

Cuando el usuario carga la página en su navegador, el SDK de JavaScript hace que el botón de Inicio de sesión aparezca en su página:

 

Login Button

 

Con el fin de que la sesión del usuario entre en su sitio, tres cosas deben suceder. En primer lugar, Facebook necesita para autenticar al usuario. Esto garantiza que el usuario es quien dice ser. En segundo lugar, Facebook necesita autenticar su sitio web. Esto asegura que el usuario está dando su información a su sitio y no a otra persona. Por último, el usuario deberá autorizar expresamente su sitio Web para acceder a su información. Esto asegura que el usuario sepa exactamente qué datos están revelando a su sitio.

Estos pasos pueden parecer complejo, pero afortunadamente todo lo que necesita hacer es utilizar el fb: login-botón y todos los que el usuario tiene que hacer es hacer clic en él. Cuando el usuario lo hace, el SDK de JavaScript se asegurará de que el usuario está suscrito a Facebook y que la solicitud proviene de su sitio web. A continuación se presentan un cuadro de diálogo de autorización en el navegador que ofrece información sobre su sitio y los datos del usuario que está solicitando. Por defecto, este diálogo tiene el siguiente:

 

Authorization Dialog

 

Si el usuario hace clic en Permitir (Allow), le dan el lugar del acceso a la información solicitada. Si el usuario hace clic, no permita que el diálogo se cierre y no haya información disponible para su sitio web. Por defecto, le dan acceso al nombre del usuario, imágenes y cualquier otra información que ha compartido con todo el mundo en Facebook (ver User Graph object para más detalles).

Si necesita acceder a más información, como la dirección de correo electrónico del usuario, etc., usted debe solicitar los permisos de esta información. Si usted puede hacer esto mediante la adición de los permisos que necesita el atributo permanente del fb:login-button like:

 

Facebook developers like plugins 

Cuando el usuario hace clic en el botón de inicio de sesión desde esta página, verá el diálogo de autorización a continuación. Tenga en cuenta que ahora hay dos nuevas secciones que describen la información adicional que su sitio está solicitando permiso para acceder.

 

Authorization Permissions

 

Una lista completa de los permisos está disponible en la referencia de los permisos. Hay una fuerte correlación inversa entre el número de permisos de sus solicitudes así como el número de usuarios que permitirá a los permisos. Cuanto mayor sea el número de permisos que pedir, cuanto menor será el número de usuarios que se les conceda, por lo que recomendamos que sólo solicite los permisos que sean absolutamente necesarios para su sitio.

En la adición del Login Button, se le ofrece la Registration Plugin. El plug-in de registro ofrece dos características clave que no están disponibles con el botón de inicio de sesión: el apoyo a los usuarios sin cuentas de Facebook y la posibilidad de solicitar información adicional del usuario que Facebook no puede tener o poner a disposición.

Cómo utilizar el plug registro es tan sencillo como utilizar el botón de inicio de sesión. Usted sólo necesita usar el elemento de la página fb: registration XFBML, en lugar del botón de inicio de sesión:

 

 Facebook developers like plugins

 

Si el usuario no está conectado a Facebook, verá el siguiente formulario. Tenga en cuenta que el formulario no está precargado con toda la información del usuario, pero hay un enlace para acceder a Facebook para hacerlo.

 

Registration No Login

 

Si el usuario ya está conectado a Facebook o decide acceder desde el formulario de inscripción,  podrá ver lo siguiente. Observe que el formulario está precargado con su información de Facebook.

 

Registration Login

 

Una vez que el usuario revise la información y / o entra en los campos personalizados (en el ejemplo anterior, favorite_car es un campo personalizado que el usuario debe rellenar directamente, ya que no se dispone de datos que actualmente forma parte del perfil del usuario de Facebook), el usuario hace clic en Registro. Esto iniciará el proceso de autenticación y autorización que se indica con el siguiente diálogo:

 

Registration Sign in

 

Con completar la autenticación / autorización, redirigir al usuario a cualquier URL que se coloca en el atributo redirect-uri  del elemento fb:registration que completa el proceso de registro.

El botón de inicio de sesión y el plug-in de registro le permite recuperar fácilmente los más de 600 millones de usuarios de Facebook a su sitio. Al hacerlo, también puede eliminar o reducir partes enteras de su código base. Usted puede aprender más acerca de cómo agregar Ingresar con Facebook a su sitio mediante la lectura de la documentación para el botón de inicio de sesión, el plug-in de inscripción y el SDK de JavaScript.


Personalización

Mientras los Plugins Sociales ofrecen una manera fácil de personalizar su sitio web, una vez que haya añadido a su sitio de inicio de sesión, puede acceder a toda la potencia de la API gráfica para crear una experiencia aún más personalizada a los usuarios. Puede utilizar la API de gráficos para el acceso al perfil del usuario de Facebook, utilizando estos datos en su experiencia propia de costumbre. Puede utilizar la API de gráficos para publicar en el Muro del usuario de Facebook y su News Feed. Puede utilizar la API de gráficos para el acceso gráfico social de los usuarios, llevar a sus amigos directamente a su sitio todo en su experiencia propia de costumbre.

el Javascript SDK proporciona una forma sencilla de acceder a la API gráfica: FB.api. Esta función tiene un argumento de cadena que especifica la parte del gráfico de destino y una función de devolución de llamada que se invoca cuando finalice la llamada. A continuación se muestra cómo utilizar FB.api () para recuperar la imagen del usuario y el nombre de la API de gráficos y muestre en una página dentro de tu sitio:

 

Facebook developers like plugins 

Otra manera de personalizar su sitio con el SDK de JavaScript es la función FB.ui. Esta función llama a la plataforma de diálogos en el contexto de su sitio. Puede utilizar la función de enviar FB.ui para alimentar al usuario o permitir que inviten a nuevos amigos. La siguiente muestra de cómo utilizar el diálogo de alimentación de su sitio:

 

Facebook developers like plugins 

Cuando esta página se carga en el navegador del usuario, el SDK de JavaScript hará el siguiente cuadro de diálogo que el usuario puede utilizar para enviar a su alimentación. Se puede establecer una serie de valores predeterminados para el cuadro de diálogo, que el usuario puede modificar o anular antes de su publicación.

 

Web Dialog

 

Una de las mejores maneras de aprender lo que es posible con el SDK de JavaScript es la JavaScript Console. La herramienta ofrece una serie de ejemplos que se pueden ejecutar directamente en la propia consola antes de realizar ningún cambio en su sitio.

El SDK de Javascript le permite acceder a la API de gráficos y a los cuadros de diálogo de la plataforma de código de cliente, pero algunas de las integraciones más interesantes para acceder a la API de gráficos de código de servidor se ejecutan en el servidor web. El SDK de JavaScript guarda los detalles para el usuario conectado en una cookie llamada fbs_YOUR_APP_ID. El siguiente ejemplo de PHP que muestra cómo utilizar el acceso a esta cookie y personalizar la página que se genera en base a esta información:

 

Facebook developers like pluginsFacebook developers like plugins 

Usando la cookie JavaScript SDK es sólo una de varias maneras para acceder a las credenciales del usuario y la información de código de servidor. La Security Guide pone de manifiesto cómo llevar a cabo la autenticación y autorización directamente desde el servidor Web lo que le permite acceder a la API gráfica sin necesidad de utilizar ningún código del lado del cliente.


Analytics

Usted puede obtener análisis detallados sobre los datos demográficos de los usuarios y cómo los usuarios están compartiendo desde su sitio web con Insights.

 

Facebook Insights


Insights proporciona informes desglosados ​​por dominio y por aplicación. Estos informes incluyen datos ricos sobre los usuarios que comparten contenidos de su sitio en Facebook y otras aplicaciones de Facebook habilitadas sin importar dónde se originó la actividad. Por ejemplo, si un usuario pone una URL de su sitio en un mensaje de estado de Facebook,  los datos se incluyen en el análisis de su dominio.

Los datos de Insights también está disponible en la API de gráficos para que pueda integrar los datos de Facebook con su propio análisis, los sistemas internos de análisis.


Próximos pasos

Este ha sido un examen rápido de las principales características disponibles en su sitio Web en la plataforma Facebook. Los conceptos básicos documentados proporcionan una visión más profunda en los diferentes elementos de la plataforma Facebook. La API de gráficos es un gran lugar para comenzar. Si usted está buscando un ejemplos del mundo real que le ayudará a comenzar a construir por favor consulte los ejemplos. Si usted está en busca de inspiración, echa un vistazo a Showcase.

Artículos relacionados:

Facebook Insights: Google Analytics para los

¿Cómo promocionarse en las Redes Sociales?

10 Casos prácticos del B2B en Facebook

101 Herramientas para ayudarle a generar clientes

Seguir

Recibe cada nueva publicación en tu buzón de correo electrónico.

Únete a otros 5.587 seguidores

%d personas les gusta esto: