images (6)

Cómo Añadir la Caja de Seguidores de Facebook y Twitter en tu Web (Fan Box)

Hoy en día es clave tener nuestra página web enlazada con las redes sociales ya sea una web personal, de negocios, de una empresa o de un hobby. Si quieres ser un buen Community Manager o simplemente estás dando tus primeros pasos en el mundillo de las redes sociales no puedes perderte este breve y fácil tutorial de cómo enlazar tu página web para conseguir más seguidores.

¿Queréis saber cómo añadir las famosas Cajas de Seguidores (Fan Box) de Twitter y Facebook a vuestra página web o blog?

Hoy vais a poder descubrirlo, ya que en este post os voy a detallar paso a paso como conseguirlo, además podremos configurarlas ligeramente para poder adaptarlas a nuestra página web.

Tutorial paso 1: Cómo añadir una caja de seguidores de Facebook a nuestra Web.

La Caja de Seguidores (Like Box) es un plugin social que permite a los dueños de una Página de Facebook obtener seguidores desde la web.

images (5)

Desde la caja de seguidores se puede:

  • Ver cuántos usuarios le han dado a me gusta a la página de Facebook.
  • Se pueden leer los últimos post de la página de Facebook
  • Se le puede hacer click fácilmente a “me gusta” a la página de Facebook sin necesidad de salir de la web.
Desde la siguiente web podéis configurar vuestra propia caja de seguidores:

http://developers.facebook.com/docs/reference/plugins/like-box/#

O podéis coger este código, editar la dirección de la página y poner la vuestra.

<div id="fb-root"></div><script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script><fb:like-box href="http://www.facebook.com/Verkot" width="252" show_faces="true" border_color="" stream="false" header="false"></fb:like-box>
Tutorial paso 2: Cómo añadir una caja de seguidores de Twitter a nuestra Web (Fan Box).

Vamos a ver cómo añadir una caja de seguidores de Twitter a nuestra web, esto ya no es tan trivial ya no que no hay soporte para esto por parte de los creadores de Twitter. Por lo que han sido terceros los que han creado esta utilidad para que todos nosotros podamos disfrutarlas.

images (4)

Por lo que es una aplicación no oficial, la cual permite a los visitantes de nuestra web seguir a nuestra cuenta de twitter sin salir de la web. Funciona siguiendo el algoritmo de la Fan Box de Facebook. Los usuarios de twitter podrán ver que otros amigos suyos también están siguiendo tu cuenta, por lo que esto ayuda mucho a conseguir seguidores y finalmente a conseguir más tráfico a la web desde las redes sociales.

Para añadir la caja de seguidores a nuestra web tenemos que añadir el siguiente código:

Fan Box Opción 1:
<script type="text/javascript" 
src="http://s.moopz.com/fanbox_init.js"></script><div 
id="twitterfanbox"></div><script 
type="text/javascript">fanbox_init("Verkot");</script>

Sustituir PauMompo por tu usuario de Twitter.

Esta caja tiene un tamaño aproximado de 300 px de ancho y no es editable, por lo que quizá no encaje bien en tu blog. Si es tu caso utiliza la opción 2.

Fan Box Opción 2:
<div>
<script type="text/javascript" src="http://s.moopz.com/fanbox_init.js"></script></p>
<div id="twitterfanbox">
<script type="text/javascript">fanbox_init("Verkot");</script></div>
</div>
<style>
.FB_SERVER_IFRAME {
width: 250px !important; /* Ancho del gadget */
height: 320px !important; /* Alto del gadget */
}
</style>

Puedes cambiar el tamaño del widget de Twitter, el ancho (width) y el largo (height) para ajustarlo a tu gusto para que se adapte a tu blog WordPress o cualquier otro.

Fin de como añadir una caja de seguidores de Twitter y Facebook en nuestra página web x)

Espero que os haya resultado útil el tutorial, si os ha gustado, espero que nos hagáis un follow en Facebook y/o Twitter x)

16 comentarios en “Cómo Añadir la Caja de Seguidores de Facebook y Twitter en tu Web (Fan Box)

  1. Nosotros estamos utilizando el código que puse en el artículo, te debería funcionar.
    Sólo tienes que añadirlo tal cual dónde quieras que aparezca.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos necesarios están marcados *

Puedes usar las siguientes etiquetas y atributos HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>