Acelera tu web con un botón «Me gusta» de Facebook SUPERLIGERO

Suele ser habitual querer introducir un botón «Me gusta» de Facebook en nuestro sitio web de forma que por un lado mostramos el número de seguidores que tiene nuestra página de Facebook y por otro lado invitamos a su vez al usuario a hacer clic en él para empezar a seguir nuestra página. Sin embargo, este tipo de botones suelen cargar bastante un sitio web ya que consisten en un código Javascript que genera dinámicamente dicho botón con el número actualizado de seguidores y con la funcionalidad necesaria para hacer «Me gusta». Esto se traduce en que cada vez que carga una página de nuestro sitio web se tienen que realizar 11 peticiones extras a los servidores de Facebook para descargarse todos los elementos necesarios. Dado que además a día de hoy dichos servidores se encuentran en la costa oeste de Estados Unidos y no están disponibles a través de ningún servicio de CDN o similar, dependiendo de donde se encuentre el usuario es probable que cada una de esas peticiones tenga que atravesar la mitad del globo para completar la descarga. Todo esto provoca que nuestro sitio web se ralentice innecesariamente y su velocidad de carga se vea afectada , lo cual es bastante negativo en varios aspectos.

¿Qué tal si pudiéramos sustituir el botón que proporciona Facebook por una única y sencilla imagen del mismo botón que muestre en todo momento el número actualizado de seguidores de nuestra página de Facebook? Sería fantástico de cara a la optimización del rendimiento web o WPO , pues tan sólo sería necesaria una única petición adicional al servidor , y además ésta se podría servir rápidamente desde una CDN muy próxima a la localización geográfica del usuario, cacheándose además durante un tiempo. De este modo podríamos conseguir que la velocidad de carga de nuestra web continuara siendo muy alta y sin penalizaciones en el rendimiento.

¿Cómo puede conseguirse esto? Parece una solución win-win demasiado buena para ser cierta… Pues puede conseguirse de una forma mucho más sencilla de lo que crees gracias a la librería Imagemagick y un simple script en Bash. Sigue leyendo…

1.- Descargar imágenes fuente sin ningún número de seguidores:

Estas son las imágenes fuente que usaremos como base para generar otras imágenes equivalentes, pero con el número de seguidores relleno:

Son 2 imágenes porque una la usaremos cuando el número de seguidores de la página sea igual o inferior a 9.999, y otra cuando la página tenga hasta 99.999 seguidores.

Las imágenes que generará el script como resultado a partir de ellas serán similares a éstas:

2.- Obtener token de acceso a la página de Facebook

Además de estas imágenes, será necesario obtener un token de acceso a nuestra página de Facebook. En el siguiente enlace explico con más detalle cómo hacerlo:

Lectura recomendada:
Cómo obtener un token o identificador de acceso permanente a una página de Facebook

3.- Ejecutar script de generación de imagen «Me gusta» con número de seguidores relleno:

#! /bin/bash 
 
# Directorio donde se almacenarán las imágenes en nuestro sitio web
imgDir="/var/www/vhosts/example.com/httpdocs/images/facebook-like-button"
 
# Token de acceso página de Facebook
accessToken="EAAUAA6XzH3sBAByxmeRXoivAX8DamdhghHUNWEYBxdXnQZAZAUPbDpBrmS3PexVeka2JTL9Vxn8eQe6wBLNlPbsN06nBPhxQhp0TKNrdZALXIEHgVANOb4U2eIz3BRHqTCAjSoFxqVZBWjc9K3qHyyRcGczccU7NRWjj5OkzxbAZDZD" 
 
# Obtener número de likes desde la API de Facebook 
likesCount=`curl -X GET  "https://graph.facebook.com/v2.8/4x4proyect?fields=fan_count&access_token=${accessToken}" | cut -f 2 -d ':' | cut -f 1 -d ','` 
 
# Nos aseguramos de que el valor obtenido sea un número 
re='^[0-9]+$' 
if ! [[ $likesCount =~ $re ]] ; then 
   echo "error: Not a number" >&2; exit 1 
fi 
 
if [[ $likesCount -ge 0 ]] && [[ $likesCount -le 9999 ]];then 
    maxCount=9999 
elif [[ $likesCount -ge 10000 ]] && [[ $likesCount -le 99999 ]];then 
    maxCount=99999 
else 
    echo "error: Number not between 0 and 99999" >&2; exit 1 
fi 
 
# Formateamos el número de likes con separador de miles 
likesCount=`echo $likesCount | sed ':a;s/\B[0-9]\{3\}\>/.&/;ta'` 
 
# Generamos la imagen de Facebook con el número de likes 
/usr/bin/convert -gravity East -weight 400 -pointsize 55 -fill white -annotate +20+5 "$likesCount" "$imgDir"/facebook-btn-transparent-"${maxCount}".png "$imgDir"/facebook-btn-filled.png 
/usr/bin/convert -resize 110x -quality 100 "$imgDir"/facebook-btn-filled.png "$imgDir"/facebook-btn-final.png 
 
# Limpiamos la cache de mod_pagespeed para que aparezca el nuevo número de likes en el botón. Sustituir por
# cualquier otro método de invalidación de la caché que utilicemos, o comentar esta línea si no usamos ninguno.
touch /var/cache/mod_pagespeed/cache.flush 
 
echo "Generada imagen con número de likes igual a $likesCount" 
 
exit 0

4.- Añadir entrada en el cron

Para que el script anterior se ejecute periódicamente de forma desatendida añadiremos la siguiente entrada en el cron:

# Actualizar imagen del botón de facebook de la web www.example.com con el número actualizado de likes
0       2       *       *       *       /bin/bash /root/scripts/update-example-com-fb-page-likes-count.sh