Embedding an Adobe Spark (Slate) story into Squarespace

The new Spark Logo

The new Spark Logo

Update 19 January 2018: To embed the Adobe Spark story into Squarespace you need to use the </> Code Block.

In the past the Code Block was available for all Squarespace plans but in the last month the plans have been updated and the Code Block is now a "Premium Feature". If, however, you have a legacy "Personal" plan, purchased before the change, you will still have the Code Block. The only alternative is to upgrade to the Business or Commerce plans.

Update 3 November 2016: Adobe have listened to the numerous requests to remove the Adobe branding and you can now create unbranded Spark content.

For a limited time they are offering a free sneak peek of this ability, and you'll be able to remove branding from content you publish from now until the end of the year. After that time, if you publish or republish content, the Adobe Spark branding will reappear. 

The branding can be permanently removed if you have a paid CC membership.

Update 28 August 2016: Comment from Bee Plant that this also works in Blogger.

Update 14 March 2016: Abode Slate is now Adobe Spark Page and part of the Spark range of componentsThere are three main components to Spark: Page, Post and Video. Those tools were formerly the standalone Slate, Post and Voice; Adobe is basically branding them under Spark and giving them a bit more power under the hood.

This tip contains a description on how to embed your Adobe Spark Page project into a Squarespace page.

The app allows you to import photographs and combine them with a range of fonts. Using supplied templates, colour and magazine-style design are automatically incorporated. Fluid movement and hits of animated motion are applied subtly to photos and text.

Once you are done, publish your Spark Page and it can be shared anywhere. To download the app click/tap on the logo.

My first publication is based on an expedition cruise that took me from Hokkaido in Japan up the Kuril Island chain to Petropavlovsk in Kamchatka. It's title is The Russian Far East | Along the Ring of Fire and you can view it embedded in this website or in it's own window.

The Russian Far East

When you publish a Spark Page project one of the options is to share via embed code. This is done by selecting the <> icon on the 'Share Your Story' page.

The embed code is similar to the code below.

<a href="https://slate.adobe.com/a/74EGR"><img src="https://slate.adobe.com/a/74EGR/cover" alt="The Russian Far East" style="width:100%" border="0" /></a>

Note: this is the old code from projects published as Slate the code when published as Spark pages is as follows.

<a href="https://spark.adobe.com/page/74EGR"><img src="https://spark.adobe.com/page/74EGR/embed.jgp" alt="The Russian Far East" style="width:100%" border="0" /></a>

Adding this code to your page will insert an image and a link to the Spark Pages project as the example below Illustrates. 

The Russian Far East

Tap to view the Russian Far East

If you want to actually embed and have the Spark Page story play within your Squarespace page then you will have to use the following iFrame code within a 'Code' block: 

<iframe width='100%' height='700' src='https://spark.adobe.com/page/74EGR/' frameborder='0' scrolling="yes" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>

This will give you the result below. If you scroll within the iFrame window the pages of your Spark publication will be revealed.

Scroll vertically within the window to view the Russian Far East

The embed link offers the best viewing experience across all devices but it takes you out of the website. The iFrame embed remains within the website but is constrained to a smaller window size. 

My preferred option will be to offer both alternatives.