Goal
Facebook APP
Create Facebook APP
Hardware
Luck accidentally
Pins / connection
Frame
Arduino libraries
Good luck

Published May 12, 2017 © MIT

Facebook Fan Count

Inspired by Becky Stern's YouTube Subscriber Counter, I wanted to make a display of the number of likes for a Facebook page.

IntermediateFull instructions provided1 hour7,342

Things used in this project

Hardware components

LED Display Tube 4-Digit 7-segments

NodeMCU Mini

Ikea Ribba frame

Software apps and online services

Arduino IDE

Story

Update: 26.09.2019 - Time flies and technology changes. Since I created this project, Facebook has changed its APIs and APP setup. So the step to create a Facebook APP has expired. Today I no longer have access or opportunity to follow up this step. Still, I leave this tutorial as an inspiration to create something similar, even though it has expired. Good luck with your projects and leave a comment if you have made something similar.

This project is highly inspired by Becky Stern's YouTube Subscriber Counter. You can find it on Instructables.

Goal

My goal with this project was to bring out the number of fans from a Facebook page. Not any one but one I administer. To code C is not my field so I started with a lot of trial and error. But ended up with a result that worked.

Facebook APP

In order to extract the number of fans from a Facebook page, I use Facebook's Graph API Explorer. I created an APP that is linked to my Facebook page.

Create Facebook APP

This can be done at developers.facebook.com. After the APP is created, note the App ID and App Secret. You'll need this in the code.

Screenshot from the Facebook APP

Wanna test the access for your APP? Head over to https://developers.facebook.com/tools/explorer/

Screenshot from Graph API Explorer

Enter the following: AAA?access_token=BBB|CCC&fields=fan_count

AAA = Facebook Page ID or name, BBB = App ID and CCC = App Secret. Note the | (pipe) between App ID and App Secret.

Hardware

Now over to the fun part. I have used a NodeMCU Mini. These are available in various varieties and price ranges in a variety of online stores and on eBay. There were two reasons I chose a mini. The first reason was that I already had a lying one in my drawer. The other reason was that it is small and takes up little space in a picture frame.

I bought a display consisting of four segments mounted on a board of electronics so I only need to use four of NoceMCUen's IOs.

Luck accidentally

NOTE: NodeMCU has only 3.3V output while the display will preferably have 5V. It will work with 3.3V but will light slightly. Fortunately for me my NodeMCU gives 5V outputs via VIN.

NodeMCU Mini on top of the display

Pins / connection

As you can see on my somewhat blurry image above the VIN, VCC and data pin are aligned. This means I don't need any wires between the NodeMCU and display. Just slide the boards together and add some soldering.

VIN --> 5V
GND --> GND
D4 --> DIO
D3 --> CLK

Disclaimer: I do not take responsibility for connecting your equipment together and any damage that may occur on your equipment if you follow my example. Fortunately, this setup seems to work me.

Frame

I bought a Ikea Ribba 000.783.34. The reason why I bought this frame is that it has a deep frame. Then I can easily fit the display and the electronics.

Template for the display on the back plate for the frame

The picture above shows that I have made holes for the display. I made a template that I attached to the backplate and marked where I wanted to have the display. Then I used a rotary tool to make the hole.

The backplate from behinde with the display mounted

The next step was to tweak the placement of the display and make it as bright as possible through the paper in front. Here is the result:

After tweaking the placement of the display

As you probably understand, I did not start with the frame itself. For it would be useless to build a display in a frame if I did not have a number to display.

After I had created a Facebook APP, I had to put myself into a somewhat unknown world. I do not know much about programming C ++. But ended up with a satisfactory result after much trial and error.

Arduino libraries

In order to connect to wireless networks, we need a library for ESP8266. If you do not have this before, go here https://github.com/esp8266/Arduino and follow the steps for adding it to Arduino IDE.

The next library is for the seven segment display. Download the SevenSegmentTM1637 Arduino Library from https://github.com/bremme/arduino-tm1637

