Fishino: Facebook counter sign

By on September 27, 2018
Pin It

 

Created for the most famous social network, it displays in real-time the number of likes received by the related Facebook profile, through a giant 5-digit display.

Since social networks were born, and Facebook in the first place, it became commonplace to express approval for a comment, a photo or a content in general (which could be the link to a news article) by clicking or tapping the symbol of the hand with the thumb up; in short, with a Like. The same symbol is also used by LinkedIn, Google for reviews etc. The number of likes received is now what is considered as an appreciation metrics and it is taken into consideration when evaluating the visibility of the profile, on the same level of clicks or visits for a webpage. Of equal importance, towards the reputation and the following of a Facebook profile, it is the number of people following it, a.k.a. Fans. This is why, if you want to find out more about your visibility you want to know the number of likes received every time you post your content, as well as the number of fans. Learning this number is easy and it is normally done by viewing the statistics from a computer, tablet or smartphone or from an interactive device connected to the Internet (you can also use a smart TV, for instance…) However, in certain situations, you we have the need to show the number of fans of your Facebook profile to the audience in real-time. This is why we can make use of a so-called “like counter” which is known as FB Counter in Facebook lingo.

 

 

This is a standalone device operating without the need for a computer and its display, because it can be implemented using a microprocessor which interfaces with the web and is equipped with a firmware capable of sending a query to Facebook servers, after upon sending a login string in order to access the actual number of fans of a certain page.

This is not the first time we introduce such a counter, because we had already taken care of it in issue 175 of April 2013. However, this time we are proposing a revamped version of the project based on a Fishino UNO board, which makes the device wireless and therefore easy to install; in other words, the Facebook Counter becomes independent from a possible cabled ethernet and also doesn’t need external Wi-Fi interfaces on the shield, because the good thing about Fishino UNO is that it integrates a Wi-Fi module on board, among the other peripherals.

We take the chance to also explain how we can get the data from a fan page using the new tools made available by Facebook. To this regard, we must mention that up until not long ago, accessing the data was simple and did not require the use of particular APIs, while now we have to create a dedicated app for Facebook, otherwise it is not possible to get this data; but don’t worry, because the operation is very simple and can be done by everyone, especially when you follow the explanations provided in these pages.

 

The hardware

With that said, let’s get to the core of the project by starting with the electronics part: in terms of hardware, the Facebook counter is composed, besides the Fishino UNO board, 5 displays for the digits, with each digit measuring 15.3 cm of height, powered by 12 V with a brightness (If=20 mA) up around 200÷300 McD (0,2÷0,3 candles) so quite remarkable and it makes the figures easy to read even in lighted environments from a distance.

 

 

The project requires five displays of this kind which are piloted by a dedicated controller, with the three-wired interface; however, there are also three pins for the power (5 V, 12 V and GND which is common for data and power) in the interface connector. The corresponding digital pins of Arduino for the connection with the giant displays are:

Clock = 6

Latch = 5

Data  = 7

In Fig. 1 you can see the circuit diagram of the giant display, with each segment composed of several red LEDs connected in series (including the decimal point). With 5 digits, we can display a maximum of 99,999, which is more than enough for a normal profile (it is not easy to reach 100,000 fans!!).

 

Fig. 1

 

The circuit is a driver for big 7-segment displays with high absorption (it would be impossible to manage the segments directly from Arduino’s pins…) And it has six input pins and six output pins in parallel, allowing to connect more drivers in cascade to realize larger displays.

The controller can be directly welded on the backside of the 7-segment display. The input/output pins are GND (Ground), LAT (Latch), CLK (Clock), SER (Serial), 5V (power for the TPIC6C596 chip, the heart of the circuit), e 12 V (power for the 7-segment display).

The giant displays with their controller constitute the display unit for the audience, however, in our project we have also included an alphanumerical display with 4 lines x 20 chars, and I²C-Bus connection (the classical one based on the controller HD44780-compatible) that is used as status monitor and as user interface for the various settings and the “technical” operations for system maintenance.

