Cómo Poner Pagina de Facebook en tu Blog
El Like Box de Facebook, es la famosa caja con fotografías que vemos en muchos blogs, también conocida como Fan Box o Fan Page. Mediante el uso de ésta, los usuarios pueden hacerse seguidores (fans) de tu página de Facebook desde tu blog.
Quizás éste es uno de los plugins que más debes tener en cuenta, ya que si un usuario se hace fan de tu página, recibirá las actualizaciones en su cuenta de Facebook. Es un modo de suscribirse y estar al día, para los usuarios activos de Facebook.
Éste es el aspecto que suele tener un Like Box estándar:
A continuación, verás lo sencillo que es crearte el tuyo, personalizarlo e incluirlo en Blogger. ¡¡Vamos allá!!
Estos son todos los parámetros disponibles:
Vamos a servirnos de un ejemplo real, voy a crear un Like Box de Blogger Ayuda, utilizará colores claros, no mostrará la cabecera, permitirá ver las fotos de los fans, tendrá 600px de ancho y 350px de alto. Este sería el código:
Quizás éste es uno de los plugins que más debes tener en cuenta, ya que si un usuario se hace fan de tu página, recibirá las actualizaciones en su cuenta de Facebook. Es un modo de suscribirse y estar al día, para los usuarios activos de Facebook.
Éste es el aspecto que suele tener un Like Box estándar:
A continuación, verás lo sencillo que es crearte el tuyo, personalizarlo e incluirlo en Blogger. ¡¡Vamos allá!!
Paso 1: Creáte una página de Facebook
Una página de Facebook no es una cuenta de Facebook, una página no tiene amigos, tiene fans.
Si ya tienes una página de Facebook ¿que haces en este paso?... ve al paso 2. Si, por el contrario, no tienes página de Facebook, te voy a dar las indicaciones rápidas para que te la puedas crear:
- Si no tienes una cuenta de Facebook, creátela
- Entra en tu cuenta de Facebook y en el menú superior, haz click sobre la rueda dentada y selecciona la opción "Crear página"
- Sigue los pasos hasta completar el registro de la página, son muy sencillos, no te preocupes si ahora no seleccionas bien algunos parámetros, ya que luego los podrás modificar
- ¡¡Fellicidades!!... ya tienes una página en Facebook.
Paso 2: Configura tu Like Box
Facebook, al igual que la mayoría de redes sociales, dispone de una serie de herramientas e información para desarrolladores y, también como casi todas, sólo ofrece esta información en inglés. En todo caso, siguiendo estos pasos verás que sencillo es incluir tu Like Box, aunque no sepas ni papa de inglés.
Accedemos a la página oficial de Facebook para desarrolladores, esto es lo que veremos:
Si seguimos la numeración de la imagen, tenemos:
Accedemos a la página oficial de Facebook para desarrolladores, esto es lo que veremos:
Si seguimos la numeración de la imagen, tenemos:
- Facebook Page URL.- Esta es la URL de tu página en Facebook, accede a tu cuenta de Facebook y copia la dirección web aquí
- Width.- El ancho, en píxeles, que tendrá la caja, intenta que se ajuste al lugar donde la colocarás
- Height.- El alto, en píxeles, de la caja. Cuanto más grande hagas la caja, más fotos contendrá
- Color Scheme.- Plantilla de la caja, dispones de dos: light (clara) y dark (oscura)
- Show Friend's Faces.- Marca esta opción si deseas que se vean las fotos de tus fans
- Show Header.- Si marcas esta opción, se mostrará la cabecera de la caja "Búscanos en Facebook"
- Show Posts.- Si la habilitas, se mostrarán las últimas publicaciones de tu página de Facebook
- Show Border.- Indica si quieres bordes en la caja
Juega con estos parámetros y configúralo a tu gusto, una vez hayas terminado pulsa sobre el botón "Get Code", obtendrás una pantalla emergente como esta:
Por defecto te aparece el código HTML5, que es el que necesitamos. Como puedes ver, hay 2 secciones de código, el de la parte superior es el código Javascript del SDK de Facebook y el inferior es el código de nuestro plugin Like Box.
Paso 3: Añade el Like Box a Blogger
Añadir el código Javascript
Si ya tenías algún gadget de Facebook en tu blog no te hará falta volver a copiar el Javascript del SDK que te explico en este paso, éste Javascript solo necesita estar una vez en tu Blog.
<div id="fb-root"></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/es_ES/sdk.js#xfbml=1&version=v2.0";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
- Editamos el HTML.- Blogger > Plantilla > Editar HTML
- Buscamos <body>.- CTRL+F y escribimos "body"
- Pegamos el código Javascript de Facebook.- Copiamos el código que te he puesto arriba (Javascript) y lo pegamos justo debajo de la línea "body" que has buscado antes.
- Guardamos la plantilla
Importante:
No copies directamente el Javascript que te genera Facebook, puesto que no te funcionará en Blogger. Si lo copias te devolverá un error como éste::
The reference to entity "version" must end with the ';' delimiter.
El código que te he puesto arriba ya tiene resuelto ese problema, solo he tenido que modificar el fragmento que te he resaltado.
Añadir el código del plugin Like Box
<div class="fb-like-box" data-href="http://www.facebook.com/BloggerAyudaCom" data-width="350" data-height="300" data-colorscheme="light" data-show-faces="true" data-header="true" data-stream="false" data-show-border="true"></div>
- En Blogger, elegimos la opción Diseño y desde aquí elegimos la opción Añadir un gadget, en la sección de la plantilla donde queramos colocarlo
- Seleccionamos el gadget HTML/Javascript
- En contenido copia el código del plugin, que generastes en el "Paso 2" (el de la parte inferior)
- Guarda el gadget
- Mueve el gadget que acabas de añadir en la posición que desees
- Visualiza el blog
¡¡ Listo !! Ya tienes tu Like Box de Facebook funcionando en tu Blog.
Opciones avanzadas
El código Javascript que genera ahora Facebook es asíncrono, lo cual nos viene bastante bien para limar puntitos en el Page Speed y, por tanto, en el posicionamiento de nuestro blog. Siempre que puedas, utiliza este tipo de carga. Ojo, porque si ya has utilizado algún otro plugin de Facebook, no necesitarás incluir nuevamente el Javascript generado.
Para modificar nuestro Like Box, nos centraremos en la etiqueta DIV, recuerda:
<div class="fb-like-box" data-href="http://www.facebook.com/BloggerAyudaCom" ...></div>Mediante atributos "data" del elemento DIV, podremos pasarle parámetros al plugin de Facebook. La herramienta de construcción del Like Box es muy completa, de hecho solo hay un parámetro que no incluye: data-force-wall.
Estos son todos los parámetros disponibles:
| Data | Descripción |
|---|---|
| data-colorscheme | Combinación de colores: light (claro) o dark (oscuro) |
| data-force-wall | Para páginas de ubicaciones |
| data-header | Especifica si se muestra el título de cabecera de la caja: true/false |
| data-height | Altura del plugin en píxeles. Ej: 300 |
| data-href | Dirección URL de la página Facebook que se desea enlazar |
| data-show-border | Especifica si se muestra o no el borde: true/false |
| data-show-faces | Indica si se desean mostrar las caras de tus fans: true/false |
| data-stream | Si se desean mostrar las últimas publicaciones de la página: true/false |
| data-width | El ancho del plugin en píxeles. Ej:350 |
Vamos a servirnos de un ejemplo real, voy a crear un Like Box de Blogger Ayuda, utilizará colores claros, no mostrará la cabecera, permitirá ver las fotos de los fans, tendrá 600px de ancho y 350px de alto. Este sería el código:
<div class="fb-like-box"
data-colorscheme="light"
data-header="false"
data-height="350"
data-href="https://www.facebook.com/bloggerayudacom"
data-show-border="true"
data-show-faces="true"
data-stream="false"
data-width="600"></div>
No hay comentarios.