19

Back test

Launch
3d

Contact us

We'd love to hear from you. So if you want to ask us any questions, offer feedback on the site or would like to buy the professional version of our software and host it on your site, please drop us a line.

We can be contacted by email at: hello@tiki-toki.com.

You can also follow us on twitter at twitter.com/tiki_toki.

If you are having any problems with Tiki-Toki, please contact us as at: help@tiki-toki.com

Close

Edit this timeline

Enter your name and the secret word given to you by the timeline's owner.

3-20 true Name must be at least three characters
3-20 true You need a secret word to edit this timeline

Checking details

Please check details and try again

Go
Close

Adminclose

Close helpOpen help

Timeline Admin Intro

Welcome to TikiToki's admin interface. Here, we have tried to make it as easy as possible for you to create your own interactive timelines.

You will most likely want to do one of the following:

Create a new timeline

Click on the Create new timeline option and enter the required information. Check out the contextual help here if you are not sure what to enter.

Edit a timeline

You have already created a timeline. Congratulations! Start editing it by clicking on its title or the 'edit' option in the timeline list.

Delete a timeline

You can delete a timeline by clicking on the 'delete' button to the right of the timeline's title.

Timeline Admin Guide

Minimise this guide by clicking the Close help tab to the left. More detailed help can be found using the Help option in the main menu.

There are four main things you will probably want to do:

Change timeline settings

Everything from a timeline's title, colour scheme and date range to its background image and intro text can be changed in the Settings tab.

Edit or create a new story

Choose the Stories tab to create and edit stories on your timeline. You can edit existing stories by clicking on the story titles in the list. Or you can create a new story by clicking on the Create new story link.

Add/edit categories

Categories allow you to colour code your timeline stories. Select the Categories tab for more info.

Save timeline to disk

Click the Save to file or Save as new file buttons at the bottom left of the timeline. Saving is disabled in demo version.

tl-ah-selected-timeline-headline

Story Content

This is where you add content to the stories that appear on your timeline. We have separated this into three sections:

Basic info

Here you enter basic info about your story, including its title, the date it occurred and some introductory text. You can also choose the story's category (add categories via the Categories tab) and also add a link to an external web page.

Story media

Connect images, videos and audio to your story via the Story media tab. These will be turned into image and video galleries in the popup panel that appears when visitors click on the story in your timeline.

tl-ah-selected-story-headline

Feeds

This is an experimental new service that allows you to create stories (events) from external feeds. We currently support YouTube, Twitter and RSS.

Multiple Feeds

You can import multiple feeds into a single timeline, for instance to make a timeline containing the latest tweets from your friends - try combining this with our Category Band view and/or Equal Spacing mode (see Settings tab).

RSS and YouTube

You can also create a timeline from your blog posts using our RSS feed service, or make a video timeline using a variety of YouTube feeds.

Warning

Have fun making feed based timelines but bear in mind we rely on external services to provide feed integration and cannot therefore guarantee its reliability.

tl-feeds-tab-menu-item

Timeline title (Edit)

Create New Story

Story Title

Enter a short snappy title for this story. The title should not be more than a handful of words.

Good titles include 'I was born', 'David Bowie releases new album', 'Henry IV beheads another wife'.

1-255

Story start date

It is advisable to type in the date in a format similar to the following: DD/MM/YYYY HH:MM:SS. You can miss off the hours, minutes and seconds if you don't need them.

For example: 10/09/1972 (10th Sept 1972) or 20/10/2010 05:30:10 (Five thirty and ten seconds in the morning of 20th October 2010).

To create a BC date, simply append BC at the end. For example: 15/08/0550 BC is 15th August 0550 BC.

Please note that all years must be at least four digits, so to create an entry for 1st Jan 0010 AD, you would enter the following: 01/01/0010.

For dates before 99999 BC or after 99999 AD, simply enter the year, for example: 5 000 000 000 BC for five billion BC.

date tl-ah-story-field-id-dateFormat

Story end date

