How to display your latest followers in your Twitter banner

Subscribe to my newsletter and never miss my upcoming articles

So I was doomscrolling as usual when I saw @tibo_maker profile banner. It displays his last 3 followers and is updated every 60 seconds.

Captura de pantalla 2021-06-09 a las 14.45.16.png

I loved it and decided to make a quick test with PHP to see if I can emulate it and...it works!

Captura de pantalla 2021-06-09 a las 14.47.23.png

You can test it on @albertobeiz

How does it work?

I used a simple Symfony Console Command, Abraham Twitter OAuth and Imagick

It shouldn't bee too hard to translate my solution to plain PHP or to a Node.js script.

Click here to get the full source code

Twitter App Setup

First you need to set up a Twitter Developer application. Click here and give your app a name

Captura de pantalla 2021-06-09 a las 14.54.40.png

Now save you API Key and API Secret and click on get user tokens. Then generate your Access Token and Secret and save them.

Captura de pantalla 2021-06-09 a las 14.56.33.png

Time to code!

First we connect to Twitter using TwitterOauth and our 4 keys:

protected function execute(InputInterface $input, OutputInterface $output)
{
    $connection = new TwitterOAuth(
        $this->TWITTER_API_KEY,
        $this->TWITTER_API_SECRET,
        $this->TWITTER_ACCESS_TOKEN,
        $this->TWITTER_ACCESS_TOKEN_SECRET
    );

Then create an empty image

$banner = new Imagick();
$banner->newImage(1500, 500, '#fefefe');

Now get the list of your followers and keep the last 5 (first 5 in the list)

$ids = array_slice($connection->get('followers/ids')->ids, 0, 5);

Now get each follower's avatar and add it to the banner. I know...lot's of magic numbers to position the avatars...but it's just a propotype!

$initialX = 1500 - (140 * 5);

foreach ($ids as $i => $id) {
    $profileImageURL = $connection->get('users/show', ['user_id' => $id])->profile_image_url_https;
    $imageBlob = file_get_contents($profileImageURL);
    $profileImage = new Imagick();
    $profileImage->readImageBlob($imageBlob);
    $profileImage->borderImage('#1da1f1', 3, 3);
    $profileImage->scaleImage(120, 120);

    $banner->compositeImage($profileImage, Imagick::COMPOSITE_OVER, $initialX + $i * 140, 500 - 185);
    $profileImage->clear();
}

Then add the text

$draw = new \ImagickDraw();
$draw->setFillColor(new \ImagickPixel('#0a0a0a'));
$draw->setFontSize(40);
$draw->setFontFamily('Helvetica');
$draw->setFontWeight(700);
$banner->annotateImage($draw, $initialX, 295, 0, 'Latest Followers:');

$draw->setFillColor(new \ImagickPixel('#666666'));
$draw->setFontSize(30);
$draw->setFontFamily('Helvetica');
$draw->setFontStyle(Imagick::STYLE_ITALIC);
$draw->setFontWeight(400);
$banner->annotateImage($draw, $initialX + 305, 472, 0, 'Updates every 60 seconds');

And we're done! Just upload your new banner to Twitter

$banner->setImageFormat('jpg');
$connection->post('account/update_profile_banner', [
    'width' => 1500,
    'height' => 500,
    'offset_top' => 0,
    'offset_left' => 0,
    'banner' => base64_encode($banner->getImageBlob())
]);

$banner->clear();

To execute the script every minute add it to a cron task

* * * * * path to your script or Symfony Command

Here's the source code again

Hope you liked this little experiment!

Leave you twitter user in a comment if you have a dynamic banner so I can try it!

Interested in reading more such articles from Alberto Beiz?

Support the author by donating an amount of your choice.

Pankaj Patel's photo

Really cool, thanks for sharing Alberto Beiztegui Casado

Andrew Baisden's photo

Cool I did not know this was possible.

Alberto Beiz's photo

Thanks Andrew!

Maybe some day Hashnode will allow us to do the same :D

Chris Bongers's photo

Wow very cool!

could you not technically host an image on S3 and re-upload with same name? For different platforms?

I need to give this a go, though very fun task

Alberto Beiz's photo

Thanks Chris!

Once you have the prototype working there's many options as long as the platforms have APIs to update the banner

Eleftheria Batsou's photo

I checked it on twitter and it looks really nice, good job Alberto Beiz

Catalin Pit's photo

This is really neat!

Thank you! 🙏