Facebook va dejar el código fbml por html atreves de los iframe mejor dicho, las pestañas iframe van a ser una forma más fácil de insertar código html en nuestras páginas Facebook.
Comencemos creando una aplicación facebook
Primero:
Creamos un index.html en un hosting que a ti te convenga (Yo uso miarroba http://hosting.miarroba.com/ ) y si van a usar un hosting gratuito de preferencia que sea sin publicidad.
En el nombre de tu página te recomiendo no poner nombres ofensivos o racistas ya que Facebook lo reconoce y no t dejara publicar.
Segundo:
El código que tendrá tu index.html será este, después lo modificas pero sin cambiar el width.(plantilla pestaña)
Pueden ver un ejemplo de cómo queda AQUI
Tercero:
Como tercer paso crearemos un aplicación facebook, para eso nos dirigimos a la página de desarrolladores y hacemos clic en crear aplicación.
Llena los datos y acepta las condiciones de facebook.
Tal como se muestra en la siguiente imagen (clic para agrandar)
Luego copias la captcha y aceptas.
Cuarto:
Ahora configuraremos la aplicación: En acerca de:
Tal como se muestra en la siguiente imagen (clic para agrandar)
En Sitio Web:
En site URL solo pones la url de la página que creamos para hospedar nuestra pestaña de la página de Facebook
(Ejemplo: solo la url sin index )
Tal como se muestra en la siguiente imagen (clic para agrandar)
Integración con Facebook:
En canvas URL: ponemos nuevamente la url sin el index.html (Ejemplo: solo url sin index)
Tamaño Iframe: Autoajustar
En url de pestaña: Solo ponemos en nombre con que guardamos que en este ejemplo es index.html (Ejemplo: index.html)
Facebook lo va reconocer automáticamente una vez guardado.
Tal como se muestra en la siguiente imagen (clic para agrandar)
Ahora Guardamos y terminamos con la aplicación.
Quinto :
Ahora nos dirigimos a Regresar a mis Apps.
Seleccionamos nuestra aplicación y hacemos clic en pagina de perfil de la aplicación.
Tal como se muestra en la siguiente imagen (clic para agrandar)
Una vez en el perfil nos vamos a agregar a mi página.
Tal como se muestra en la siguiente imagen (clic para agrandar)
Y terminamos el resultado es esto.
Tal como se muestra en la siguiente imagen (clic para agrandar)
Esta es una de mis otras paginas
Para Solucionar el problema del scrollbars en la pestaña de iframe de facebook facebook.
Buscamos en el código que les di anteriormente <body> y lo reemplazamos por :
Ahora buscamos </body> y de bajo de esto pegamos :
</apex:page>
Y el problema quedo solucionado.
Comencemos creando una aplicación facebook
Primero:
Creamos un index.html en un hosting que a ti te convenga (Yo uso miarroba http://hosting.miarroba.com/ ) y si van a usar un hosting gratuito de preferencia que sea sin publicidad.
En el nombre de tu página te recomiendo no poner nombres ofensivos o racistas ya que Facebook lo reconoce y no t dejara publicar.
Segundo:
El código que tendrá tu index.html será este, después lo modificas pero sin cambiar el width.(plantilla pestaña)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style>
.container {
width:495px;
height:600px;
display:block;
background:red no-repeat left top;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
color:#000000;
}
.mensaje {
text-align:center;
font-size:30px;
font-weight:bold;
padding-top:10px;
}
#mensaje1 {
text-align:center;
font-size:15px;
font-weight:bold;
padding-top:0px;
}
.url {
color:#B36B00;
font-size:25px;
text-align:center;
padding-top:20px;
}
</style>
</head>
<body>
<img src='http://2.bp.blogspot.com/-EtGsjqC5QyI/TfG1CMzNYrI/AAAAAAAAAFc/gh9bEpLtG-s/s1600/cab.png' >
<div class="container">
<div class="mensaje">BIENVENIDOS</div>
<div class="mensaje">DALE UN ME GUSTA Y VISITA NUESTRO BLOG</div>
<div class="url"><a href="http://elpuenteaxel.blogspot.com/" target="_blank">http://elpuenteaxel.blogspot.com/</a></div>
<div class="mensaje1"></div>
<div class="url">facebook.com/Elpuenteaxel</div>
</div>
</body>
</html>
Pueden ver un ejemplo de cómo queda AQUI
Tercero:
Como tercer paso crearemos un aplicación facebook, para eso nos dirigimos a la página de desarrolladores y hacemos clic en crear aplicación.
Llena los datos y acepta las condiciones de facebook.
Tal como se muestra en la siguiente imagen (clic para agrandar)
Luego copias la captcha y aceptas.
Cuarto:
Ahora configuraremos la aplicación: En acerca de:
Tal como se muestra en la siguiente imagen (clic para agrandar)
En Sitio Web:
En site URL solo pones la url de la página que creamos para hospedar nuestra pestaña de la página de Facebook
(Ejemplo: solo la url sin index )
Tal como se muestra en la siguiente imagen (clic para agrandar)
Integración con Facebook:
En canvas URL: ponemos nuevamente la url sin el index.html (Ejemplo: solo url sin index)
Tamaño Iframe: Autoajustar
En url de pestaña: Solo ponemos en nombre con que guardamos que en este ejemplo es index.html (Ejemplo: index.html)
Facebook lo va reconocer automáticamente una vez guardado.
Tal como se muestra en la siguiente imagen (clic para agrandar)
Ahora Guardamos y terminamos con la aplicación.
Quinto :
Ahora nos dirigimos a Regresar a mis Apps.
Seleccionamos nuestra aplicación y hacemos clic en pagina de perfil de la aplicación.
Tal como se muestra en la siguiente imagen (clic para agrandar)
Una vez en el perfil nos vamos a agregar a mi página.
Tal como se muestra en la siguiente imagen (clic para agrandar)
Y terminamos el resultado es esto.
Tal como se muestra en la siguiente imagen (clic para agrandar)
Esta es una de mis otras paginas
Para Solucionar el problema del scrollbars en la pestaña de iframe de facebook facebook.
Buscamos en el código que les di anteriormente <body> y lo reemplazamos por :
<apex:page>
<body style="overflow: hidden">
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.Canvas.setAutoResize();
};
(function() {
var e = document.createElement('script'); e.async = true;
e.src = document.location.protocol + '//connect.facebook.net/en_US/all.js';
document.getElementById('fb-root').appendChild(e);
}());
</script>
Ahora buscamos </body> y de bajo de esto pegamos :
</apex:page>
Y el problema quedo solucionado.