Social Media Counter With ESP8266 and TFT

by Zihatec in Circuits > Electronics

3061 Views, 6 Favorites, 0 Comments

Social Media Counter With ESP8266 and TFT

IMG_20181228_081230.jpg
IMG_20181228_081227.jpg
IMG_20181228_081210.jpg

This instructable will show you how to make a social media counter based on ESP8266 and a color TFT for top wall mountage.

This social media counter will display information about your Facebook, Instagram and Youtube account continuously in succession.

Tools and Materials

kompatibilität.jpg
ArduiTouch_ESP_Extended_kit_wasserzeichen.JPG

Bill of material:

Tools:

  • soldering iron
  • screw driver
  • side cutting plier
  • svoltmeter (optional)

Software:

  • Arduino IDE

Assembly of Arduitouch Set

IMG_20181024_163234.jpg

You have to assemble the ArduiTouch kit first. Please have a look in the enclosed construction manual.

Installation of Additional Libraries

The firmware was written under the Arduino IDE. Please follow this instructable for preparation of the Arduino IDE for ESP8266: https://www.instructables.com/id/ESP8266-Colored-Weather-Station/

You will need some additional libraries. Install the following libraries through Arduino Library Manager

Adafruit GFX Library https://github.com/adafruit/Adafruit-GFX-Library/...

Adafruit ILI9341 Library https://github.com/adafruit/Adafruit-GFX-Library/...

XPT2046_Touchscreen by Paul Stoffregen https://github.com/adafruit/Adafruit-GFX-Library/...

ArduinoJson https://github.com/bblanchon/ArduinoJson

JsonStreamingParser https://github.com/squix78/json-streaming-parser

InstagramStats https://github.com/witnessmenow/arduino-instagram-...

YoutubeAPI https://github.com/witnessmenow/arduino-youtube-ap...

You can also download the library also directely as ZIP file and
uncompress the folder under yourarduinosketchfolder/libraries/ After installing the Adafruit libraries, restart the Arduino IDE.

Firmware

Please download the sample code and open it in the Arduino IDE. Before compilation you have to add some individual data - see the next steps...

Downloads

Preparation for WiFi

/*______Define WiFi_______*/
//#define WIFI_SSID "xxxxxx"       // Enter your SSID here
//#define WIFI_PASS "xxxxx"    // Enter your WiFi password here
#define WIFI_HOSTNAME "Social_Counter" 
#define PORT 5444
#define WIFICLIENT_MAX_PACKET_SIZE 100
/*_______End of WiFi definitions______*/

Enter your WiFi SSID & password in the fields in the WiFi section

Preparation of Facebook

/*______Define Facebook config_______*/ 
#define FACEBOOK_HOST "graph.facebook.com"
#define FACEBOOK_PORT 443
#define PAGE_ID "YOUR_PAGE_ID"
#define ACCESS_TOKEN "YOUR_ACCESS_TOKEN"
// graph.facebook.com SHA1 fingerprint
const char* facebookGraphFingerPrint = "YOUR_FINGER_PRINT";
/*_______End of Facebook config______*/

  • Follow the steps on [this page](https://developers.facebook.com/docs/pages/getting-started) to create an APP
  • After the app is created, go to the graph explorer.
  • Up the top right change the application to the new one that you created
  • Click "Get Token" and then click "Get User Access Token"
  • Check the "User_Friends" option, click get access token and authenticated the applicaiton with your account.
  • The key that appears the in the bar can be used with the library.
  • Click on [this link](https://developers.facebook.com/apps),
  • click on the app you created. Your consumer ID and consumer secret are available on this page. You will need to this to extend your API key, which you can do using the library

Preparation for Youtube

/*______Define Youtube config_______*/ 
#define API_KEY "YOUR_API_KEY"  // your google apps API Token
#define CHANNEL_ID "YOUR_CHANNEL_ID" // makes up the url of channel
/*_______End of Youtube config______*/

It's necessary needed to create a Google Apps API key:

  • Create an application [here](https://console.developers.google.com)
  • On the API Manager section, go to "Credentials" and create a new API key
  • Enable your application to communicate the YouTube Api [here](https://console.developers.google.com/apis/api/youtube)
  • Make sure the following URL works for you in your browser (Change the key at the end!): https://www.googleapis.com/youtube/v3/channels?pa...

Preparation for Instagram

/*______Define Instagram config_______*/ 
String Instagram_userName = "YOUR_USERNAME";    // from their instagram url  https://www.instagram.com/userName/  
/*_______End of Youtube config______*/

You have only to enter your Instagram name in the field above.

Final Compilation

Social media counter tracker based on ESP8266

After compilation and upload you will see your Youtube, Facebook and Instagram stats continuously in succession on the TFT.