Facebook Page Likes Counter Display (with Particle Photon)

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

Then:
- 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:

Particle has its own IDE: the Particle Dev (a fork from GitHub's Atom) --> https://www.particle.io/dev
The Photon has it's own capabilities and library --> https://docs.particle.io/reference/firmware/photon...

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

Particle.publish("fbLikesEvent");

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".