Desde hace tiempo Facebook se ha convertido en la red social que más visitas da a los sitios web, superando a otros servicios como StumbleUpon, Twitter o YouTube, entre otros. Y una forma de promocionar nuestro sitio web en Facebook es agregando un panel para fans, de forma que los visitantes se vayan sumando como seguidores en Facebook. Se trata del mismo panel de fans que pueden ver en la sidebar de este blog:
Lo primero que debemos hacer es tener creada la página en Facebook de nuestro sitio web. Si no la tienes creada, lo puedes hacer en este enlace y seguir los pasos que se indican. Allí personalizamos la página a gusto y una vez terminado este paso, vamos a este otro enlace donde creamos el panel para fans de nuestra página de Facebook.
Tenemos algunas opciones para personalizar el panel, como la cantidad de fans a mostrar, su tamaño o mostrar las últimas publicaciones. Una vez fijadas las opciones, le damos clic a Get Code, y ese código es el que debemos incluir en algún lugar de nuestra página web para mostrar el fan box. En WordPress se puede copiar el códgo en un widget, de forma que el panel de fans aparezca en la barra lateral.
Eso es todo. Agregando el panel para fans estamos difundiendo nuestro sitio en Facebook, y podemos aprovechar nuestra página de Facebook agregando contenido e interactuando con los fans de la página. Algo útil y necesario ya que gran parte del feedback generado en los sitios se ha volcado hacia Facebook.
5 Comentarios
Genial. Ahora me pongo a probar :)
También le puedes especificar la dirección de un archivo CSS para personalizarlo y que vaya más acorde con la apariencia del sitio. Ahora mismo no me acuerdo cómo se hace, pero yo lo hice con uno de mis blogs que tiene fondo negro para que la caja se viera del mismo tono.
No sabía de eso, sería bueno. Justo veía el código que inserta el widget y menciona un archivo css de Facebook, pero de ahi a cambiarlo no he visto donde. Si alguen sabe, que avise :)
No pude encontrar la documentación donde lo vi (hasta en eso Facebook es un desastre), pero revisé el widget que tengo agregado y el chiste es que se hace de esta manera: después de las etiquetas <script></script> están unas etiquetas llamadas <fb:fan></fb:fan> en donde van los parámetros; ahí es donde se especifica la dirección del archivo CSS.
Como ejemplo, en mi widget está más o menos así:
<fb:fan profile_id="blablabla" stream="0" connections="10" css="URLarchivoCSS" logobar="0" width="291"></fb:fan>
Para saber cuáles objetos y clases debía modificar, simplemente fui experimentando con Firebug hasta que salió. :D
Pongo de nuevo como ejemplo los estilos que estoy usando:
* {
}
.fan_box .full_widget {
background:transparent;
border:none;
}
.fan_box .full_widget .connect_top {
background:transparent;
}
.fan_box .full_widget .connect_top a, .fan_box .connections, .fan_box .connections_grid .grid_item .name, .fan_box .connections_grid .grid_item a:hover, .connect_widget_connected_text {
color:#FFF;
}
.fan_box .connections {
border:0;
}
.mhs {
color:#AAA !important;
}
Por cierto, parece haber un un pequeño bug según el cual la primera definición que se ponga es ignorada, por eso agregué una vacía que es esta:
* {
}
Gracias Manuel, voy a probarlo a ver :)
1 referencia