Instalar la nueva FanBox de Facebook en tu blog

lunes, 6 de julio de 2015


Hola artistas!! He pasado unos días de vacaciones rodeada de olas, arena y buena companía. :)

Ahora toca seguir escribiendo posts para el blog, que a pesar del trabajo que tengo siempre intento dedicar un momento del día a este espacio mágico.

Hoy he pensado en hablaros del nuevo plugin de Facebook para instalar una FanBox en nuestros blogs o webs. Ha cambiado la apariencia del plugin y la manera en que se instala, y en blogger da algún que otro problemilla (errores en el código).

Así que hoy os voy a explicar cómo ponerla paso a paso: 


#1 Visita esta página de Facebook, desde dónde podrás instalar el nuevo plugin


#2 Elige las opciones que quieras para configurar la FanBox


  • Facebook Page URL: Tienes que ingresar la URL de tu Página de Facebook (no la de tu perfil personal)
  • Width: Anchura que quieres que tenga el plugin. Si marcas la opción de "Adapt to plugin container width" no hace falta que pongas nada.
  • Height: Altura que quieres que tenga el plugin. Yo no lo he marcado porqué dejo que se ponga automático.
  • Adapt to plugin container width: Para que el plugin se adapte automáticamente a la anchura del sitio dónde quieras colocarlo de tu blog.
  • Show Friend's Faces: Márcalo si quieres que salgan las caras de tus seguidores de la página de Facebook.
  • Use Small Header: Para que la cabecera de tu caja de Facebook sea más estrecha o más ancha.
  • Hide Cover Photo: Para ocultar la cabecera de tu página.  
  • Show Page Posts: Para mostrar los útlimos posts que has publicado en tu página de Facebook. Yo lo tengo desmarcado para que la caja no ocupe tanto espacio en el sidebar.

#3 Obtén el código para instalar la FanBox de Facebook


Cuando hayas terminado de elegir las características de tu FanBox, tienes que darle a "Get Code" y te aparecerá una ventana con el código que debes insertar, como el que aparece en la imagen de arriba.

Pero si se inserta este código en nuestra plantilla blogger nos da error, así que vamos a ver cómo se soluciona:

3.1   Ve a Plantilla ➡ Editar HTMLDentro del recuadro de código debes pulsar CTRL+F (en caso de que tengas Windows) o CMD + F (en caso de que tengas un Mac) para que se te abra el buscador. En él buscamos: </body>

3.2   Justo debajo pegamos este código:

<div id='fb-root'/>
<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 = &quot;//connect.facebook.net/es_ES/sdk.js#xfbml=1&amp;version=v2.3&quot;;
  fjs.parentNode.insertBefore(js, fjs);
}(document, &#39;script&#39;, &#39;facebook-jssdk&#39;));</script>

Este código no nos dará errores ;)

Lo pegamos debajo de body para que la página nos cargue más rápido, pero si quieres que se cargue antes la FanBox, puedes poner el código justo antes de </body>.

3.3   Añadimos el CSS que nos proporciona Facebook en el Gadget que queramos de nuestro blog en Diseño➡ Añadir un Gadget.

Ahora ya puedes tener sin problemas la nueva FanBox de Facebook, más molona que nunca para que tus lectores le den "me gusta" a tu página. :)

Espero que os haya servido la información y que lo compartáis en vuestras redes sociales!!

Os deseo lo mejor para el comienzo de esta semana, un abrazo fuerte!!!

Laia

3 comentarios:

  1. Hola! me super sirvió el tutorial... Ahora, tengo una pregunta: cada vez que modifico algo (lo que sea: agrego, borro... o lo que sea, repito) de la plantilla de mi blog, el gadget del fanbox se me borra y tengo que agregarlo de nuevo. Es muy tedioso!!! Tenés idea de por qué pasa esto??? Es muy frustrante. Agradezco de antemano. Saludos!!!

    ResponderEliminar
    Respuestas
    1. Hola Strange Lola! Gracias por tu comentario guapa :D

      Pues lo que comentas es raro y tiene que ser muy molesto, a nosotros no nos pasa la verdad. No sé porqué motivo se te borrará la fanbox cada vez :s

      Espero que puedas solucionarlo pronto!! Un abrazoo!

      Eliminar
    2. Hola! Gracias por contestar! =) . Ya por suerte se arregló el problema ese que hacía desaparecer la fanbox. Sigo sin saber qué era, pero lo bueno es que ya no pasa =D .
      Te invito a que te pegues una vuelta por mi blog (si querés) y si te gusta que lo recomiendes (no tengo nada de subscriptores jaja, soy una loser xD): http://lolathestrange.blogspot.com
      Besos!!!

      Eliminar