Arduino’s I/Os used for the 4 x 20 display are:

  • SDA, which goes on the display’s SDA;
  • SCL, which goes on the display of the same name.

 

Fig. 2

 

The buzzer is handled by Fishino UNO through the digital pin 3, therefore it is connected to pin 3 through the positive and to GND through the negative.

The power for the system goes through the power jack of the Fishino UNO board; the latter powers the controller’s logic using its 5 V line and the 12 V line of the controller’s powering the giant displays using Vin. Once the hardware has been wired, following the wiring diagram posting these pages, we can move to system configuration.

The hardware assembly must be mounted on a frame which, in our prototype, has been created using some 10 x 35 mm rectangular-shaped wood slats; on the front part, we have applied the giant displays and the Fishino board on the backside. The controllers must be welded, using the dedicated pads, directly on the back of the 7-segment display modules, where that tinned pads can be found in the dedicated protrusion. In order to avoid unwanted connections, it is recommended to place a small cardboard sheet between the back of the controller and the corresponding display, as big as the controller itself.

 

Fig. 3

 

Creating the Facebook app

All right, now that we have closed the physical creation of the project, let’s move on to the software, and we start building the application that will allow our Facebook counter to query the server responsible for providing the number of fans and extract the corresponding data. First, we must login to our personal Facebook page and then go to https://developers.facebook.com/ (Fig. 4).

 

Fig. 4

 

On this page, from the menu in the top right corner labelled “my apps”, we select “add a new app”: a dialogue will pop-up asking to name our app and a reference email address (Fig. 5) that we are going to fill in.

 

Fig. 5

 

Once the page is created, let’s go to https://developers.facebook.com/tools/explorer where we will find all our apps and a very useful browsing tool for Facebook’s Graph API.

Select the newly created app (Fig. 6) and click on the menu “Receive Token” (Fig. 7). Copy this code which you will use to correctly configure your sketch.

 

Fig. 6

 

In order to verify the number of fans of a page we still need a small passage, which is retrieving the ID code of the page we want to monitor and show the number on our giant panel. The easiest solution is to use a website that allows us to provide this data: for instance https://findmyfbid.com/.

So we are going to open the browser and go to this webpage, where we will enter our FanPage.

These piece of data will also be needed in our sketch.

 

Fig. 7

 

However, to make sure we have done everything correctly, we can go to the webpage:

https://graph.facebook.com/v2.11/123250477713173?access_token=TOKEN_DELLA_VOSTRA_APP&fields=id,name,fan_count in verifying that the JSON contains the data we have asked for his return, in this case, ID, page name and fat number. This is the result:

{

  “id”: “123250477713173”,

  “name”: “Rivista Elettronica In”,

  “fan_count”: 32112

}

 

The sketch

The wide variety of libraries and examples of the Fishino makes the sketch development much easier and faster than one would think. We took the example FishinoTwitterCommanderI2C, as a base, which allows to read tweets and extract useful information in order to, for instance, activate relays.

 

Fig. 8

 

Please consider that we are establishing a connection to an HTTPS page, therefore the security level is very high, but this is not a limitation for Fishino UNO.

First, we must set the SSID and password of our access point, set the token of our app in the dedicated arrival in the page ID we want to analyze.

The JSONStreamingParser library (available among the libraries downloadable from the website www.fishino.it) allows to read the JSON file in real time, therefore we don’t have to save anything on the microcontroller’s memory, and we can extract the information we are looking for.

 

Fig. 9

 

This is how we get the number of fans, which will be displayed on our panel composed of the 5 giant 7-segment displays. On the 20 x 4 display, we will see some information such as the network used for the connection, the assigned IP and the signal power. Besides, in order to make the project nicer, we have also provided a buzzer that will play a short, upbeat tune when the fans number increases to one unit.

