Personaliza tu pagina en la Platafoema facebook

CREIX AMB

INTERNET

2

1. El entorno de desarrollo

1.1. El entorno de desarrollo

Debes utilizar los lenguajes de código abierto HTML, CSS, SVG, Ajax y otras tecnologías para aplicaciones Web (WebApps). Las páginas que desarrolles, deben ser accesibles a las personas con discapacidad (WCAG), adecuadas para su internacionalización, y hacer que funcionen en dispositivos móviles.

1.2. La red social FacebookTodas las referencias a tu producto en la plataforma Facebook deben ser llamadas "aplicaciones", no widgets ni gadgets.Terminologia y uso correcto de la promoción de tus aplicaciones:Correcto: la empresa lanza una nueva presentación de diapositivas de la aplicación en la plataforma Facebook - o - Empresa Implementa Facebook Connect para hacer (producto / servicio / sitio) más Sociales.Incorrecto: Aplicación de la empresa y Facebook Lanzamiento Nueva PresentaciónEl plomo no puede hacer referencia a Facebook como el anuncio de esta noticia.Correcto: hoy la compañía anunció una nueva aplicación de contabilidad basado en la plataforma de Facebook.Incorrecto: Sociedad y Facebookk Plataforma anunció hoy una nueva aplicación de contabilidad en Facebook.

3

1.3. Elementos del escenario de la plataforma Aunque trabajamos como si de una página web se tratara; debes tener presente que la plataforma Facebook está diseñada con una arquitectura propia; con elementos o constructores que debes tener presentes. Enumeramos los principales:

• Canvas o aplicación lienzoPor lo general requiere que el usuario "Permita " a la aplicación acceder a su información para poder ser operativa.Una aplicación lienzo es una aplicación tipo “Farmville” o “Guerra de Pandillas”. Se trata de un proyecto complejo que debes desarrollar usando Dreamweaver o Flash, y normalmente requiere una Base de Datos y tecnología de servidor, además de saber implementarlo para la plataforma Facebook.Un Canvas, tiene su propia URL, distinta de una dirección URL de página de fans o empresa.

• Ficha personalizada o tabUna ficha personalizada es la ficha (en una página de fans) que vemos la parte superior de una página en Facebook con pestañas de navegación azul.Una ficha no es el Muro, ni el apartado información, u otras fichas Facebook genéricas de la plataforma.

4

• Muro o WallEs visible para usuarios registrados. Permite ingresar imágenes y poner cualquier tipo de logotipos en tu publicación. Una mejora llamada supermuro permite incrustar animaciones flash, etc.

• Facebook "Chrome"Facebook no es, propiamente una web, sino una aplicación de software , un programa, propietario, que se muestra dentro de tu navegador y se distribuye a través de Internet. Tu navegador sería como el “marco” que contiene a la plataforma Facebook. O Facebook seria como un navegador dentro de otro navegador.En terminología de diseño y desarrollo web , lo que conocemos como “·chrome”, se aplica a la arquitecturas de programas como los navegadores. Por ejemplo: Firefox, Google, Internet Explorer o Safari disponen de su propio y único “chrome”.

• IFrameCon un IFrame, el contenido de tu aplicación se encuentra en un documento HTML y no está alojado en los servidores de Facebook. El contenido se muestra en el Facebook "chrome" (todos los gráficos y el contenido que rodean el contenido de la solicitud - la cabecera, la columna de la derecha con los anuncios, etc…) a través del iFrame.

1.3. Maquetación HTML vs FBML estáticoNota de Enero 2011:Facebook está en proceso de abandonar FBML. Recomendado pues, poner en práctica tu aplicación usando un editor, como Adobe Dreamweaver, para trabajar usando HTML, JavaScript y CSS dentro de contenedores iFrame.Puedes utilizar el SDK JavaScript propio de Facebook y los plugins sociales que la plataforma te ofrece para incorporar las mismas características sociales disponibles en FBML.

1.4. Los plugins sociales de la Plataforma facebookLos plugins sociales son aplicaciones de plataforma, que funcionan como porción de código en una página web.Tienes disponibles las siguientes aplicaciones de plataforma, o plug-ins sociales: • Botón “Me Gusta”: Permite compartir páginas de usuarios, de tu sitio a su perfil de Facebook, con un solo clic.• Recomendaciones: Ofrece a tus usuarios sugerencias personalizadas en las páginas de tu web.

5

• Botón Inicio de sesión: Muestra imágenes de perfil de los amigos del usuario que se han registrado en tu sitio Web, además de un botón de inicio de sesión para la plataforma Facebook.• Comentarios: Permite a los usuarios comentar sobre cualquier tu sitio.• Feed de Actividad: Muestra a los usuarios lo que sus ‘amigos’ están haciendo.• Facepile: Muestra las imágenes de perfil de Facebook de usuarios que han “gustado” de la página o se han inscrito en tu sitio.• Ventana Modal “Me Gusta”: Permite a los usuarios visualizar tu página de Facebook y ver el flujo directamente.

