Adding an animated countdown to your social media posts

Adding an animated countdown to your social media posts

We run a monthly Facebook Live called #TheWPshow (‘The WordPress Show‘), on the show we bring on guests who can help the audience get more out of their website (want to see our upcoming events?).

We promote these events via our newsletter as well as on social media. As the event gets closer, we find it useful to add a countdown to social media tweets  – as that helps convey the urgency e.g.

Example of the use of a countdown gif

However, for you to get the full effect of that, I’d better also include a copy of the animated gif:

Countdown to WordPress webinar

As you see, the graphic counts down. This is eye-catching in social media.

….but how do we do this?

Timer.Plus

Update: if you have trouble accessing timer.plus (see my p.s. at the bottom of this post), try this other app instead However, make sure your countdown is small or LinkedIn will reject it for being too big! Timer.plus, as it creates simple countodwn gifs, doesn’t have this issue).

The above countdown was made with a free service called timer.plus. If you go to the homepage, you’ll see something like this:

Example of https://timer.plus/

It might not be obvious want you need to do at first, so please allow me to explain….

If you look at the green text in the black box at the bottom, that is the HTML code which will generate the image:

https://timer.plus/2020,04,14,09,44,26.gif

The eagle-eyed amongst you will notice the date is actually part of the link. So the above URL will produce a countdown timer for:

April the 14th, 2020, 9:44:26 AM

Note: be mindful that this is New York time.

So how do you create your own gif?

Decide on the date

Our webinar was running on the 24th of April at 14:00 so you might think the image link would be:

https://timer.plus/2020,04,14,14,00,00.gif

But we need to accommodate for the fact that the service is American and defaulting to New York time who are five hours behind, so it should be:

https://timer.plus/2020,04,14,09,00,00.gif

Note: To be honest, I don’t think the time difference is massively important; we’re only trying to get across the general gist of the countdown here.

Check the countdown

If you then paste that URL in the web browser, you should see (after a few seconds whilst it creates it) your countdown:

Note: if it says ‘expired‘ its because it thinks your event is in the past. Just rework the date and try again.

Download the image

Now what you want to do is to download the image.

To do that, right-click the image and click ‘Save Image as….” (these are Mac instructions, the idea is similar on PC though)

Showing 'save as image'

 

Post to Social Media

Now that you have your copy of the image, you can post that to social media etc.

Please note that this animated gif isn’t a full countdown, it’ll only contain a set amount of ‘frames‘ to countdown down. If you watch it long enough, it’ll end up saying “Refresh” but again, that’s ok, this is only meant to give the sense of a countdown.

Final Thoughts.

Of course, if you are embedding a countdown into a web page (rather than social media), we’ve got a lot more options into how to do this – javascript etc. But, on social media, we don’t have the luxury of that – so animated gifs are the way to go.

 

Hope that help.

 

Joel

 

p.s. the timer.plus website is up and down a lot, perhaps that is caused by too much web traffic; though it does come back, so keep checking. One thing you can do to avoid this issue is similar to what I just did – I’ve simply created a set of 10 countdown gifs to countdown from day 10. Doing that in one go means you don’t have to worry about the site going down in future. And, as we run monthly events, we can reuse the countdown gifs as well:

Timer.Plus website error

 

 

 

p.p.s. for the above to work, you’ll typically have to post directly into the social media channel (e.g. LinkedIn), I had difficulty scheduling tweets via Buffer with these animated gifs.

No Comments

Leave a Reply