Embed yr Entire.Life!
Embedding your Entire.Life calendar now works acceptably well. Go show it off!
Embedding a complicated website like Entire.Life in a different webpage is a surprisingly difficult thing to get right!
I announced that it was almost working in my last post, and at least one person already went for it. Glad you’re digging it, Jon Samp!
I’ve now improved how this works to a point where I’m ready to invite everyone else to try it out, too. I’ve made it nice and easy—just sign in at https://entire.life/signin, go to https://entire.life/account (this is where you end up when you click on your avatar and select “Settings”), and make your calendar public. (Don’t worry, you can still keep some events private!)
Then look down under the Save button:
Select all the code inside that text box, and paste it onto your own webpage. Boom! Your beautiful Entire.Life calendar shows up on your own page.
What else do you want?
Yes, “what else do you want,” as in, if this almost works for you, but there’s something holding you back from doing it, let us know what we can do to help!
Do we need better instructions on how to embed it?
Do you want to embed the mobile/narrow version of Entire.Life? (That’s not particularly well-supported at the moment.)
I’ve learned allll about embedding one page in another page, and am eager to use my newfound knowledge to help you make something you’re proud of!
Why was it so hard to get right?
In a word: iframe
At the mere mention of this word, all the web-types be like
😱
For the non-web-types among you, iframes are a very old part of the web that are still the best way to do things like embedding one page in a different page. But it’s really hard to do things like get the scrolling right—you can end up with that abominated scroll-within-a-scroll behavior. No one wants that!
So you’ll see that in the code you copy & paste, there’s a bunch of stuff other than the iframe. Like an adjustHeight function. What’s going on is that when you tack that ?embed onto the end of your calendar URL (look inside the src="..." attribute on the iframe), Entire.Life changes its behavior slightly and posts messages to your webpage about how tall your Entire.Life calendar is. Sounds goofy, right? Yeah, it’s goofy.
But this lets your own webpage know how tall to make the iframe to avoid the scroll-within-a-scroll behavior. Hooray!
As I said at the beginning, this works acceptably well. It’s not perfect — specifically, if you have the Instagram add-on, sometimes the images won’t load quickly enough, and the dreaded scroll-within-a-scroll behavior will rear its ugly rear. Fixing this requires expertise at intrinsic ratios within flex-flowed elements. I tried for a couple hours, and could not attain such expertise. 😞
But I’m calling this good ‘nuff. It’ll work for 90% of cases. I’m going to move onto cooler stuff, rather than burning through more time trying to fix that last 10% of cases.
Gallery!
Here are some examples of sites that are currently embedding their shiny shiny Entire.Life calendars:
If you are, too, comment here, tweet at us, or message us on Facebook with a link, and we’ll update this post to track it!
