Tell your story with Spark Page and Video Embeds on Portfolio UPDATED

When building a Portfolio, there’s a good chance that at least some of your creative work is scattered around the web on different sites and services. Tracking down all of those files can take forever, and in some cases, it might even be impossible to recreate that asset on a new platform. A YouTube video, a SoundCloud track, or a Vine Loop can help demonstrate a more cohesive project, so we make it easy to paste an embeddable code from those platforms into a Portfolio Project or Page. This helps tell a better story, but it also lets those assets live on other platforms where they can be found and shared in their “native” environment.

A couple of embeds that we’ve recently added to our lineup are Adobe Spark Video and Adobe Spark Pages. Spark Videos allow you to quickly and easily create animated videos and Spark Pages let you create a beautiful “story” in the form of a simple, but dynamic, webpage. They’re both incredibly easy to use, but also amazingly effective creative tools. On top of that, they’re both completely free!

Sharing Adobe Spark Videos on Portfolio

We’ll start with Videos since it’s actually very, very simple. When you’re done creating a Spark Video log into Spark on a desktop computer. From the video’s share menu, there’s an option to copy an embed code.

When you’ve selected the dimensions you’d like, copy the embed code. Whether you’re creating or editing a new Page or Project in Adobe Portfolio, you should see in the Edit Remote an option to create an Embed Module. Once you see the embed module, paste the code you’ve copied. Save your project and you’re done!

Embedding Adobe Spark Pages

There are two options for Adobe Spark Pages depending on what version of the app you’re currently using:

Embed the embed.html via an <iframe>

This approach is available only on Spark Pages created with the latest version of the app (version 1.6 on iOS). You embed a special html file into an iframe that shows the title of the Spark Page along with author information as well as views and likes.

To embed in this manner first click the “Embed Media” button and then enter this code:

(Be sure to replace the XXX with the ID of your Spark Page)

Benefits:

Author, view, like information shown
Clear call to action button to “Read More”
Subtle hover effects when you mouse over the embed

Drawbacks:

Only available in projects published (or re-published) with the latest version of Spark Page
Doesn’t show the full title section (only the title text)
Theme font is used, but other theme elements are not

2. Embed the embed.jpg as an image with a link

This approach is available to any published Spark Page, even the older ones. Here you download the embed.jpg image which represents the title section and insert that as a normal image which you then link.

To embed in this manner follow these directions:

1. Go to https://spark.adobe.com/page/XXX/embed.jpg

2. Download that image to your desktop

3. Click “Upload Files” in Adobe Portfolio and select that image

4. Click the Pencil icon on that image, then click Edit Link

5. Enter the URL to your Spark Page then check Open in New Window

(Be sure to replace the XXX with the id of your Spark Page)

Benefits:

Works on all published Spark Pages (even old ones)
Shows an exact screenshot of the full title section (including subtitle and theme)
Improves the search engine visibility of the Spark Page

Drawbacks:

Less immersive experience
No author information shown

Adding a link to an image within Portfolio

Adobe Portfolio is a great platform to bring together all of your creative work from around the web, wherever it is. If you’ve got embeddable content we don’t support yet, let us know at help.myportfolio.com.