Skip to Main Content

FRN340: Social Networking in Early Modern France: TimelineJS

Fall 2018, H. Visentin

Resources for TimelineJS3

TimelineJS3 is an open source tool that will allow you to easily design a presentation of your researched content such as youtube videos, images, text, sound bites, google maps, and twitter feeds along an interactive timeline.  It works using a Google Spreadsheet that you will enter your research into, publish it to the web, copy the link of your document to the Timeline site and click preview to render your timeline.  Timeline JS3 is very self explanatory once you are on the site so rather than reinvent the wheel, you can go directly to TimelineJS3 and learn how to make a presentation quickly and easily.  To further explore the tool with regards to this project, follow the steps below. 

To get started: 

Step One:  Go to TimelineJS3 and essentially follow the directions on the site or here until you get to Step 7 below. 

Step Two:  Click "Make a Timeline" 

Step Three:  Click "Download a Template"

Step Four: Save a copy of the template to your Google Drive.  Be sure to rename it. 

Step Five: Render a test of the template to gain a better of understanding of the file formats that TimelineJS3 will you allow you to render. To do this, go to File > Publish to the Web> click "Publish" and copy the link to your clipboard. 

Step Six: Go to TimelineJS3 and scroll down to "Make a Timeline" Step 3 and paste your spreadsheet link to the Google Spreadsheet URL field. 

Step Seven:  Click Show next to "Optional Settings" This will reveal several design and customizable options for you to choose from including rendering your timeline in French.  Just click the dropdown under "Language" and select Français. While you're here, take a look at some of the other options available to you such as "Font (change)" or "Show Nav on Top" to customize your presentation. 

Step Eight: Note that Timeline automatically creates the embed code for your timeline without you having to click a save or render option.  You can just copy the code from the site and embed it or click the "Get a link to Preview" option.  Timeline will render your presentation in a new browser window and you can just copy the URL to your timeline to share or post it. 

QUICK TIPS: (& Additional Tips for Customizing Your Timeline) 

  • Do not add or leave a blank row in the spreadsheet or change the header titles. This will interrupt the render of your Timeline and it will error.
  • Do not shorten the link when you save a Google Map.  Be sure to use the whole link either from the browser or go to ‘share or embed’ and copy the link. 
  • If you have your Google Spreadsheet open and your timeline open at the same time, you can edit your Google Spreadsheet and it will automatically update your Timeline, but you will need to refresh the Timeline browser window.   

Scroll down to see some examples.

Other Media Resources:

Imgur for Image Storage

Flickr for Image Storage

Soundcloud for Audio

YouTube for Video

Google Maps for Maps

Web Color Guide

Trello is a collaboration tool that allows one or more students to categorize, store and comment on media collected in one space.  You can upload video, images and text to Trello and then, copy the URL's out to paste in your Google Spreadsheet to add media to your timeline. To begin, log into to Trello using your Smith Google account. Start a ‘list’ in Trello, name it and then click ‘add a card’ and name the card.  This will allow you to edit the card and to add images, text and media links to it.  Then, copy the media url and paste it into your Google Spreadsheet.   

For more information, please see the Trello tutorials below to help get you started.  

Trello Tutorial

Also, visit the Welcome Board that appears in a new user account

Trello Getting Started Guide




Ask Us - Meet with Us

Teaching, Learning & Research Librarians

Contact: Teaching, Learning & Research Librarians

 Use Ask Us to connect