Social Stats Tracker Display With ESP8266

by bekathwia

39K22778

Intro: Social Stats Tracker Display With ESP8266

Frame your followers! Here's how to build a social media stats tracker display using the a wifi arduino-compatible ESP8266 microcontroller board and several seven-segment displays. This project is an extension of my YouTube Subscriber Counter project, but uses one "brain" to track and display multiple networks. Easily omit the left (large digits) displays for any stat under 10k to bring the cost of components down.

Before attempting this project, you should be generally familiar with uploading new programs to your Arduino board and installing code libraries, both of which you can learn for free in my Arduino Class, though you really don't have to understand much of the actual Arduino code to get this project running.

For a more in-depth introduction to the ESP8266 board (and its installation and setup), check out my free Internet of Things Class.

For this project, you will need the following materials:

and the following tools:

To keep up with what I'm working on, follow me on YouTube, Instagram, Twitter, Pinterest, and subscribe to my newsletter. As an Amazon Associate I earn from qualifying purchases you make using my affiliate links.

Required software libraries (all searchable through the Library Manager):

Unique data required:

  • Twitter API bearer token (read Brian's instructions for getting this)
  • usernames for Twitter, Instagram, and Instructables
  • Wifi network name/password

As an alternative to the NodeMCU board, you can also use your favorite ESP8266 microcontroller board, some of which require a 3v FTDI programmer to upload new programs.

Before you dive into this project, you should first make sure you've got your Arduino software set up properly to program the board you are using, which in my case involves installing the SiLabs USB driver and installing ESP8266 board support (explained in more detail in my Internet of Things Class):

  • Go to Arduino-> Preferences...
  • Look for a text field labeled "Additional Boards Manager URLs:" and paste the following URL into the field (separate multiple URLs with commas if applicable):http://arduino.esp8266.com/stable/package_esp8266com_index.json
  • Click OK
  • Go to Tools->Board-> Boards Manager...
  • Search for ESP8266 and click the Install button in the box "esp8266 by ESP8266 Community" when it shows up

To ensure you have a proper programming connection with your board, first load up the blink sketch. You can find a sample blink sketch by navigating to File->Examples->ESP8266->Blink, or copy it from here:

void setup() {
  pinMode(LED_BUILTIN, OUTPUT);
}
void loop() {
  digitalWrite(LED_BUILTIN, HIGH);
  delay(500);
  digitalWrite(LED_BUILTIN, LOW);
  delay(500);
}

Plug in your USB cable to the board and configure your settings under the Tools menu as follows:

  • Board: NodeMCU 1.0
  • CPU Frequency: 80MHz
  • Flash Size: 4M (3M SPIFFS)
  • Upload Speed: 115200
  • Port: whichever one ends in SLAB_USBtoUART (Mac) or COMx (Windows)

Click the Upload button to send the program to your board. This will take several seconds (longer than you are used to with Arduino Uno). After complete, the onboard LED should start blinking.

While many boards auto-detect when they're being sent a new program, some other ESP8266 boards may require a sequence of button presses to get into bootloader mode.

Do not proceed until you've successfully uploaded a blink test program to your board. Seriously, because how can you expect the project code to upload if the test didn't? =D

STEP 1: Prepare Displays & Prototype

Follow the assembly instructions for your seven-segment displays, and also solder headers onto your ESP8266 board if it didn't come with headers pre-soldered.

For your microcontroller to tell the different displays apart, you'll need to change their addresses. Do this by applying a blob of solder to bridge the labeled pads on the back of the board. The board as-is has an address of 0x70, and if you bridge A0, it has an address of 0x71. More info on i2c addresses in the official product guide. Here's how the displays in my circuit/code are configured:

  • 0x71 high digits Twitter, A0 shorted
  • 0x70 low digits Twitter, no alteration
  • 0x74 high digits Instagram, A2 shorted (not installed)
  • 0x73 low digits Instagram, A0 and A1 shorted
  • 0x75 high digits Instructables, A0 and A2 shorted (not installed)
  • 0x72 low digits Instructables, A1 shorted

When working with electronics, I always like to create a solderless prototype first. Download the code attached to this step (big thanks to Brian Lough for writing all those awesome Arduino libraries).

I'm using a NodeMCU board this time, but any ESP8266 board with the I2C pins exposed will work fine. In my case that's D1 and D2.

Connections:

NodeMCU D1 to displays C (clock)

NodeMCU D2 to displays D (data)

NodeMCU Vin to displays + (power)

NodeMCU GND to displays - (ground)

STEP 2: Assemble With Paper Template & Shadowbox

Download the paper template attached to this step or create your own 5x7 artwork to fit in the front of the shadowbox frame. This template also contains an alignment helper, which you can tape directly to or use as a reference for taping the displays directly to the back of the front-facing printout. The thickness of your paper will determine your light throughput and circuit sturdiness, so feel free to play around with the combo of layers and thicknesses of paper that work best for you.

I soldered my multi-display counter (Twitter only) to a perma-proto board to keep them aligned, and plugged female header wires into the single display headers. The NodeMCU board gets its own small perma-proto, where I soldered more wires to plug into all the various displays. This keeps the project modular in case I want to take it apart or add more displays later.

STEP 3: Close Up the Circuit

Use some cardboard or other stiff material to brace against the back of each display before installing the back cover (use scissors to cut a notch for the USB cable). It took me a few tries to get the displays pressed evenly against the artwork/glass to create crisp digits. If they're not pressed tightly or evenly enough, the numbers will appear blurry.

STEP 4: Enjoy!

Display your project and track your growth! I love having these displays hanging above my workbench to inspire me to keep making and sharing fun projects with all of you. Thanks for reading!

I'd be delighted to see your tracker displays in the comments below, as well as to hear your thoughts, questions, and feedback.

If you like this project, you may be interested in some of my others:

To keep up with what I'm working on, follow me on YouTube, Instagram, Twitter, Pinterest, and Snapchat.

50 Comments

lordcatbert 2 years ago

Been trying to tie in the Facebook API frim a later witnessmenow commit branch. No luck on my end. Does anyone have Instagram working yet??? Its been at least a year since the API change, hoping someone figured it out! Thanks!

SinanM1 4 years ago

does anyone have problems with the script as well? I also use a google script for adding daily followers into a sheet, this also does not work anymore…
the counter here shows 0 all the time :(

bekathwia 4 years ago

My display is on the wall above my desk so I see it just about every day. The Instagram counter stopped working (reports 0) ever since about two weeks ago. I haven't had a chance to check it out yet but maybe their API changed. The library I used is here, worth leaving Brian a comment about it so he knows to take a look when he can: https://github.com/witnessmenow/arduino-instagram-stats

prayharder 3 years ago

Were you able to find a fix for this? I am making one for my wife, but it comes back as zero still.

SinanM1 2 years ago

oh nice, thank you!
i'm a non-programmer in person, so I hope for the instructables community :)

frredih1 2 years ago

Seems like this doesn't work anymore; At least not for Instagram. It's displaying 0 every time I try to use the Instagram library with Arduino. It worked once, after that, no matter which account I try to use, it returns a zero. It's not a problem with the displays either; It's the library, I think. Comments on other sites mentioned that it's probably being blocked by Instagram, if there are too many requests. So at least for that application, you'll either have to use the Facebook API, or nothing, it seems. I don't know about the other platforms, but Insta is obsolete at this point, or it gets spotty results at best.

thetattedpsych 4 years ago

Last night everything was working properly but when I woke up this morning the program was logging Instagram followers as zero no matter what account I put in. Any ideas?

TS projects 4 years ago

After compiling the code from Github https://github.com/witnessmenow/arduino-facebook-...

My first error was
no matching function for call to
'Facebook::FacebookApi (WiFiClientSecure&, String&)'

So I changed this line
api = new FacebookApi (client, FACEBOOK_ACCESS_TOKEN);
To this
api = new FacebookApi (client, FACEBOOK_ACCESS_TOKEN, " " ," "); and it worked.

After that, I got this error on Serial Monitor:
JSON respnse was not as expected
JSON respnse was not as expected
Error getting friends count
JSON respnse was not as expected
JSON respnse was not as expected
Error getting friends count

Any solutions?

roland.mevissen 4 years ago

Hello,
after all components have arrived, I wanted to build the Followerframe.
The creation of the token etc. was not a problem. Also the update of ArduinoJson5 to 6 was no obstacle. Now the Arduino IDE shows the following error during compilation.
"response 'was not declared in this scope"
The error refers to the following line.
int followerCount = response ["followers_count"];
About Help I would be happy.
greeting
Roland

roland.mevissen 4 years ago

The problem is solved. But no matter if I'm using version 5 or 6, it always shows me that I have zero followers.
I also tried the example for the Istagram Counter with different names. Again, I will be shown zero followers.

staxen 4 years ago

Hi Roland
Being a novice myself i had some of the same problems, i needed to downgrade arduinoJson to 5 and could not get it to work with 6.
I also had/have the 0 count, at first i fixed it by changing some of the I2C addresses (or what they are called) to match my instagram counts. On a side note i triede to strip out the twitter and instructables part, wich might be why i only see the correct count for some hours, after that it's returning to 0 again...

Any other inputs someone can share to help us get running? :)

timbeh 4 years ago

Hey! I am having the issue that it only displays 0 on the Instagram counter too!
What did you exactly do to get it to work?

Weltenbummler 5 years ago

Hello becky,

what is wrong i get the correct output in the serial monitor but how i can get it on the max7219
My soldering is:
3VV auf VCC
G auf GND
D8 auf DIN
D7 auf CS
D6 auf CLK

maybe you can help me

bekathwia 4 years ago

Your soldering looks a little questionable (suspect cold solder/incomplete connection), especially at the display end. Did you check your connections with a multimeter on continuity mode?

JordiKoki 5 years ago

Is it possible to work with only one display?
I test the program only using one display, but the digits can't display.

Now i see the problem: Error getting Author Stats: Library: Failed to parse response

bekathwia 5 years ago

Always test your components separately before combining them-- did you run the sample code that comes with the display library? But anyway, that error has to do with the Instagram library, not the display. Check out this thread on the github for the library, maybe Brian can help: https://github.com/witnessmenow/arduino-instagram-stats/issues/8
More Comments