Lst1

// this method makes a HTTP connection to the server:
void httpRequest()
{
// close any connection before send a new request.
// This will free the socket on the WiFi module
client.stop();
// if there’s a successful connection:
if (client.connect(server, 443))
{
Serial.println(“connecting...”);
// send the HTTP PUT request:
client << F(“GET /v2.11/”) << IDpage << (“?access_token=”) << token << (“&fields=id,name,fan_count,about HTTP/1.1\r\n”);
client << F(“Host: graph.facebook.com\r\n”);
client << F(“User-Agent: ArduinoWiFi/1.1\r\n”);
client << F(“Connection: close\r\n”);
client.println();
}
else
{
// if you couldn’t make a connection:
Serial.println(“connection failed”);
}
// note the time that the connection was made:
lastConnectionTime = millis();
}

 

The Arduino’s sketch is a bit too long to publish in these pages, but you can download it, along with the comments, where you will also find the library to manage the display. However, we are reporting two extracts: List 1 shows the section managing the server connection to obtain data about the fans and List 2 proposes the firmware section for the parsing, i.e. the processing of the string receipt from the server and the extraction of the data we want to be processor and displayed.

List2

void parserCallback(uint8_t filter, uint8_t level, const char *name, const char *value, void *cbObj)
{
// check for user name
if(level == 0 && !strcmp(name, “name”)){
lcd.clear();
lcd.setCursor(0, 0);
lcd.print(“FaceBook Page: “);
lcd.setCursor(0, 1);
lcd.print(value);
}
if(level == 0 && !strcmp(name, “fan_count”)){
long count = readValue(value);
Serial.print(“*************** Fans Number= “);
Serial.print(count);
Serial.println(“ ******************”);
//-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-
if (count>oldcount){
sing(1);
}
oldcount=count;
//-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-
lcd.setCursor(0, 2);
lcd.print(“Fans: “);
lcd.setCursor(0, 3);
if (count<1000){
lcd.print(“ ---> “);
lcd.print(count);
lcd.print(“ <--- “);
showNumber(count);//Visualizza il numero dei fans nel display a segmenti
}
else if (count<1000000){
lcd.print(“ ---> “);
// lcd.print(count);
lcd.print((count-(count%1000))/1000);lcd.print(“.”);lcd.print(count%1000);
lcd.print(“ <--- “);
showNumber(count);//View the number of fans in the segment display
}
else {
lcd.print(“--> “);
//lcd.print(count);
lcd.print((count-(count%1000000))/1000000);lcd.print(“.”);lcd.print(((count%1000000)-
(count%1000))/1000);lcd.print(“.”);lcd.print(count%1000);
lcd.print(“ <--”);
showNumber(count);//View the number of fans in the segment display
}
}
}

Download the code for Fabebook counter

Conclusions

In the application described in this article we have shown you how to read the number of fans for Facebook, but you can do the same for Twitter, YouTube and all those social networks where you want to monitor some data; the hardware stays the same, the only difference is in the strings to send to the supporting web services.

Certainly, each one of you will have some idea about how to use the like counter, but we can suggest some possible applications, for instance, it can be placed in a social club in order to show the audience appreciation, in a pub, in order to highlight the following, during presentations or company conventions to update the attendees or to show how the announcement of a new product is accompanied by an increase of likes on the company profile, etc.

 

 

Same goes for public events followed on Facebook.

In short, there is something for anyone, even for those who want to give a “technological” boost to their birthday party, graduation party etc.

Enjoy!

 

From openstore

Driver for large 7-segment displays

DISPLAY 7 SEGMENTS – COMMON ANODE – RED

Display LCD 20×4 

Fishinouno

About Boris Landoni

Boris Landoni is the technical manager of Open-Electronics.org. Skilled in the GSM field, embraces the Open Source philosophy and its projects are available to the community.

One Comment

Leave a Reply

Your email address will not be published. Required fields are marked *