Note: I tried several different libraries for the display. This one was the first I found that worked with my display board.

The last library is for handling JSON-data from Facebook. Download ArduinoJson - C++ JSON library for IoT from https://github.com/bblanchon/ArduinoJson

To connect to Facebook we also needs a fingerprint. Instead of trying to explain this to you, I recommend taking a look at the documentation https://github.com/gbrault/esp8266-Arduino/blob/master/doc/esp8266wifi/client-secure-examples.md#how-to-verify-servers-identity

Good luck!

I know that the code is not the most effective and anyone who can program in C ++ will surely tear off his hair and scream out. But it works. If I'd like to improve it, I promise to update this page.

To me, this was a fun project to try. I met some challenges along the way and learned a lot.

Facebook Fan Count

#include <ESP8266WiFi.h> 
#include <WiFiClientSecure.h> 
#include "SevenSegmentTM1637.h" 
#include <ArduinoJson.h> 
// Wifi 
const char* ssid = ""; 
const char* password = ""; 
// Facebook 
// https://github.com/gbrault/esp8266-Arduino/blob/master/doc/esp8266wifi/client-secure-examples.md 
const char* host = "graph.facebook.com"; 
const String url = "/AAA?access_token=BBB|CCC&fields=fan_count"; 
const int httpsPort = 443; 
const char* fingerprint = "DDD"; 
// Display https://github.com/bremme/arduino-tm1637 
const byte PIN_CLK = D3;   // define CLK pin (any digital pin) 
const byte PIN_DIO = D4;   // define DIO pin (any digital pin) 
String payload; 
SevenSegmentTM1637 display(PIN_CLK, PIN_DIO); 
void setup() { 
 Serial.begin(115200); 
 // Wifi 
 WiFi.begin(ssid, password); 
 Serial.println(); 
 Serial.print("Connecting "); 
 while (WiFi.status() != WL_CONNECTED) { 
   delay(500); 
   Serial.print("."); 
   display.print("CONNECTING"); 
 } 
 Serial.println(); 
 Serial.print("Connected, IP address: "); 
 Serial.println(WiFi.localIP()); 
 // Display   
 display.begin();            // initializes the display 
 display.setBacklight(100);  // set the brightness to 100 % 
 display.print("START"); 
} 
void loop() { 
 String wifistatus = "WIFI OK"; 
 // Use WiFiClientSecure class to create TLS connection 
 WiFiClientSecure client; 
 if (!client.connect(host, httpsPort)) { 
   String wifistatus = "WIFI FAIL"; 
   Serial.println("connection failed"); 
   return; 
 } 
 display.print(wifistatus); 
 if (client.verify(fingerprint, host)) { 
   Serial.println("certificate matches"); 
 } else { 
   Serial.println("certificate doesn't match"); 
 } 
 client.print(String("GET ") + url + " HTTP/1.1\r\n" + 
              "Host: " + host + "\r\n" + 
              "User-Agent: BuildFailureDetectorESP8266\r\n" + 
              "Connection: close\r\n\r\n"); 
 Serial.println("request sent"); 
 while (client.connected()) { 
   String line = client.readStringUntil('\n'); 
   if (line == "\r") { 
     Serial.println("headers received"); 
     break; 
   } 
 } 
 // JSON 
 String line = client.readStringUntil('\n'); 
 DynamicJsonBuffer jsonBuffer; 
 JsonObject& root = jsonBuffer.parseObject(line); 
 int fancount = root[String("fan_count")]; 
 if (fancount > 0) { 
   Serial.print("Fans: "); 
   Serial.println(fancount); 
   display.clear(); 
   display.print(fancount); 
 } else { 
   display.clear(); 
   display.print("ERR1"); 
   display.blink(); 
 } 
 delay(30000); 
}

Credits

Helge Johnsen

0 projects • 1 follower

Playing with electronics at my spare time.

Thanks to Becky Stern.

Facebook Fan Count