Facebook: FBML para personalizar nuestra fanpage
Categories: Diseño, Posicionamiento - Tags: facebook, herramientas, PosicionamientoPrometo retomar luego los artículos sobre CSS3 sobre todo selectores y transiciones (varias de esas características aún no funcionan en FF o Safari aún).
En un post anterior hablé de las fanpage en Facebook y sus posibilidades como nuevo producto para nuestrso clientes, ahora voy a hablar de una aplicación llamada FBML y que interesantes posibilidades nos brinda.
¿Qué es FBML?
FBML es una aplicación que nos permite mostrar una página HTML personalizada incluyendo imágenes alojadas en un servidor externo, archivos flash, videos de youtube, links a nuestro sitio principal, landing page, etc; todo esto se mostrará en una pestaña adicional de nuestra fanpage que podemos ponerle el título que querramos.
¿Cómo instalo FBML?
Primero nos logeamos en nuestra cuenta de Facebook, damos click a “Aplicaciones” y buscamos FBML, en su página veremos que debajo del avatar hay un link para activarlo y podremos selecionar cualquiera de nuestras fanpage dando click al botón “Add to page” como se muestra en el screenshot.
¿Y ahora cómo lo personalizo?
Primero en nuestro perfil, vamos al link “Ads and pages” y configuramos la página a la que agregamos el FBML, veremos que ha aparecido una nueva opción llamada FBML en la categoría “Applications”, esta tiene opciones de configuración para mostrarse como una caja o como una pestaña(tab), yo prefiero desactiva box y activar tab. En la imagen esta paso por paso lo que he explicado.
Agregando contenido
Una vez configurada nuestra pestaña, ya podemos agregar nuestro código HTML, ojo si usamos CSS este debe ser en linea y no al inicio o intentando usar una hoja de estilos externa (la idea de maquetación es similar a la que se usa para un correo electrónico), luego lo grabamos y si todo esta bien deberiamos ver en nuestra fan page la nueva pestaña con nuestro contenido.
Para agregar imágenes no podemos subirlas directamente a Facebook, para esto las subimos a un servidor externo y las cargamos usando la ruta absoluta
1 | <img src="http://www.miservidor.com/miimagen.jpg"> |
¿Cómo añado flash o videos?
No podemos insertarlos usando javascript o directamente pegando el embed, facebook tiene su propia etiqueta para esto además la película flash no se ejecuta desde el inicio, primero se muestra una imagen y al darle click a esta recién se ejecuta el flash o el video. El código sería como este:
1 2 3 4 5 6 7 8 |
Como vemos en este caso estoy usando una tabla en la que indico el color de fondo, swfsrc nos indica la ubicación del flash (en este caso una pelicula youtube) y finalmente imgsrc nos indica la imagen que se mostrará en vez del flash hasta que le demos click.
Finalmente para los que quieran ver como queda esto, les dejo la direccion de una fanpage que hice como prueba
http://www.facebook.com/pages/Arequipa/Vietnam-Restaurant/313742104162?v=app_4949752878
disculpa ,pero como hago para ocultar un link hasta que pongan like
mi pagina es esta
http://www.facebook.com/#!/pages/GOOGLE-most-FUNNY-SECRETS/123827220981130?v=app_4949752878&ref=ts
pero el pproblema es que solo cubre un link
me podrias ayudar ?
Hola, de lo que he revizado sobre fanpages creo que eso no se puede hacer eso
Hola hice lo que dices y no me salio la verdad sera que no te entendi, me ayudarias?
Un abrazo
¿Cuál parte no te funciona? ¿Estás usando una fanpage(FBML no funciona con profiles comunes)?
master sabes como puedo agregar comentarios debajo de FBML. para q comenten lo que publique.
http://www.facebook.com/pages/WWWGOLESYMUJERESCOMAR/128338280517318?v=app_4949752878
gracia
Saludos. Estoy tratando de hacer una página de bienvenida de facebook y he visto que hay algunas que ocupan casi toda la ventana, es decir, que hasta desaparecen las cajas de la izquierda. Creo que lleva más código que un simple enlace a una imagen (en la aplicación fbml), pero no doy con la manera. Me podrían dar alguna pista de cómo “cargarme” las cajas o menus de la parte izquierda de mi página de bienvenida?…muchas gracias de antemano
Hasta hace un par de meses era más grande el espacio para el static fbml ya que no aparecían las cajas de la izquierda, si vez alguna página que actualmente mantenga ese tamaño por favor enviame el link
[...] limitado. Aunque podemos añadir pestañas y disponemos de buenas funcionalidades dentro del FBML, no deja de ser Facebook quien decide cómo mostrar las pestañas, dónde o cambiar determinados [...]
Estoy probando de colgar un video y no me visualiza los videos ni de youtube, ni de vimeo. La imagen que le pongo de inicio si que sale, pero cuando le doy click, se queda en blanco. Podrias echarme una mano para solucionarlo.
Gracias de antemano.
kisiera me ayudaras a como hacer para que al en trar a mi pagina de facebook lo primero que me aparesca sea el FBML personalizado
Saludos intento meter un codigo html en fbml pero no funciona… es un chatroom de la pagina escrito con html y utiliza javascript… eh visto ke en facebook funciona perfecto el javascrip en aplicaciones similares pero en mi caso el codigo no funciona…
tengo ke modificarlo por completo??
Facebook por motivos de seguridad no admite usar javascript tan fácilmente mi sugerencia es usa una aplicación propia de Facebook o usa un iframe
En Facebook busca “Editar Página” y en Propiedades hay una opción que dice primera pestaña por defecto esta Wall (muro) cambiala por la del FBML. OJO si eres el administrador o eres fan la primera página es Wall si o si, esa configuración es sólo para no fans.
Fijate bien en el codigo no inserto directamente la URL del video sino la URL del reproductor http://www.youtube.com/v/qvhUdNOMDiI, es probable que ahi este el problema
[...] para elegir que pestaña(tab) se va a mostrar al visitar nuestra Facebook Fan Page, elegimos la opción “Manage Permissions” y allí buscamos el combo llamado [...]
si la he editado mal, como puedo modificar o actualizar , desde donde se hace
Por ejemplo la pagina que dejan la determina que sea la primera solo se maneja por el url?
y en mi page las opciones de muro informacion y demas me salen al lado izquiero como puedo ponerlos arriva como en la pagina q pusieron de ejemplo??
Desafortunadamente eso era posible hasta hace unos días ya no puede regresar al viejo diseño
Hola, vi como quedo la bienvenida a tu pagina, pero tengo una pregunta, como es que aun tu pagina permanece con la barra horizontal de Muro- imformacion-Bienvenida- En las que tengo y de otros usuarios ya aparce en forma vertical a la izq y casi escondida. Hay forma de volver a cuando era horizontal, en que casos es que aparece aun horizontal? Gracias por tu respuesta,
Jose.
Lamentablemente no
[...] noticias para todas aquellas páginas de Facebook que como 31416k utliizan el lenguaje web FBML para construir nuestras “landing [...]
HOLA ME GUSTARIA SABER COMO HAGO PARA Q EL FLASH SE REPRODUZCA AUTOMATICAMENTE GRACIAS
No hay forma, eso lo hace asi Facebook por un tema de seguridad
No logro colgar la imagen en la pestaña estática….
En el nuevo facebook no aparece la opción página por defecto para los nuevos visitantes.
Que puedo hacer entonces para darle como página inicial a una fbml ??
Pues yo no consigo llegar ni a ahí. Busco la app y cuando la quiero instalar no me aparece “add to my fanpage”.
Juro que lo hago desde una fanpage, no desde el perfil. Qué puedo hacer?
Gracias!
Tienes un mail dónde pueda escribirte para preguntarte algunas cosas?
Por ej. cómo poder ponerle nombre a la aplicación para que no diga FBML
Muchas gracias!
No se puede cambiar el nombre, y la segunda siempre se llamará FBML-titulodelapagina. Por aqui puedes consultar, si deseas una asesoría particular pues se cobra, si deseas mayores detalles al respecto puedes contactarme por el formulario de contacto
Hola, yo ya tengo personalizado mi fanpage, pero quiero saber cómo hacer para que una vez que la gente ponga me gusta, cambie la imagen que se muestra.
Acá les dejo un ejemplo: http://www.facebook.com/cervezacoronachileoficial?ref=ts&sk=app_53441785989
Por favor mira mi pagina de bienvenida con FBML.
http://www.facebook.com/pages/Ligui/110196985716610?sk=app_4949752878
pero no se no me queda como yo quiero.
por que yo quiero un estilo asi
http://www.facebook.com/pages/Mario-Jeifry/132226260179871?sk=app_4949752878
me podrias decir a mi correo
cristian-mes-si@hotmail.es
como hago una similar?
Bueno estás un poco lejos de eso, la idea es primero diseñar la página en photoshop y luego usando la herraminta slices (cortes) se crean las distintas áreas y usando guardar para web se genera el código HTML
Hola!
me quedo en el 2 paso, no me da la opcion \
Hola, he intentado agregar esta aplicación a mi fan page pero no me da la opción. Sólo me permite agregar a los favoritos de mi fan page.
Qué estoy haciendo mal??
Un saludo!
hola quisiera saber como puedo hacer para poner el boton de like no entiendo alguien q me pueda ayudar a hacer se que ahi q pagar pero adonde ago todo esto?
no me salio nada men… copie y pegue los cod.. remplace los links, puse el video y la img que queria pero no me salio.. :s
hola!! no logro insertar una imagen!! ya subi una imagen a imageshack y copio el URL para colocarlo en
con “” y sin ellas igual no me sale
Hola, he intentado muchísimas veces personalizar la FBML Tab pero no he podido, no me sale la imagen y en vez de ella me aparece un signo de interrogación en azul. He seguido todo los pasos y nada, la imagen hay que subirla a un servidor personal como tal o se puede a Flickr o Picasa ¿?.
¿Que estoy haciendo mal? Gracias
Lo más probable es que la ruta sea equivocada o este incompleta
Image Shack no permite insertar imagenes en cualquier lugar
Hola que tal tu sabes como puedo poner el botón me gusta en una imagen? osea para que se vea pequeña la imagen y el botón me gusta para rápido hacerlo, o eeso mismo en una aplicación ¿? Gracias de Antemano
me podrias decxir como se hace algo parecido a esto http://www.facebook.com/ObispoSilva?ref=ts
¿COMO HIZO PARA PONER UN VIDEO DE VIMEO ALREDEDOR DE ESA FOTO?
hola muy buen post pero tengo una duda .. haora que no hay fbml estatico que alternativa puedo usar para personalizar mi pagina desde ya mill gracias espero su respuesta
edmblanco@hotmail.com
SALUDOS EXECELENTE POST Y ANTE TODO DARTE LS GRACIAS POR COMPARTIR TUS CONOCIMIENTOS. QUERIA SABER SI ES POSIBLE COLOCAR UN CODIGO HTML PARA UN REPRODUCTOR WEB. GRACIAS
Existe una aplicación GRATUITA en facebook llamada MITUCAN que genera automaticamente una web completa dentro de tu página de facebook. Una vez instalada se elige un diseño y se edita la web con un gestor de contenidos muy completo. Podeis echarle un vistazo en la web oficial http://www.mitucan.com
Espero sirva de ayuda. Saludos
Hola, muy interesante gracias, sabes cómo se puede cambiar la imagen de la aplicación? Para que aparezca el logo de la empresa por ejemplo.
¿Se pueden añadir dos pestañas de fbml?. Ya tengo una para que los seguidores inviten a sus amigos y me gustaría poner otra para ocultar la información a los no fans, pero no puedo o no se..¿podrías ayudarme?..gracias!
Si, aunque te recomendaría probar Static HTML
Hola me puedes aydar? Añadí un archivo .swf, pero los links a urls que hay en él no me funcionan. No es problema del flash porque funcionan en otro sitio.
Gracias desde ya.
Hola. ¿Cuántas pestañas de fbml puedo poner en mi fan page?. ¿Sólo una?. Gracias.
Se pueden poner varias, en la parte donde se personaliza el titulo hay una opcion para agregar más