It is advisable to type in the date in a format similar to the following: DD/MM/YYYY HH:MM:SS. You can miss off the hours, minutes and seconds if you don't need them.

For example: 10/09/1972 (10th Sept 1972) or 20/10/2010 05:30:10 (Five thirty and ten seconds in the morning of 20th October 2010).

To create a BC date, simply append BC at the end. For example: 15/08/0550 BC is 15th August 0550 BC.

Please note that all years must be at least four digits, so to create an entry for 1st Jan 0010 AD, you would enter the following: 01/01/0010.

For dates before 99999 BC or after 99999 AD, simply enter the year, for example: 5 000 000 000 BC for five billion BC.

date

Story Intro Text

Enter a paragraph of introductory text (or a standfirst, for the jounalistic minded) about your story. Around 25 words is a good amount.

If you need to enter more, you should enter it in the full text field below. The full text field also allows formatting.

Story Full Text (optional)

If you have lots of text content for a story, you should put it here. This text will feature in the popup panel that appears when users select a story on the timeline.

Insert newlines to create paragraphs and use the following format - [Link_text](http://www.a_url.com) - to create links.

Story Category (optional)

Choose a category for your story. Note that you will have to create some categories (by clicking on the Categories tab) first.

Story Link (optional)

Enter a url here if you want users to visit an external website to find out more information about a story.

If you do, we will automatically create a 'Read more' button.

Please check details and try again

Checking details

test

Add New Media

Media title

Adding an image

Enter the url to an image or click on the magnifying glass for other options.

Adding a video

Find the video on Youtube or Vimeo. Paste the url into this field. Or click on the magnifying glass icon to select a video from your computer.

The url for a youtube video will look like http://www.youtube.com/watch?v=9xdKW75J49s. A Vimeo one will look like: http://vimeo.com/18008261.

Adding audio

Click on magnifying glass to choose file on your hard drive. Or enter a SoundCloud url (http://soundcloud.com/user123/ recording-on-friday-1).

small tl-ah-media-item-field-caption 1-999999999999 true tl-ah-media-item-field-thumb-position tl-ah-media-item-field-data-uri

Media Type

Select either image, video or audio, depending on the type of media you are using.

1-255

Media Index

Use this number to order your images and videos. The lower the number, the earlier the video or image will appear in the video and image galleries.

The image or video with the lowest index will also appear in your story on the timeline.

Video/Audio thumb image

This field will be automatically populated for Vimeo and YouTube videos. But if you do not like the auto-generated thumb, you can select your own image.

Either enter the url to an image (please ensure you have permission to use the image) or click on the magnifying glass for other options.

small tl-ah-media-item-field-thumb-position tl-ah-media-item-field-data-uri

Media Caption (optional)

Enter a caption for the image or video. No more than ten-15 words recommended.

Please check details and try again

Checking details

test

Timeline Title

Enter the title for your timeline. Try to be succinct. No more than ten or so words.

Suitable titles might include 'David Bowie through the Decades', 'The Egyption Revolution' or 'The life of my beloved mother'.

1-255

Timeline Start Date

It is advisable to type in the date in a format similar to the following: DD/MM/YYYY HH:MM:SS. You can miss off the hours, minutes and seconds if you don't need them.

For example: 10/09/1972 (10th Sept 1972) or 20/10/2010 05:30:10 (Five thirty and ten seconds in the morning of 20th October 2010).

To create a BC date, simply append BC at the end. For example: 15/08/0550 BC is 15th August 0550 BC.

Please note that all years must be at least four digits, so to create an entry for 1st Jan 0010 AD, you would enter the following: 01/01/0010.

For dates before 99999 BC or after 99999 AD, simply enter the year, for example: 5 000 000 000 BC for five billion BC.

date

Timeline End Date

It is advisable to type in the date in a format similar to the following: DD/MM/YYYY HH:MM:SS. You can miss off the hours, minutes and seconds if you don't need them.

For example: 10/09/1972 (10th Sept 1972) or 20/10/2010 05:30:10 (Five thirty and ten seconds in the morning of 20th October 2010).

To create a BC date, simply append BC at the end. For example: 15/08/0550 BC is 15th August 0550 BC.

Please note that all years must be at least four digits, so to create an entry for 1st Jan 0010 AD, you would enter the following: 01/01/0010.

For dates before 99999 BC or after 99999 AD, simply enter the year, for example: 5 000 000 000 BC for five billion BC.

date startDate

Timeline Intro Text

Enter a paragraph of introductory text (or a standfirst, for the jounalistic minded) about your timeline. Around 25 words is a good amount.

If you need to enter more, you can use the About field below.

This text will appear in a popup panel that appears when visitors first arrive at your timeline. To view this panel, click the About this timeline menu option above.

Timeline About Text (optional)

Enter further information about your timeline here.

Insert newlines to create paragraphs and use the following format - [Link_text](http://www.a_url.com) - to create links.

This text will appear in a popup panel that appears when visitors first arrive at your timeline. To view this panel, click the About this timeline menu option above.

Story spacing

You may want to play around with this option if your timeline is cluttered and stories overlap.

The Standard option spaces stories along the x-axis in proportion to their date/time. Stories that are further apart (or closer together) in time will be further apart (or closer together) on the timeline.

With Equal Spacing 1 and 2, the stories are spaced equally regardless of how far apart (or close together) they are in time.

Top to Bottom is similar to the Standard view except stories are arranged in rows from the top to the bottom of the timeline stage. Choose to have between 3 and 6 rows.

View type

The Standard option offers a standard timeline with only a single stage for showing stories. The stories include a coloured tag indicating their category.

The Coloured Stories option is the same as Standard except the whole story is coloured the category colour.

With the Category Bands view, the timeline is split up into coloured horizontal bands for each category you have created. Works best with two to five categories and Equal Spacing 1.

The Duration view shows the duration of events using a coloured bar.

Background colour

Choose the background colour for your timeline. Use this as an alternative to having a background image.

Timeline base colour

Choose the base colour for your timeline. This colour is used to colour the date scale and as the default colour for categories.

Intro image (optional)

Choose an image to appear alongside the intro text about your timeline.

Either enter the url to the image (please ensure you have permission to use the image) or click on the magnifying glass for other options.

small tl-ah-timeline-intro-image-caption tl-ah-intro-image-data-uri

Background image (optional)

Choose an image to appear as the background of your timeline. Recommended if you want to give your timeline a unique appearance.

Either enter the url of the image (please ensure you have permission to use the image) or click on the magnifying glass for other options.

large tl-ah-timeline-bg-image-caption tl-ah-background-data-uri

Background credit (optional)

Enter a credit for the background image.

Zoom

Select a zoom level for your timeline. You may want to change this if the stories on your timeline are overlapping each other or have huge gaps between them.

Timeline start position

Where would you like the timeline to be at when it loads. You can choose to focus on the first or last story, or select a particular story.

Please check details and try again

Checking details

test

A Category

Category title

Enter a title for this category.

1-255

Category colour

Choose a colour for your category. Using different colours for different categories can help make your timeline look unique.

1-255

Category Band options

Category order

Enter a number to define the order of this category in the Category Band view (see the Settings tab). The lower the number the earlier the category will appear.

number

Category size

Enter a number to define the size this category's band will have in the Category Band view (see the Settings tab).

The higher the number, the larger the band. 10 is the default size. So to create a band twice this size, enter 20, three times the size, enter 30 and so on.

number

Category layout

Choose a layout for stories in this category in the Category Band view.

The choices are between the 'Standard' layout and the 'Duration' layout. The latter displays stories with different start and end dates as bars, and colours stories in the category colour.

The former uses the standard translucent white story bubbles.

Duration layout rows

Choose how many rows stories in a category band should be laid out over for the duration layout. The default is 3.

number

Please check details and try again

Checking details

test

Add New Feed

Feed name

Feed name

Enter a name for your feed.

Source

Select the source for your feed.

RSS Feed url

Enter the url of the RSS feed.

JSON Feed url

Enter the url of the JSON feed.

Filter

How do you want to filter the YouTube feed.

Username

Enter the username of a YouTube account. The user's videos must be publicly accessible.

Search term

Enter a search term by which you wish to filter YouTube videos.

Filter

How do you want to filter the Flickr feed.

Username

Enter the username of the Flickr account. The user's images must be publicly accessible.

Search term

Enter a search term by which you wish to filter Flickr images.

Filter

How do you want to filter the Twitter feed.

Username

Enter the username of the Twitter account. The user's tweets must be publicly accessible.

Search term

Enter a search term by which you wish to filter Tweets.

Number of entries

The number of items from the feed that you want to appear on the timeline. Note that this is the maximum number of entries that will be displayed.

In reality, there may be many less, depending on how many entries there are in the actual feed.

Feed Category (optional)

Choose a category for your feed. Note that you will have to create some categories (by clicking on the Categories tab) first.

Please check details and try again

Checking details

test

New timeline

Minimise

Timeline Title

Enter the title for your timeline. Try to be succinct. No more than ten or so words.

Suitable titles might include 'David Bowie through the Decades', 'The Egyption Revolution' or 'The life of my beloved mother'.

1-255

Timeline Start Date

It is advisable to type in the date in a format similar to the following: DD/MM/YYYY HH:MM:SS. You can miss off the hours, minutes and seconds if you don't need them.

For example: 10/09/1972 (10th Sept 1972) or 20/10/2010 05:30:10 (Five thirty and ten seconds in the morning of 20th October 2010).

To create a BC date, simply append BC at the end. For example: 15/08/0550 BC is 15th August 0550 BC.

Please note that all years must be at least four digits, so to create an entry for 1st Jan 0010 AD, you would enter the following: 01/01/0010.

For dates before 99999 BC or after 99999 AD, simply enter the year, for example: 5 000 000 000 BC for five billion BC.

date

Timeline End Date

It is advisable to type in the date in a format similar to the following: DD/MM/YYYY HH:MM:SS. You can miss off the hours, minutes and seconds if you don't need them.

For example: 10/09/1972 (10th Sept 1972) or 20/10/2010 05:30:10 (Five thirty and ten seconds in the morning of 20th October 2010).

To create a BC date, simply append BC at the end. For example: 15/08/0550 BC is 15th August 0550 BC.

Please note that all years must be at least four digits, so to create an entry for 1st Jan 0010 AD, you would enter the following: 01/01/0010.

For dates before 99999 BC or after 99999 AD, simply enter the year, for example: 5 000 000 000 BC for five billion BC.

date startDate

Timeline Intro Text

Enter a paragraph of introductory text (or a standfirst, for the jounalistic minded) about your timeline. Around 25 words is a good amount.

If you need to enter more, you can use the About field below.

This text will appear in a popup panel that appears when visitors first arrive at your timeline. To view this panel, click the About this timeline menu option above.

Timeline About Text (optional)

Enter further information about your timeline here.

Insert newlines to create paragraphs and use the following format - [Link_text](http://www.a_url.com) - to create links.

This text will appear in a popup panel that appears when visitors first arrive at your timeline. To view this panel, click the About this timeline menu option above.

Background colour

Choose the background colour for your timeline. Use this as an alternative to having a background image.

Timeline base colour

Choose the base colour for your timeline. This colour is used to colour the date scale and as the default colour for categories.

Intro image (optional)

Choose an image to appear alongside the intro text about your timeline.

Either enter the url to the image (please ensure you have permission to use the image) or click on the magnifying glass for other options.

small tl-ah-timeline-intro-image-caption-new

Background image (optional)

Choose an image to appear as the background of your timeline. Recommended if you want to give your timeline a unique appearance.

Either enter the url of the image (please ensure you have permission to use the image) or click on the magnifying glass for other options.

large tl-ah-timeline-bg-image-caption-new

Background credit (optional)

Enter a credit for the background image.

Please check details and try again

Checking details

test

alex

0-255

******** Change

0-255
0-255
email 0-255

Teacher Upgrade

19-74839116

Please check details and try again

Checking details

You have 50 free Bronze accounts for pupils. X have already been taken and X remain.

You can now get others to contribute to your timelines via Tiki-Toki's new group edit functionality (available to Bronze, Silver, Teacher and Pupil members).
All you need to do is set a special secret word for your timeline (you can do this by clicking on the 'Advanced settings' button in the 'settings' tab for your timeline). People can use this secret word to log in to your timeline and start adding stories of their own.
Contributors can only create and edit their own stories. They cannot delete other people's stories or change the settings for a timeline.
We hope our group edit functionality will be perfect for teachers wanting to involve their class in the creation of timelines.
To illustrate how our group edit works, we have created a timeline that anyone can contribute to. Click here and then enter your name and the secret word 'teamwork' in the 'Edit this timeline' panel.
If you haven't already upgraded to our Silver or Bronze packages, and you want to use group edit, please upgrade your account now.
Load local image

Encoding image: 0%

Please wait while we upload your image to our servers

Something went wrong with your upload. Please try again.

You have used up your allocation of uploaded images for this timeline. Remove existing images to add new ones. Or upgrade your account

Please only use media for which you have permission.

Title

Close

Opt 1 title

Opt 1 text.

1-255 true
Search

Opt 2 title

Opt 2 text.

1-255 true
Search

Flickr Integration Currently disabled

We are having an issue with Flickr images appearing on www.tiki-toki.com. We have therefore disabled Flickr integration while we try to sort this out.

In the meantime, if you have a webserver, we recommend that you upload your images there and then link to them in the media source field. Sorry for the inconvenience.

 
<

1 of 10

>

Please check details and try again

Checking details

test

3d status

Direction

Color

Background fade

Panel size

Zoom

Vanishing point

Sections

Timeline width

Please check details and try again

Checking details

test

Vertical alignment

Choose whether you want the image aligned to the top, bottom or centre. Or drag image to the position you want below.

Horizontal alignment

Choose whether you want the image aligned to the left, right or centre. Or drag image to the position you want below.

Enter the width and height you want for your embeddable timeline. You should then copy the code from the 'embed' box and add it to your website or blog.

The 'Public' setting for your timeline MUST be set to 'Yes' for your embedded timeline to be viewable.

number
number
Export

Your CSV file is now downloading. Check your download folder for "timelinedata.csv"

  • 1. Download, install and run the free Paparazzi** website screenshot app.

  • 2. Enter the following url into Paparazzi and take a website screenshot.

  • 3. Open the image that Paparazzi has created in the Preview app. Rotate the image and save.

  • 4. Now open the rotated image in Safari and select the print option. In the print panel, adjust the scale to fit your needs, and then save as a PDF.

  • 5. You can now use the PDF to print out the timeline over multiple pages.

  • 1. Download, install and run the free Webshot** screenshot app.

  • 2. Enter the following url into Webshot and take a website screenshot.

  • 3. You now have an image of the timeline. If you want a PDF too, download and install the free pdfcreator** app.

  • 4. Now open the image created in Step 2 in MS Paint and rotate the image ninety degrees so it is portrait.

  • 5. Go to 'Page setup' under the Print menu and ensure that orientation is 'portrait' and scaling is 'adjust to 100%'.

  • 6. Now choose MS Paint's print option and choose 'pdfcreator' as the printer. This will create a PDF of the timeline.

  • 7. You can now use the PDF to print out the timeline over multiple pages.

*Timelines must be a maximum of 50,000 pixels wide for this to work. You may need to zoom out or use the Equal Spacing modes in order to get your timeline below 50,000 pixels wide.

**We cannot guarantee the reliability of external apps. Use at your own risk.