Follow

Trouble embedding into HTTPS

Hi, having trouble embedding the Timelines in https sites...work in education and everything for our virtual learning environments is https.

Got a lot of staff who love using Timeline JS (and more importantly, they love the fact ehy can make something so slick by entering things onto a spreadsheet) but using the iFrame is a no go due to http and http conflictions.

At the moment we're just bouncing students out to the weblink (i.e. take the iFrame code, cut out the url) but a lot of staff would prefer to have it embedded on pages. Any idea on what we could do?

Cheers

Was this article helpful?
3 out of 3 found this helpful
Have more questions? Submit a request

21 Comments

  • 0
    Avatar
    Jobin Kuruvilla

    Replace the "http://cdn.knightlab.com/libs/timeline/latest/embed" in the url with "https://s3.amazonaws.com/cdn.knightlab.com/libs/timeline/latest/embed". That did it for me!

    The new url is https and so you can embed it within secure sites..

  • 0
    Avatar
    Joe Germuska

    Jobin has the right answer.

    It's a little awkward for non-technical people, but it works, and as far as we can tell it's the only option we have without pretty big changes to our hosting system.

    Thanks!

  • 0
    Avatar
    Mary Watt

    I just tried this solution and got this error message back:

    AccessDenied Access Denied61A0297D4C280A22xn34grfOCdPZkzmZOSHOI4BprYkrDaHiPt9ZLyi9JCF6eWWTQpnLRBotfUGaiyh/

    in Chrome. In IE 7 I get a 403 error. 

    Has this stopped working? Is there another solution I can try? I'm embedding the timeline in a Canvas LMS on a secure server.

    thanks for your help

  • 0
    Avatar
    Joe Germuska

    I do not know what Canvas LMS is.

    Here is an example of the fix working on Google Sites, which is one example of where people see the problem, and the only test case I can provide: https://sites.google.com/site/joestimeline/

    IE7 is not actively supported.

     

  • 0
    Avatar
    Britt Blaser

    We're using the amazonaws link in our SSL site. But other URLs don't display, or do so inconsistently. Does this mean we can only include PDFs? 

  • 0
    Avatar
    Rafael Sbarai

    Hi guys,

    I`m Brazilian journalist and professor and I´ve found the same problem that Mary suffered. I´ve shared StoryMap with my students and I´ve trying to fix this.

    Could someone help me?

  • 0
    Avatar
    Joe Germuska

    The solution for StoryMap is essentially the same as for TimelineJS. We'll change StoryMap to do this automatically, but for now, change the source of the iframe that you get when you "publish" like this:

    http://cdn.knightlab.com/libs/storymapjs/latest/embed/?url=(this part is different for every StoryMap)

    becomes

    //s3.amazonaws.com/cdn.knightlab.com/libs/storymapjs/latest/embed/index.html?url=(this part is different for every StoryMap)

    By using the URL that begins with "//" instead of "https"//" you may have better results with issues like what Britt reported, where there are mixed content issues. These cross-protocol issues are challenging, and not all embeddable media can be served both from HTTP and HTTPS, but we're trying to keep it as flexible as possible.

  • 0
    Avatar
    Rafael Sbarai

    I got it, Joe. It´s perfect. Now, it´s working! Tks!

  • 0
    Avatar
    Alexey Moroz

    Does the solution with replacement to  https://s3.amazonaws.com... works in IE9, 10? If yes, can anyone provide more details? right now I see just following message: "still waiting on google docs. trying again0" while it works fine in Chrome and FF

  • 0
    Avatar
    Joe Germuska

    @Alexey I'm afraid it doesn't seem to. Actually, it probably could, if one made changes to the default security settings on the browser, but you can't really expect your audience to do that.

    It looks like IE9 doesn't like our analytics tracking -- it's important for us to count how many people use TimelineJS so we can show our funders that our work is effective--and IE10 doesn't give such a clear message, but I'd guess it's similar.

    I haven't found any information about how to work around this, except maybe to suppress the analytics only on IE9/10 or only on IE9/10 over HTTPS. We'll make a note of the issue.

  • 0
    Avatar
    Alexey Moroz

    Thank you Joe for the fast and clear reply, I think we can live with that

  • 0
    Avatar
    Sneha Maroo

    Hi Joe,

    I'm working with Alexey who contacted you regarding the http https issue before. We implemented the suggestion from Jobin last week and as Alexey mentioned it worked fine on Firefox, Chrome, and IE11. However we have noticed today that the images are no longer showing on these browsers.

    The Timeline JS google doc contains https:// links to all images for our timeline.

    When you view the live timeline  and  'inspect' the image elements we can see the links have changed from https:// to http://

    This is one of the links which we have in our Google spreadsheet - I have attached a file containing the code when this image is inspected on the live timeline. As you can see the https has changed to http

    https://www.cancermatters.com.au/Content/media/images/2-1991.png

    Any advice would be appreciated.

     

    Thanks!

  • 0
    Avatar
    Joe Beuchel

    Using HTTPS seems to have problems with Safari as well, it displays "Still waiting on Google Docs, trying again." No problems in Chrome or Firefox though.

  • 0
    Avatar
    William Bauser

    @Joe any updates on the IE9/IE10 https issue? I'd love to implement TimelineJS on my company site, but our site is securely hosted and everyone here (unfortunately) uses IE.

  • 0
    Avatar
    Lizzie Liu

    Can someone please explain how I can "

    Replace the " http://cdn.knightlab.com/libs/timeline/latest/embed" in the url with " https://s3.amazonaws.com/cdn.knightlab.com/libs/timeline/latest/embed"? 

    Thank you! 

  • 0
    Avatar
    Alicen Morley

    Hi Joe,

      I'm trying to embed a new timeline (brand new user today) into my google sites website. I'm a HS history teacher and have had some programming experience, but not enough. I tried embedding the https url into the embed code on my website, replacing the http:// as noted above. Instead of a blank page, I now get:  AccessDenied Access DeniedB03263C0C1B2296EagE8cJ3IsEZ4tP0HJ3fTRH0lEYZQsCSx1c2vlyPvHtum15h1+HtxKe1gRH4joYfv 

    I use Google Chrome. This is my site: https://sites.google.com/a/boone.k12.ia.us/american-history-class-website/ 

    I used a template for sites and have only just gotten started on editing it. Is it the template I used?

  • 0
    Avatar
    Elitwicki

    Does this work in WordPress.com? I have no problems with the embed for Story Map (which now has the "//s3.amazonaws...") in my WordPress.org site. It embeds beautifully. On the WordPress.com, it didn't work. I then tried adding the https: to the front of this. Now it still gives the embed code on my site, but when I click on it, it does bring up the StoryMap. (attached a screen shot) So it isn't exactly embedded in the blog. Is this as good as it gets for WordPress.com accounts?

  • 0
    Avatar
    Chris Davis

    This is actually kind of a problem, given more and more sites are all under HTTPS these days, and with Google giving an SEO boost to secure sites (not to mention the value of protecting a user's privacy). Any update on this issue?

    Also, currently image URLs defined get rewritten from https to http (GitHub Issue #704 https://github.com/NUKnightLab/TimelineJS/issues/704) - why are image URLs being rewritten from https to http? This is most unexpected and triggers insecure content warnings. (apologies to digress on this thread)

     

    thanks so much!

  • 0
    Avatar
  • 0
    Avatar
    Natalie Milde

    I keep getting this error message, and I do not understand why. So far I do not have a website to publish the timeline on, it is still under construction, so I get the error message in the preview on the site where I fill in the link to the sheet. I got about half way with my timeline, the preview working perfectly, but suddenly it did not work anymore. No idea what I did..

    I thought maybe it had to do with the https, but switching it off didn't help. Does anyone know what this error message means? Am I even in the right thread in the forum? I would be super grateful for any help! 

  • 0
    Avatar
    Ryscully

    Hi, how would I embed my TimelineJS into a Google Site? When I try to do so now, the link is put in just as a link, not an embed.

Please sign in to leave a comment.
Powered by Zendesk