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.
Step 1: Tools and Materials
Bill of material:
- NodeMCU V2 Amica or Wemos D1 mini
- ArduiTouch ESP kit
- soldering iron
- screw driver
- side cutting plier
- svoltmeter (optional)
- Arduino IDE
Step 2: Assembly of Arduitouch Set
You have to assemble the ArduiTouch kit first. Please have a look in the enclosed construction manual.
Step 3: 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/...
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.
Step 4: 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...
Step 5: Preparation for 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
Step 6: 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
Step 7: 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...
Step 8: 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.
Step 9: Final Compilation
After compilation and upload you will see your Youtube, Facebook and Instagram stats continuously in succession on the TFT.