1.4. Interacción JavaScript vs FBJS (Facebook JavaScript)

La plataforma Facebook ha adoptado un enfoque diferente a la conocida solución a usar <iframes> para poder ejecutar código JavaScript de un dominio propio a un dominio privado. El código JavaScript que “entregas” en una aplicación, es analizado, y cualquier identificador (nombre de las funciones y variables) se antepone con tu identificador propio de aplicación. Por ejemplo, el código siguiente bloque:Observamos que el código JavaScript de nuestra aplicación siempre debe ir entre etiquetas de comentario.1.5. Hojas de estilo CSS en FacebookFacebook puede trabajar con Hojas de Estilo que edistemos desde Dreamweaver, con el fin de poder ofrecer a nuestros usuarios una experiencia satisfactoria e idéntica al de nuestro sitio web.

6

La misma CSS que utilices en tu sitio web, es la que utilizarás para tu aplicación Facebook, comprobando que se visualiza en todos los navegadores.La excepción a tener en cuenta será Internet Explorer en sus versiones previas a 8

Nuestra FBML con la hoja de estilos CSS asociada

Deberás tener presente que las versiones anteriores de ciertos navegadores com Internet Explorer, no “renderizan” la página de la misma manera que las versiones actuales.Si quieres usar estilos propios CSS en tu ficha personalizada Facebook para trabajar con Internet Explorer / IE 6, IE 7 o IE 8, debes utilizar una hoja de estilos externa.Par aun mejor desarrollo y trabajo, sisempre debes strabajar con Hojas de estilo externas a FBML y tu aplicación para la plataforma Facebook.Utilizaremos la etiqueta <link> conocida en HTML, e introduciremos el código en el cuadro de diálogo de FBML.Copias stu hoja de estilos CSS externa URL a tu estáticas cuadro FBMLLa dirección URL de la hoja de estilos es lo que está en la barra de direcciones de tu navegador (en la parte superior)En el ejemplo, la dirección es: http:// www.la-teva-empresa.com /de/marketing/facebookAñades <link rel="stylesheet" type="text/css" href="http://www.la-teva-empresa.com/el teu-stylesheet.css?v=40.0" />La "? v = 40.0"anexada al final de la CSS , obliga al archivo Facebook a actualizar su caché. Cada vez que modifiques el CSS externo que necesitas, incrementar ese número a cargar en la versión en caché de Facebook de tu hoja de estilo.

7

2. Planificación del proyecto

2. Diseño

2.1. Requisitos de tamaño

Una ficha personalizada tiene un ancho máximo permitido de 520 píxeles.Los Canvas o Aplicaciones de lienzo, tienen una anchura máxima permitida de 760 píxeles. Cuando se añaden como una ficha en una página de fans o de empresa , la anchura máxima permitida es de 520 píxeles.

2.2 FBML

Facebook Mark-Up language (FBML) es un lenguaje propietario de etiquetas o tags de la plataforma facebook. Si conoces HTML no debes stener problema en conocer FBML.

El etiquetado de FBML sirven para mostrar dentro de una aplicación de Facebook items específicos de esta red social de una manera sencilla e intuitiva.FBML Facebook permite utilizar muchos de las etiquetas de HTML.

8

Instalar FBML

Para acceder a FBML y personalizar nuestra página con el uso d este lenguaje, primero debes instalar la aplicación FBML:

Nos dirigimos a la página de aplicaciones estáticas FBML y agregamos la aplicación a nuestra página de empresa.

En nuestra página, hacemos un clik en Editar página. Nos dirigimos al final de la página: Más aplicaciones -> FBML estático.

9

2.3. Diseño dispositivos móviles

Gracias a FBML podemos acceder, mdianye el uso de un simple elemento o etiqueta, a tu móvil a

Si quisiéramos crear aplicaciones más avanzadas, deberemos hacer uso de las herramientas de desarrollo (SDK) propias de la plataforma.

La plataforma Facebook te ofrece SDK para IOS (iPhone, iPod Touch y IPAD) y Android. Ambos son de código abierto y alojado en GitHub.com. Estos SDK te permiten: Mostrar usuarios de Facebook, cuadros de diálogo, modificar el contenido del Muro, …Identificar a los usuarios del sistema para iniciar sesión en Facebook y conceder permisos a la aplicación: Una de las características más atractivas del SDK es el inicio de sesión que permite a un usuario el acceso a la plataforma Facebook una vez solamente, y no cada vez que utiliza la aplicación u otra aplicación compatible con Facebook.com

