Timeline JS Tutorial

  1. Getting Started
  2. Starting a Timeline
  3. Adding More Dates to Your Timeline
  4. Finalizing

 

1. Getting Started

Timeline runs on Google templates. In order to use Timeline, you must log onto Google.  If you already have a Google account, just make sure to log in or create a Google account. Google also lets you log in using your own email.

 TIMELINE JS: HOW TO GET STARTED (Video tutorial)

2. Starting a Timeline

Once you have logged onto Google, you can now get started on your Timeline. Each date you wish to include in your Timeline will appear in this horizontal row. You create these dates in these rows. The more rows you create, the longer you make your timeline.

  • On the homepage, scroll down to “Make a Timeline.” Click on “Google Spreadsheet Template” to get started.
  • Once you reached the “Timeline Template” page, click on the “Use this Template” tab on the top left.
  • You are now at your TimelineJS Template. There are examples on each section to guide you on how to use this.
  • Click on the “START DATE” box to type a date for the row. Click on “END DATE” to finalize it.
  • Click on the “HEADLINE” box to give your row a title.
  • Click on the “TEXT” box to give your row a description.
  • You can insert media in the “MEDIA” box. Paste the link to the box. You can enter almost any social media link, picture or video.
  • You have the option of citing the media you insert by clicking on the “MEDIA CREDIT” and “MEDIA CAPTION.”

TIMELINE JS: HOW TO FILL IN ROWS (Video tutorial)

3. Adding More Dates To Your Timeline

  • To add more rows, click the “ADD” tab on the bottom left. Next to it, you can enter how many rows you wish to add.

TIMELINE JS: HOW TO SHARE AMONG DIFFERENT PROJECTS (Video tutorial)

4. Finalizing 

  • Once you completed all the information you wish to have on your timeline, you can then complete it by clicking “FILE” and then select “PUBLISH TO THE WEB.”
  • The Publish to the Web screen will appear. Click on the “START PUBLISHING” tab.
  • Once you do that, a link will appear at the bottom, copy the link. Then click on “CLOSE” on the bottom right.
  • You will then need to visit the embed generator site at http://bit.ly/embedGenerator. Or you could just go back to the TimelineJS website.
  • Locate the Google spreadsheet URL section towards the bottom of the homepage. Paste your timeline URL in here.
  • Once you’ve completed that, you can then see how your timeline will look like by clicking on “PREVIEW.” If you like the outcome of your timeline, go to the embed code box. You can find it the box at the end of the STEP 3 column. Copy the embed code and paste it wherever you want. Your timeline will live in that embed code.

TIMELINE JS: HOW TO FINALIZE A PROJECT (Video tutorial)

HOW TO USE FLICKR PIC TO TIMELINE JS (Video tutorial)

TIMELINE JS: SHARING (Video tutorial)

TIMELINE JS: HOW TO EMBED AND SHARE (Video tutorial)