Text sections, Scrollmation, Background Scrollmation, Media, and Reveal sections all support the display of many different types of online objects.
This can be a simple and powerful way to add interactive and dynamic content to a story.
Social media posts, maps, charts, video and audio players, quizzes, forms, wikipedia article summaries, and much more can be added simply by pasting in the URL of the object you wish to be embedded within the story. This can be content you have specifically created for the story and are hosting on other platforms, or other items that are publicly addressable.
To add an item, look for the "INSERT RICH EMBED" button that appears above and below text blocks in your story:
…or the "EDIT MEDIA" button in Media sections:
In each of these cases, clicking the button will open a Media panel, with several options, one of which is "Rich Embed". You may need to click the "Rich Embed" toggle option:
By default, the panel shows the logos of a number of different supported object types (many more will work, too), and a single input box in which to paste the URL of the object you wish to add:
To embed a YouTube clip, for instance, simply paste in the same URL that Youtube uses to reference the video. It will look something like:
https://www.youtube.com/watch?v=Nlzehe4mta4
The panel will fetch a copy of the object and display it for confirmation.
A caption that will display underneath the object can be added.
Then press the SAVE CHANGES button to see the object within the story:
Object compatibility
There are so many object types that can be added, that it's impossible to give examples of each. Fortunately the way to add objects is usually as simple as pasting in the public URL of the page on which the object is hosted, straight from your browser's address bar, regardless of the object type. Simply copy the URL from your browser, and paste it into the media panel.
The way that the object is embedded within your story, and even the content that is displayed, may differ substantially from the way it was displayed on its 'usual' web page. For instance, adding the URL for this page on Wikipedia:
…produces an embedded object that looks like this within a Shorthand story (a panel featuring a short description and large image that links to the full article):
While most items that you can embed will have some degree of responsiveness so that they adapt to different screen sizes, some are more suited to occupying the full width of your Shorthand story, and others more suited to sitting within a narrower space. For this reason, you may wish to experiment with adding items to both a Media section (where they will appear full-width), and within a text column (where they will only appear as wide as the column), to see which presentation suits the object best. And of course we always recommend previewing your story on several different devices, resolutions, and orientations to ensure that objects will display well for the majority of your readers.
A note on URLs:In some cases, URLs contain parameters that are used to identify referrers, video start times, user status, or other attributes. These typically follow an ampersand in the address, eg: If you notice that the URL of the object you wish to embed has such parameters and you aren't sure what they are for, it may be best to test the URL after removing them (the ampersand and everything after it). If the embedded object displays well without the parameters in the URL, then the safest bet is to remove them. |
Some examples of embedded objects
Instagram post in a Media section:
Infogram object in a Media section:
Facebook post within a Reveal section:
Twitter post in a Text section:
Wikipedia article in Reveal and Text sections:
