Facebook Page Likes Counter Display (with Particle Photon)




Introduction: Facebook Page Likes Counter Display (with Particle Photon)

About: French Creative Technologist.

I wanted to make a little stand that could display in real time the likes count of a friend's Pizza restaurant Facebook page, in order to offer him a way to invite his customers to promote the location and, of course, also like his page to see the counter increase in live. A bit like what Smiirl did with their Fliike counter. Maybe without their style, but as a much less expensive alternative.

The counter had to be autonomous, and, of course, connected.

In this instructable, I will explain what I choose (and why) to fit my needs and my context.

Step 1: Materials and Tools

For this project, we need a main prototyping board capable of connecting over WiFi to the Internet in order to retrieve our datas. I use to work with Arduino boards or Raspberry-Pi, but for this project, I was looking for something small with WiFi capabilities embeded, and ... something cheap (Arduino Uno + WiFi Shield or Arduino Yun are too expensive to me for this kind of use).

A few months before this project, I read an article about the Particle (formerly Spark) boards. Checking the Photon board specs and price (about only $19, with Arduino like coding capabilities and embeded WiFi), I decided to give it a try.

If you want to know more about the products, and buy a Photon board, take a look at their webpage: https://www.particle.io/

About the display, I decided to chose a 7-segments display module for its ease of use and its potential compatibility with the Particule Photon board: Sparkfun sells a very powerful 4 digits Serial 7-segments display that can be driven through a bunch a Serial interfaces (UART, SPI or I2C).

The 4 digits Serial 7-Segments display can be bought here: https://www.sparkfun.com/products/11442
It is also distributed in France thanks to SnootLab (Toulouse): http://snootlab.fr/sparkfun/737-afficheur-7-segmen...

You will also need:

  • some wires
  • an enclosure of your choice (see Step 6 for mine)
  • a power source for your Particle Photon (5V, 1A max, USB Micro B)
  • soldering equipment
  • in my case: a web server (I will explain why)
  • a Facebook app to be able to request the Facebook Graph API

Step 2: Getting the Datas From Facebook

The photon only needs to get the like count as incoming data and I dont want to perform any parsing action on the microcontroler side. The WebHooks provided by the Particule account services (see step 3) are more bridge-oriented services and doesn't offer enough flexibility + I don't want to store my personal datas (Facebook app ID and Secret) on their servers. So I decided to use my personal server as a proxy to retrieve, parse and send only what we really need from Facebook. I use PHP for this.

Below is the current easiest way to get a like count for a specific page with PHP:

function fbLikeCount($id, $appid, $appsecret)
$json_url ='https://graph.facebook.com/'.$id.'?access_token='.$appid.'|'.$appsecret.'&fields=likes';
$json = file_get_contents($json_url);
$json_output = json_decode($json);
if($json_output->likes) { return $likes = $json_output->likes; }
else { return '-1'; }
echo fbLikeCount('###FB-PAGE-ID###','###APP-ID###','###APP-SECRET###');

You will have to change ###FB-PAGE-ID### by the Facebook page or object id, ###APP-ID### with your facebook app id, and ###APP-SECRET### with your Facebook app secret id (from the same app).

Then, the easiest way to test it will be to embed this in a php file that you upload on your server.

/!\ Of course, you're free to decide if you want to protect this file from non authorized access or to handle the proxy with another technology (REST API with NodeJS for example). This is a potential risk (you have been warned).

Let's now say that this proxy service is accessible through this URL:
GET http://my-server.com/service/get-fb-count/

Step 3: Passing the Data to the Photon Board Using Particle WebHooks

The Photon boards have been created to be used in an IoT context, highly linked to Particle cloud services and capable of interacting with other online services like IFTTT or Temboo (through Particle servers).

In order to request an external URL from your Photon, WebHooks are here to help.

You should first read this about Particle WebHooks: https://docs.particle.io/guide/tools-and-features/...

Here is a sample of the json I made to create the project WebHook (webhook.json):

"eventName": "fb-likes-demo",
"event": "fbLikesEvent",
"url": "http://my-server.com/service/get-fb-count/",
"requestType": "GET",
"mydevices": true

Following the Particle CLI reference, you can then create the WebHook from your terminal:

user$ particle webhook create webhook.json

And you can check if the WebHook has been created using this command line:

user$ particle webhook list

It should then list your WebHook(s), including the one you just created.

Step 4: Wirering the Photon and the 7-Segments Display

