Alberto Beiz
Albertobeiz

Albertobeiz

How to display your latest followers in your Twitter banner

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!

Did you find this article valuable?

Support Alberto Beiz by becoming a sponsor. Any amount is appreciated!

Learn more about Hashnode Sponsors
 
Share this