3. Crear el primer aplicativo Facebook

10

Para crear el primer aplicativo Facebook , nos dirigimos a otra página, dónde podremos editar la información que queremos añadir en nuestra aplicación.

Una vez hayamos guardado los cambios, ya tendremos nuestra aplicación disponible como pestaña de nuestra página.Podemos modificar nuestra aplicación cuando queramos, repitiendo los pasos anteriormente descritos.

Esrablecemios un vinculo a nuestra página de empresa FBML mediante el cuadro de diáologo de la plataforma.

Necesitaremos unos conocimientos básicos de FBML, que vamos a detallar a continuación.

11

4. Como usar FBML

4 Añadiendo Video de YouTube o Vimeo

· Para YOUTUBE:

insertas el siguiente código en el cuadro de diálogo FBML

“swfsrc” es el valor absoluto de la URL al objeto flash que quieres agregar. “imgsrc” es la imagen de la vista previa.Reemplazas “xxxxxxxxxx” con la ID del video de YouTube. ( Por ejemplo: 6zlHAiddNUY )Cambiamos los valores “swfbgcolor” y “imgstyle” , si es necesario.El valor de la URL de “imgsrc” puede apuntar a una imagen online, o de nuestro servidor.

Para VIMEO

El proceso con Vimeo, aunque similar, presenta una serie de variacionesEn Vimeo.com, seleccionamos el video que queremos implementar y hacemos “clic” en el boton EMBED,

12

copias el codigo que ofrece la plataforma Vimeo en un editor como Dreamweaver y lo implemetas en la casilla de FBML de la plataforma facebook

4.3. Mostar contenido específico para fans y membresía del grupo

Con un editor como Dreamweaver escribimos el siguiente código que implementamos en el cuadro de diálogo de FBML

4.4. Añadiendo Boton “Compartir”

Utilizas el siguiente codigo:

< fb:share-button class="url" href="la-teva-empresa a la plataforma facebook" />

Podemos tambien incluir meta FBML: Con la clase meta de FBML puedes especificar la imagen que se muestra en lugar de utilizar el logotipo por defecto e incluir una descripción que contiene más información sobre el contenido de tu página.

• meta name = "title" content = "" nombre de la página de fans "- el nombre• meta name = "description" content = "Descripción de la página de fans" - la descripción que deseas utilizar.• link rel = "image_src" href = "URL a la ubicación de la imagen " - si usted está usando una imagen alternativa, esto sería la ubicación en tu servidor• link rel = "target_url" href = "url de la página de fans en Facebook" - la dirección que va a compartir

4.5. Añadiendo Comentarios para productos

En una página personalizada FBML, puedes incluir un cuadro de comentarios y activamente testimonios, pensamientos, interacciones, reacciones ante un juego o concurso, etc

13

Es una de las maneras más fáciles y efectivas de hacer participar realmente a tus visitantes, tanto con tu marca como con los demás miembros. Funciona para productos de consumo, restaurantes, bares y eventos populares.

4.6. Añadiendo Contenido Flash

Creamos una página HTML en Dreamweaver:

y escribimos el siguiente código en nuestro cuadro de edición de FBML

4.7. Roll-Over de imágenes

En Dreamweaver editaremos el siguiente código que copiaremos en el cuadro FBML de la plataforma Facebook:

14

4.8. Añadiendo Google Analytics

Primero debes acceder a una cuenta propia de Google Analytics.Hacemos clic en “Añadir un nuevo perfil”. A continuación en la pantalla siguiente debes marcar la casilla “Añadir perfil para un dominio nuevo” y en la url poner www.facebook.esAceptamos y en la siguiente pantalla copiamos la ID que nos aparece.Accedes a tu página de Facebook, vamos a “Editar página” y editas la aplicación FBML copiando el código generado:Haces clic en "Editar página" situado debajo de tu imagen de perfil.Haces clic en "Aplicaciones".Te desplazas hasta la aplicación FBML que ya se ha creado para tu página.Insertas el código de Analytics.

15

5. Ejemplos de páginas personales y corporativasComo empresas han solucionado sus necesidades y la de sus clientes, los factores de la clave de éxito,…son modelos que deberemos tener presente y analizar para desarrollar nuestra personalización de página.Por tanto, antes de iniciar nuestro proyecto observaremos ejemplos dentro de la misma plataforma Facebook.

16

17

Guia de RecursosRECURSOSNom URL Observacions

Exemple. www.exemple.com Això es un exemple

Desarrollado Facebook

http://developers.facebook.com/

Pagina principal plataforma facebook

http://facebook.es

Consola SDK javascript

http://developers.facebook.com/tools/console/

Guia desarrollo móvil

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

Referencia FBML http://developers.facebook.com/docs/reference/fbml/