Speed up your website with a SUPERLIGHT Facebook “Like” button

It is often common to embed a Facebook “Like” button on your website so that on the one hand you show the number of followers of your Facebook page and on the other hand you invite the user to click on it to start following your page. However, this type of buttons tend to overload a website quite a lot because they consist of Javascript code that dynamically generates the button with the updated number of followers and the functionality needed to give a “Like”. This means that every time you load a page of your website you have to send 11 extra requests to the Facebook servers to download all the necessary elements. Given that these servers are currently located on the west coast of the United States and are not available through any CDN or similar service, depending on where the user is located, it is likely that each of these requests will have to cross half the globe to complete the download. All this causes your website to slow down unnecessarily and its loading speed is affected, which is quite negative in multiple aspects.

What if you could replace the button provided by Facebook with a single and simple image of the same button showing up-to-date number of followers of your Facebook page? It would be fantastic for website performance optimization or WPO, because it would only require a single additional request to the server, and it could be served and cached quickly from a CDN very close to the user’s geographic location. In this way you could ensure that the loading speed of your website would remain very high and without performance penalties.

How can this be achieved? It seems a win-win solution too good to be true… Well, it can be achieved in a much simpler way than you think thanks to the Imagemagick library and a simple Bash script. Read on…

1.- Download source images with empty number of followers:

These are the source images you can use to generate other equivalent images, but with the number of followers filled in:

There are 2 images because one will be used when the number of followers is equal to or less than 9,999, and another when the page has up to 99,999 followers.

The images that the script will generate as a result will be similar to these:

2.- Get an access token for your Facebook page

In addition to these images, it will be necessary to obtain an access token to our Facebook page. In the following link I explain in more detail how to do it:

Recommended read:
  How to get a permanent token to access a Facebook page

3.- Run this “Like” image generation script to get the number of followers filled in:

#! /bin/bash 
 
# Directory where the images will be stored on your web site
imgDir="/var/www/vhosts/example.com/httpdocs/images/facebook-like-button"
 
# Token de acceso página de Facebook
accessToken="EAAUAA6XzH3sBAByxmeRXoivAX8DamdhghHUNWEYBxdXnQZAZAUPbDpBrmS3PexVeka2JTL9Vxn8eQe6wBLNlPbsN06nBPhxQhp0TKNrdZALXIEHgVANOb4U2eIz3BRHqTCAjSoFxqVZBWjc9K3qHyyRcGczccU7NRWjj5OkzxbAZDZD" 
 
# Facebook page access token
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 ','` 
 
# We make sure that the value obtained is a number
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 
 
# Format the number of likes with thousands separator
likesCount=`echo $likesCount | sed ':a;s/\B[0-9]\{3\}\>/.&/;ta'` 
 
# Generate the Facebook image with the number of 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"https://cdn.daniloaz.com/facebook-btn-filled.png "$imgDir"/facebook-btn-final.png 
 
# Clear the mod_pagespeed cache to display the new number of likes on the button.
# Replace with any other cache invalidation method you use, or comment out this line if you don't use any.
touch /var/cache/mod_pagespeed/cache.flush 
 
echo "Generated image with number of likes equal to $likesCount" 
 
exit 0

4.- Add a new cron job

In order for the above script to run periodically unattended add the following entry to cron:

# Update image of www.example.com facebook button with up-to-date number of likes
0       2       *       *       *       /bin/bash /root/scripts/update-example-com-fb-page-likes-count.sh