Embedding Web Timelines

July 18, 2011 | 4 min 51 sec

Have you considered using a timeline instead of an image in your article? This video tutorial shows you how to put interactive timelines directly into your web pages and blogs.



BEEDOCS Timeline 3D: Embedding Web Timelines

Hi folks, I’m Adam and today I’d like to show you how you can put an interactive timeline into a blog article or webpage and it will be directly in-line with the content. Now the first thing you are going to want to do is create your timeline on your Mac with BEEDOCS Timeline 3D and then you’ll publish that timeline to the web using the Web button in the toolbar.

Now, if you have any questions about creating timelines, adding media and content to your timelines, and publishing them to the web, we have created some other tutorials to walk through these steps. You can find them at www.beedocs.com/movies

Once you have your timeline published to the web, look for this Embed link in the lower left of the timeline. Now if you click this you will see some options and a snippet of code. This snippet of code is your key to embedding this timeline into your article or blog.

I am going to show you some examples. Let’s get started!

Here is a blog about movie reviews that I created using Wordpress and it has an article about J. J. Abrams with some text and an image. What we are going to do, is we are going to replace this image with a timeline of the movies the J. J. Abrams has directed.

Let’s log into Wordpress and edit our post. Switch from Visual mode to HTML mode so that you can see the code that creates the post, and find the image tag. We are going to replace this image tag with the code from our timeline.

I’m going to open a new browser window and load the web timeline and look for the Embed link in the lower left corner and choose a layout. Now, because the movie posters in our timeline are a portrait orientation and because I want this timeline to be beside the text, I am going to choose the Portrait layout here. I’m going to select the code and choose Copy.

Now come back to Wordpress, make sure that Image code is selected and paste the timeline code right on top of it. OK, now let’s publish it and take a look.

Just to remind you, here is the blog post that we started with and here is the new version with an interactive timeline of movie posters embedded into it.

Now I’d like to show you a similar change but this time we are going to use RapidWeaver instead of Wordpress. We’ll start with this article that has some text and an image. This thing looks pretty great as it is but instead of just using one photo we could have all the best photos from our trip right in this blog so that readers can scan through it and see them all.

Let’s open RapidWeaver, you’ll recognize our page here in Preview mode, let’s switch over the Edit mode which shows the text and the image without the site theme applied. We’ll pull up our timeline in a new browser window, click the Embed link again, and we’ll choose the layout. This time I am going to do a landscape layout. Select the code and choose Copy.

Come back to RapidWeaver, select the image, and paste the timeline code right on top of it. Did you see how the image was replaced with our code from our timeline? Now switch to Preview mode and see how it looks. It looks great.

But before we publish, let’s add one more thing. Since these are nice travel photos, let’s give the readers the opportunity to see them in a larger size. Let’s go back to the browser and the timeline we had loaded, and we are going to drag the web address straight from the browser into RapidWeaver. This will create the link to the full size timeline. I am going to change the link text here to say, "View full size" and then let’s go ahead and publish it.

Now we have a beautiful article with a timeline in it, we can scan through all our travel photos, and a link that let’s readers see a full size timeline with larger images from our trip.

I hope that you’ll have fun putting interactive timelines in your websites and blogs. If you create something great please send us a link at support@beedocs.com. Thanks!

– “February (Mumblemix) fr. Calendargirl” by Incoherent Mumble Train
– via ccMixter