Como son varios los comentarios donde preguntan por la llamada Like-Box de Facebook, vamos a ver si podemos agregar una. Primero que nada, debemos hacer dos cosas, crear la página y leer el artículo de El escaparate de Rosa 
donde se explica todo paso a paso.La aparición de los llamados Plugins Sociales ha cambiado levemente la forma en que podemos conectarnos con Facebook y, de alguna manera, lo ha simplificado ya que nos permiten agregar cualquiera de ellos de manera directa y con una línea de código. Para usarlos, necesitamos saber la ID de nuestra página que podemos ver al hacer click en Editar Página:
http://www.facebook.com/pages/edit/?id=ESTE_ES_EL_PROFILE_ID
Ya que estamos allí, seguimos.
A la derecha, hacemos click en Promociona con un "Me gusta" en tu página y nos encontraremos en el wizard del plugin:
Ya que estamos allí, seguimos.
A la derecha, hacemos click en Promociona con un "Me gusta" en tu página y nos encontraremos en el wizard del plugin:
Donde tendremos que agregar el ID y luego, seleccionar las diferentes opciones:
Facebook Page ID es el número identificatorio, también lo vemos al final de la URL de esa misma página
Width es el ancho en pixeles; puede ponerse cualquier valor
Connections es la cantidad de avatares de usuarios a mostra (poner cero si no se quiere ninguno)
Stream muestra miniaturas de las entradas públicas de nuestra página de Facebook
Header muestra una barra 'Encuéntranos enFacebook'
Con cada detalle que modifiquemos podremos ver una previsualización del resultado. Una vez que nos hemos decidido, hacemos click en Get Code donde nos darán dos opciones, usar un IFRAME o un código especial:
Width es el ancho en pixeles; puede ponerse cualquier valor
Connections es la cantidad de avatares de usuarios a mostra (poner cero si no se quiere ninguno)
Stream muestra miniaturas de las entradas públicas de nuestra página de Facebook
Header muestra una barra 'Encuéntranos enFacebook'
Con cada detalle que modifiquemos podremos ver una previsualización del resultado. Una vez que nos hemos decidido, hacemos click en Get Code donde nos darán dos opciones, usar un IFRAME o un código especial:
<fb:like-box profile_id="PROFILE_ID"></fb:like-box>Código que luego, si queremos, podemos modificar manualmente; por ejemplo:
<fb:like-box profile_id="PROFILE_ID" width="350" connections="5" stream="false" header="false"></fb:like-box>Si bien el IFRAME funcionará correctamente, me inclino por usar este otro código y para que este sea comprendido por nuestra web, deberemos agregar un script justo después de <body>:
<div id='fb-root'/>
<script type='text/javascript'>
//<![CDATA[
window.fbAsyncInit = function() {
FB.init({appId: 'PROFILE_ID', status: true, cookie: true, xfbml: true});
};
(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>
Por último, en nuestra plantilla, agregaremos el código de Facebook, alli donde se nos ocurra mostrarlo, por ejemplo, en un elemento HTML en la sidebar y, sugeriría, colocarlo dentro de un DIV:
<div id="fbfans">
<fb:like-box profile_id="PROFILE_ID"></fb:like-box>
</div>
¿De qué sirve ponerlos en un DIV? De ese modo, podemos controlar relativamente nuestro widget, sobre todo, el color de fondo que, por defecto es transparente:
#fbfans {
background-color: #FFF;
border: 10px solid #303941;
}
0 comentarios:
Publicar un comentario