How to create an embeddable timeline chart


The other day, web developer friend asked me how to create and insert a timeline into WordPress. He actually wanted to put an interactive timeline with links, images and video on the homepage of a news site.

I checked out several options out there and settled on TimelineJS. You can create timeline charts directly on their web site. Each story in the timeline has to be loaded as rows in a google spreadsheet. You can enrich each of the “steps” or events with links, videos and pictures and everything’s stupid-easy to use.

At the end you get an iframe embedding code that you can copy and paste to your site. But they even have a WordPress plugin for that. There’s even other developers who have created alternative tools based on TimelineJS that allow you to play with more settings.

So if you ever need a quick and dirty solution to build a timeline and tell a story, look no further.

 

Now, if you’re a developer and you want a proper, scalable and maintainable solution, that’s another story.

In the case of my friend, depending on an external site for such a crucial part of a website is not a good idea. What if these guys decide to abandon the product (hope not!)? What if their site goes off-line? My friend may lose his content temporarily or permanently. It’s not maintained by him, it’s not hosted by him, it’s not backed up by him. His content it’s not his.

So, the correct solution is to find a way to self-host a similar solution.

Fortunately and amazingly, TimelineJS is an open source tool and it’s on GitHub. If you’re a developer like my friend, you can download the source code, copy it to your server and that’s it. You’ll have a fledged timeline builder in minutes.

 

I'm a software architect and I help people solve their problems with technology. In this site, I write about how to seize the opportunities that a hyperconnected world offers us. How to live simpler and more productive lives. I invite you to check the "Best of" section. If you want to contact me, or work with me, you can use the social links below.

TAGS: -