According to the specs and to this tutorial provided by Sparkfun, their Serial 7-Segments display can be controlled through 3 communication methods: Serial, SPI and I2C. All can be handled by the Photon board. I decided to focus on the SPI protocol.

For the pin mapping regarding the Photon, we can refer to the documentation (see the mapping scheme attached).

So, to communicate with the module, we will need:
- the A5 pin (MOSI = Master Out, Slave In)
- the A3 pin (SCK)
- a SS pin: let's pick the default one, A2

- the Photon A5 pin (MOSI), must be wired to the SDI pin on the display module (yellow wire on my sketch)
- A3 pin (SCK), to the module SCK pin (blue wire on my sketch)
- and the SS pin (A2) must be linked to the SS pin on the module side (green wire on my sketch)

The module also need to be powered (3 to 5.5V):
- 3.3V out from the Photon to the VCC pin of the module (red wire)
- GND to GND (black wire)

Step 5: Programming the Photon Board

Development on Particle Photon is very similar to Arduino, but:

You can also directly work online with the Particle Build tool: https://build.particle.io/build/new

If you're new with Particle and Photon, I highly recommend you to start with the "Getting started" section: https://docs.particle.io/guide/getting-started/sta...

Here you can find the entire code used for this project (particle side) as a GitHub Gist: https://gist.github.com/jumahe/68765c81ed7f73bdb1c...

Most important points are:

  • Configuring SPI
SPI.begin(ssPin);<br>SPI.setClockSpeed(250, KHZ); // from the display specs (max 250KHz)
SPI.setDataMode(SPI_MODE0); // from the display specs
  • Adding a Particle WebHook listener
Particle.subscribe("hook-response/fbLikesEvent", eventHandler, MY_DEVICES);
  • Requesting an event trigger

Step 6: Working on the Enclosure and Mounting the Board + the Display

This is not the key step of this tutorial but it remains important if you want an usable product and especially if you want to offer it :)

I simply drew the external shapes (display, bubble position, ...) directly on the wood box and I carved the rectangle hole for the display using a dremel saw. I added four holes in order to hold the display with some tiny bolts.

I painted the different wood parts and assembled the electronic parts inside the box, using the holes and some screws (be careful to use plastic rings to protect the electronic parts and don't tight too hard!).

Step 7: Finalizing

I finally added a QR-code on the enclosure to easily redirect the user to the Facebook page in order to let him "like" the page and see the counter iterate.

I also wrote a special text on the text bubble to make it a bit "fancier".

Step 8: Useful Links

Digital Life 101 Challenge

Runner Up in the
Digital Life 101 Challenge

Be the First to Share


    • Colors of the Rainbow Contest

      Colors of the Rainbow Contest
    • Electronics Contest

      Electronics Contest
    • Tinkercad to Fusion 360 Challenge

      Tinkercad to Fusion 360 Challenge



    1 year ago

    Hello, is there a tutorial on how to create a Facebook app? I do not manage to create the app on Facebook. I have Webhook enabled, Pages and Feed subscribed. Unfortunately without success.


    Reply 1 year ago

    Hello. The Facebook API has evolved a lot since I published this tutorial and I did not use it for a while now. Unfortunately, I won't be able to help you on this issue. Sorry. I hope you will find a way to make it work. Bests.


    Question 3 years ago

    I am having trouble with the php pulling the data from facebook. I can pull the data via fan_count in the Graph API Explorer. The webhook pulls the data from my webserver to get the "-1" and the particle reads the webhook data correctly. Can anybody help me with the php code to pull the fan_count?


    Answer 3 years ago

    Hi. It looks like this kind of direct GET request to the Facebook graph API doesn't work that easily anymore. When I try the same request with Postman now, I get an error. It worked 2 years ago and it was one of the easiest ways I found then. I'm sure you can find some new means to connect to the FB API and get the data you need. Maybe PHP isn't the best way now. Maybe you can try on a NodeJS server with an official SDK: https://github.com/node-facebook/facebook-node-sdk


    4 years ago

    Fingerprint, it took me a while to figure it out, but you need the fingerprint from


    Reply 3 years ago

    How did you get it to work? Do you mind sharing code?


    6 years ago

    From where did you manage to find/learn the PHP code?


    6 years ago

    Ah des français


    Reply 6 years ago



    6 years ago

    this project is exactly what my business needs but im no good with webhooks or particle.
    (i do know some arduino though)
    is there any way i could please get your assistance? willing to donate


    6 years ago

    This would be great for any business that promotes with facebook!