📎 Webclip
Create Real-Time Twitter Banner using Node.js
The post walks through building a Twitter banner that updates every 60 seconds with the profile images of the three most recent followers. It shows how to get Twitter API access, prepare a 1500x500 banner, fetch followers, download their images, composite them onto the banner, and upload the result back to Twitter.
Reading notes#
- Create a Twitter developer account, make a new app, switch the app to read and write, and collect the API key, API secret, access token, and access token secret.
- Prepare a 1500x500 banner image with Headers.me or Canva.
- Create an
index.jsfile, runnpm init -y, and installtwitter-api-client,fs,jimp, andaxios. - Load the packages with
dotenv,twitter-api-client,axios,fs, andjimp. - Set up the Twitter client with the API key, API secret, access token, and access token secret.
- Test the connection by calling
followersListwithscreen_nameandcount: 3and logging the returned users. - Comment out the test code after confirming it works.
- Define a
download_imagefunction that usesaxiosto stream an image to a local file. - Define a
drawImagefunction that reads the banner and three follower images with Jimp, composites the avatars onto the banner, writes the final image, converts it to base64, and uploads it withaccountUpdateProfileBanner. - In
start(), create animage_urlarray and alastDrawImagetimestamp. - Fetch the latest three followers, unshift each profile image URL into the array, download the three images, and call
drawImagewhen enough time has passed to avoid rate limits. - Delete the downloaded images after updating the banner.
- Call
start()once and repeat it withsetInterval(..., 6000)so the process keeps running. - The post says the code can be kept running or deployed on Heroku, and links a GitHub repo for reference.
