Sociabilizar el blog (I) - "Followers" y botones "Follow"

Con mi adhesión a las redes sociales me he visto en la necesidad de añadir nuevas herramientas al blog con el fin de "sociabilizarlo". Para ello iré indicando post a post cada paso realizado o herramienta añadida para integrar esta web en ese mundillo.

En primer lugar, para que las redes sociales resulten útiles a la web es necesario conseguir un número considerable de "followers" o seguidores. Un "follower" o seguidor es una persona que sigue el blog a través de una red social.

• TWITTER:
  
  En Twitter un "follower" es una persona que recibe tus tweets en su página de inicio de Twitter (o en su cliente para Twitter).
  
  En Twitter la solicitud de un follower no es mútua. Es decir tú no tienes que aprobar que alguien te pueda "seguir" y tampoco tienes la obligación de ser follower (seguidor) suyo.
  
  Elementos añadidos al blog
  
  
  
  He añadido al blog un botón "Follow" que al ser pulsado redirige a la página de Twitter del usuario que pulsó, para activar la suscripción de seguimiento de mis mensajes en su página.
  
  Este botón lo he hecho flotante para que así permanezca en pantalla y accesible al usuario sea cual sea su movimiento por el blog.
  
  Para ello, en Blogger, se hace lo siguiente:
  
  1. Vamos a Personalizar y luego a Diseño->Edición de HTML. Entonces damos a Expandir plantillas de artilugios.
  2. Ahora, en el código de nuestra plantilla buscamos la siguiente etiqueta:
     

     </body>

  3. Justo antes añadimos el siguiente código:
     

     <a href="http://www.twitter.com/elblogdeelSant0"><img border="0" src="URL-IMAGEN-DEL-BOTÓN" style="width:50px; height:50px; position:fixed; top:383px; right:0px;"/></a>

     Donde:
     
     • http://www.twitter.com/elblogdeelSant0 es la página principal de Twitter para la web a seguir (en este caso pongo la mía).
     • border="0" indica que la imagen del botón se insertará en la página sin bordes (Blogger añade bordes de forma predeterminada).
     • URL-IMAGEN-DEL-BOTÓN es la URL donde se encuentra alojada la imagen del botón (puedes usar un servicio de alojamiento de imágenes externo como http://www.xooimage.com/fr/).
     • width:50px y height:50px indican el ancho y alto del botón en píxeles.
     • position:fixed indica que, aunque se desplace el scroll de la ventana, el botón permanecerá inmóvil en su posición.
     • top:383px y right:0px indica la posición en pantalla. Con "top" indicamos la distancia en píxeles al margen superior y con "right" la distancia al margen derecho (también podemos usar "bottom" para el margen inferior y "left" para el izquierdo).
  4. Salimos guardando los cambios y ya podemos comprobar el efecto en el blog.
  
  
  
• FACEBOOK:
  
  En Facebook un "follower" o "fan" es una persona que recibe en el "muro" de su página de Facebook (o en su cliente para Facebook) los mensajes que tú publicas y/o regalos (gifts) que le haces.
  
  En Facebook no sólo se puede ser "follower" o "fan" de otro usuario, sino que se puede ser de multitud de elementos: de una determinada página de otro usuario, de un grupo social creado por otro usuario, de un determinado mensaje de otro usuario,... Y los mensajes que recibirá en su muro serán los relacionados con dicha suscripción.
  
  
  
  Para hacerte seguidor de algo en Facebook basta con pulsar el botón "ME GUSTA".
  
  Al igual que en Twitter, no es necesario que tú sigas a tus seguidores. Sin embargo, cuando alguien decide seguirte a ti o a algún contenido de tu cuenta de Facebook recibes una notificación y, para completar su suscripción es necesario que aceptes la solicitud incluída en esa notificación.
  
  Elementos añadidos al blog
  
  
  
  He añadido al blog un botón "Follow" que al ser pulsado redirige a la página que creé para "El Blog de elSant0" en mi perfil de Facebook (usuario "El Santo"). Una vez allí el usuario puede pulsar "ME GUSTA" para activar la suscripción de seguimiento de los mensajes que publico en el muro de dicha página.
  
  al igual que con el botón de Twitter, éste también lo he hecho flotante para que así permanezca en pantalla y accesible al usuario sea cual sea su movimiento por el blog.
  
  Los pasos a seguir son:
  
  1. Vamos a Personalizar y luego a Diseño->Edición de HTML. Entonces damos a Expandir plantillas de artilugios.
  2. Ahora, en el código de nuestra plantilla buscamos la siguiente etiqueta:
     

     </body>

  3. Justo antes añadimos el siguiente código:
     

     <a href="http://www.facebook.com/pages/el-Blog-de-elSant0/161769207226702?sk=info"><img border="0" src="URL-IMAGEN-DEL-BOTON" style="width:50px; height:50px; display:scroll; position:fixed; top:337px; right:0px;"/></a>

     Donde:
     
     • http://www.facebook.com/pages/el-Blog-de-elSant0/161769207226702?sk=info es la página de "El blog de elSant0"(en mi perfil de Facebook), la cual contiene el botón "ME GUSTA" para realizar la suscripción.
     • border="0" indica que la imagen del botón se insertará en la página sin bordes (Blogger añade bordes de forma predeterminada).
     • URL-IMAGEN-DEL-BOTÓN es la URL donde se encuentra alojada la imagen del botón (puedes usar un servicio de alojamiento de imágenes externo como http://www.xooimage.com/fr/).
     • width:50px y height:50px indican el ancho y alto del botón en píxeles.
     • position:fixed indica que, aunque se desplace el scroll de la ventana, el botón permanecerá inmóvil en su posición.
     • top:337px y right:0px indica la posición en pantalla. Con "top" indicamos la distancia en píxeles al margen superior y con "right" la distancia al margen derecho (también podemos usar "bottom" para el margen inferior y "left" para el izquierdo).
  4. Salimos guardando los cambios y ya podemos comprobar el efecto en el blog.

Salu2,
elSant0

ALGUNOS ARTICULOS RELACIONADOS