How to add a Countdown to your Twitter Profile Photo

“Wouldn’t it be cool to run a Twitter countdown to the Olympics? We could change the profile image each day to show how many days there are left!!”

That was my challenge. It took me a little while to work out, but I found a very elegant solution – which I hope will help you too. Obviously it can be used to countdown to any event – but with 6 months until the Olympic Cycling Road Race comes to Surrey, the Olympic opening ceremony will be my focus!

The effect

Every day, the Twitter profile image for the countdown account changes to show how many days are left. I created an animated gif of the profile image countdown so you can get the idea of what we are aiming for. One of these each day:

As well as changing the avatar, I want to schedule a tweet to go out each day to let people know how long it is until the Olympics start.

The thinking part…

Sending a countdown tweet would be easy – I could schedule that in CoTweet (at least until they axed the free version!)

Changing the profile image was the taxing bit. I could fairly easily create lots of profile images with a different number on each, but I was clear from the start I wanted to automate changing the images over – I haven’t got the time or patience to go into Twitter every day to change the image. On top of that, it should ideally change over at midnight – so it is accurate all day. I could then schedule to send a countdown tweet later in the day (when people would be awake to see it).

A quick Google later, the closest apps I could find were:

  • Twimsy an app that allows you to change your avatar to one of 9 previously uploaded versions by sending a message to @twimsy. I could schedule a tweet to change it, but would need to keep reloading new images…
  • Twiback an app that rotates through a number of pictures you preload. You can set what time it changes, but I couldn’t work out how to change the image to a particular picture.

I even looked at writing a PHP script and running a cron job…but my programming skills are really not up to it!

IFTTT to the rescue!

Then I remembered This awesome site allows you to easily join together different Channels, and set tasks that follow the description “If THIS then THIS“. For instance “If [I post to YouTube] then [post to my Twitter]“. That link will explain it far better than I can – go off and read it. I’ll wait!

In IFTTT parlance THIS is known as a trigger and THAT is an action. The action we want  is the “update Twitter profile photo” action. This requires a filename as an input.

My first plan was to trigger it at a certain date and time – but that would require 180 different IFTTT tasks (one for each day of the countdown). That was way too much work.

Then I thought of using the “every day at a certain time” trigger. The downside of this is I need a way of telling it which image to upload. I wondered about using an “addin” from the date/time trigger (this is a piece of information that the trigger passes to the action), but was struggling to connect the addin to the file name.

The solution

Finally, I had a brainwave…IFTTT can use Google calendar entries as a trigger, and the contents of the calendar as addins. If you know IFTTT then this is what we are aiming for:

The IFTTT Task for updating the profile picture based on a Google calendar

Whenever there is a calendar entry with a title containing the keyword “ProfilePic”, update the image of the Twitter account to the filename stored in the “Description” field of the calendar.

Read on for a more detailed explanation covering:

Next page: How to prepare the countdown images…

Pages: 1 2 3 4

1 comment to How to add a Countdown to your Twitter Profile Photo

  • Boundary Commission for Northern Ireland

    Superb work, we have just followed your excellent guide. Looking forward to midnight for the first update! Thanks

Leave a Reply

You can use these HTML tags

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>