Tech Tuesday's Tip: Making Timelines with TimelineJS - John Pape, 1851-1945

I made my first timeline with TimelineJS using my blog posts on Saturday, and I just can't get over how easy it is!  So easy, that I made another one today, this time on my paternal great-grandfather:

This was pretty easy to do. You start with a Google Drive spreadsheet. TimelineJS has a template you can download. Here is how part of mine looked:

There are columns for dates (start and end), a headline and text, whatever media you are linking to, captions and credits, and thumbnails for the media, slide type (such as the title slide), and tags (you can have up to six).  The media can be can be a link to a YouTube, Vimeo, SoundCloud, Dailymotion, Instagram, Twitter (pic or status), Google+ status, Wikipedia, Flickr, Google Maps and Docs, Vine, or an image (such as one in a blog post).  You can also put a quotation in as media, too, with the HTML blockquote tags.

I'm using the media caption slide to create a link to my blog posts.  Only the start date and headline are required fields. I may experiment with tags (which can be used to create categories within the timeline) later.

Once you have your spreadsheet set up, the next step is to publish the spreadsheet to the web.  You want to make sure to check the box next to “Automatically republish when changes are made.” This way, you can add events (from later blog posts, for example) to the spreadsheet later, and the timeline will automatically be uploaded.

Step 2 produces a URL that you then paste into the designated box on Step 3 of the TimelineJS website.  There are some options you can choose from (different font combinations, for example, or for code for a Wordpress.org blog - note that TimelineJS won't work on blogs hosted on Wordpress.com). You then grab the embed code and paste it in your blog or website - and you have a beautiful timeline!

I like this so much, I have set up a separate Timelines page on this blog, to store all my timelines!




© Amanda Pape - 2013 - click here to e-mail me.

Using TimelineJS to Make a Timeline About My Grandfather

Check this out....use the arrows in the image area to move, or click on items in the timeline below it. I created this using TimelineJS. I learned about it during the Amigos [Library Services] 2013 Member Conference, held last week, in a session called "Getting Digi With It" by Caroline Castillo and Jeanette Sewell of the Houston Metropolitan Research Center of the Houston Public Library.  They use it to create timelines with primary source materials and oral history recordings from the Houston Area Digital Archives.

Once I saw this, I knew I had to try it out here on my family history blog!  I think I'm going to have to create a separate page on this blog just to store all the timelines I plan to make!

Making a timeline was quite easy - Jeanette has a Prezi that outlines the steps.   Basically, each line of a Google Drive spreadsheet (a template is provided on the TimelineJS site) is an event, with date, description, links to media (images, videos, Google maps, etc.).  This is published to the web, and then the spreadsheet's link can be copied and pasted into the TimelineJS Embed Generator. This creates a timeline that can be embedded into blog posts or on a website

The timeline above includes a placeholder for a future post, and I'm sure I'll add other posts about my grandfather to it down the line.  It's easy to make changes; you just edit the Google spreadsheet.  I've added links to the relevant blog posts as captions for each image.


















© Amanda Pape - 2013 - click here to e-mail me.