{"id":81261,"date":"2018-01-05T09:30:41","date_gmt":"2018-01-05T09:30:41","guid":{"rendered":"http:\/\/www.esri.com\/arcgis-blog\/products\/product\/uncategorized\/embedding-story-maps-in-websites-and-blogs\/"},"modified":"2024-04-08T18:22:56","modified_gmt":"2024-04-09T01:22:56","slug":"embedding-story-maps-in-websites-and-blogs","status":"publish","type":"blog","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/arcgis-online\/mapping\/embedding-story-maps-in-websites-and-blogs","title":{"rendered":"Embedding Story Maps in websites and blogs"},"author":7641,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","format":"standard","meta":{"_acf_changed":false,"_searchwp_excluded":""},"categories":[22941],"tags":[24881,31521,29261,24871],"industry":[],"product":[36571,36551,36611],"class_list":["post-81261","blog","type-blog","status-publish","format-standard","hentry","category-mapping","tag-embed","tag-embedding","tag-story-map-tips","tag-story-map-tutorial","product-arcgis-enterprise","product-arcgis-online","product-story-maps"],"acf":{"short_description":"Story Maps make it easy to leverage geography to tell your story. Here's how to embed your stories in other places.","flexible_content":[{"acf_fc_layout":"content","content":"

Note<\/strong>: This blog article covers the classic Esri Story Maps which are in mature support and scheduled to be retired in late 2025<\/strong>. Story authors are strongly encouraged to use the new ArcGIS StoryMaps<\/a> to create stories.<\/p>\n

For more information about transitioning to the new StoryMaps, see ArcGIS StoryMaps resources<\/a>. For more information about the transition from classic Esri Story Maps to the new ArcGIS StoryMaps, see Esri Story Maps: Now in mature support<\/a>.<\/p>\n

\"\"<\/p>\n"},{"acf_fc_layout":"content","content":"

Story Maps let you combine maps with text, images, and multimedia content, making it easy to leverage geography to tell your story. You can view lots of examples from Esri and the Story Maps user community at the Story Maps Gallery<\/a>.<\/p>\n

Many story maps are intended for standalone use in a browser, but they can also be embedded in a website or blog. Embedding any story map is easy, follow these steps to learn how.<\/p>\n

*<\/span>
\nEmbed your Story Map<\/span><\/h2>\n

Story Maps can be embedded using an iFrame tag, but the needed HTML is automatically generated for you, so you don’t even need to know what an iFrame is.<\/p>\n

Step 1:<\/strong> Sign in to Story Maps<\/p>\n

Go to the story maps website at storymaps.arcgis.com<\/a> and sign in to your account. Look for Sign In at the top right of the page.<\/p>\n

\"\"<\/p>\n

Step 2:<\/strong> After you sign in, click My Stories.<\/p>\n

\"\"<\/p>\n

Step 3:<\/strong> Click the title of the story map you want to embed, then click the share link.<\/p>\n

Click the title to check your story. When you do, you will see the link button (shown below with the green arrow).<\/p>\n

\"\"<\/a><\/p>\n

Step 5:<\/strong> Copy the embed HTML.<\/p>\n

Once you click the share link, you’ll see several options to share your story. Choose the desired size and copy the HTML. You can also preview what your HTML will look like with your story map by clicking Preview Your Embed.<\/p>\n

\"\"<\/p>\n

Step 6:<\/strong> Add the HTML from Step 5 to your website or blog. Just copy and paste the HTML that’s been generated in your page or post where you would like it to appear.<\/p>\n

*<\/span>
\nEmbed any public Story Map<\/span><\/h2>\n

You can embed any publicly shared story map that includes the share link (an option for the story map author). If a share link is available, do the following.<\/p>\n

Step 1:<\/strong> Click the share link.<\/p>\n

\"\"<\/p>\n

Step 2:<\/strong> Choose the desired options, then copy and paste the embed code into your website or blog.<\/p>\n

\"\"<\/a><\/p>\n

Tip:<\/strong> Whenever embedding a story map into your website or blog, it’s best if you own the story map. Otherwise, there’s no guarantee that the story map will remain available, or be unchanged.<\/p>\n

*<\/span>
\nTips and Considerations<\/span><\/h2>\n

For best results, here’s a few things to keep in mind when embedding story maps.<\/p>\n

*<\/span>
\nTip1: Minimize the UI when embedding<\/h2>\n

When embedding a story map, the header may not be needed, since the title, subtitle, and links will likely be handled within the hosting website or blog. To eliminate the unneeded UI elements, add\u00a0&embed<\/strong>\u00a0to the end of the story map URL.<\/p>\n

Below is a Story Map Swipe and Spyglass showing the normal appearance with a header. The URL is:<\/p>\n

http:\/\/story.maps.arcgis.com\/apps\/StorytellingSwipe\/index.html?appid=459ff1719f5f427180cd8b793894052b<\/a><\/p>\n

\"\"<\/a><\/p>\n

When &embed is added to the end of the URL, the header is minimized, omitting the title, subtitle, logo, and links. Note the addition of &embed to the URL shown above.<\/p>\n

http:\/\/story.maps.arcgis.com\/apps\/StorytellingSwipe\/index.html?appid=459ff1719f5f427180cd8b793894052b&embed<\/a><\/p>\n

\"\"<\/a><\/p>\n

The example below shows a Story Map Swipe and Spyglass embedded in a website with the header minimized via the use of &embed.<\/p>\n

\"\"<\/a><\/p>\n

*<\/span>
\nTip 2: Consider the available space<\/h2>\n

Story maps are responsive, so they will fit the allotted space within your website or blog, with elements moving and adjusting to fit any form factor. Open any story map in a browser and adjust the window size to see what happens. Or use the Preview Your Embed button to see what your story map will look like given the width and height you’ve chosen.<\/p>\n

Below is a comparison of an embedded Map Journal (left) which displays in responsive layout mode because of the dimensional constraints of the web page. On the right the Map Journal appears in normal layout mode.<\/p>\n

\"\"<\/a><\/p>\n

Considerations:<\/strong><\/p>\n

In general, it’s best to only embed when the space allows for the normal layout to appear. You can also consider a link, instead of embedding, when a normal layout is not possible.<\/p>\n

Some templates will work better than others when placed into websites or blogs with constrained space. Adjust your page accordingly to provide the best results, or choose templates that look best within your specific dimensions.<\/p>\n

For your\u00a0mobile-friendly view, consider replacing the live app with a screenshot or link that opens the story in another tab.<\/p>\n

*<\/span>
\nTip 3: Add a View Larger link<\/h2>\n

Especially when your web page or blog doesn’t provide a lot of real estate for your story map, it’s a good idea to provide an opportunity to open your story map full size. Below is an example of an embedded Story Map Tour (with the header minimized) that includes a “View Larger” link in the lower left, under the story map.<\/p>\n

\"\"<\/a><\/p>\n

You can accomplish this by adding a link to open the story map in a new browser window or tab, the HTML is shown below:<\/p>\n

[sourcecode language=”html” gutter=”false”]<\/p>\n

<a href=”http:\/\/storymaps.esri.com\/stories\/2015\/atlas-for-a-changing-planet\/”
\ntarget=”_blank”>View Larger Story Map<\/a><\/p>\n

[\/sourcecode]<\/p>\n

The use of target=”_blank” ensures the story map is opened in a new browser window or tab.<\/p>\n

This may be especially useful for your\u00a0mobile-friendly view, where replacing the live app with a screenshot or link that opens the story in another tab may provide a better experience.<\/p>\n

*<\/span>
\nTip 4: Scheme with color<\/h2>\n

You can easily change the default color scheme of your story map using options available in the story map builder, or by modifying the source if you\u2019re hosting your own. For a more aesthetic web page, modify the story map color scheme to match or complement your web page color scheme.<\/p>\n

\"\"<\/a><\/p>\n

*<\/span>
\nIn Summary<\/span><\/h2>\n

Embedding your story maps in websites or blogs offers additional ways to leverage your work, and tell your story. With a little bit of thought and a dash of webcraft, your story maps can be effectively embedded and shared to reach a larger audience, and can enhance your sites by adding interactive stories.<\/p>\n

*<\/span>
\nView examples<\/span><\/h2>\n

Visit the Story Maps Gallery of\u00a0embedded story maps<\/a> to view more examples.<\/p>\n

If you are working with the newer ArcGIS StoryMaps, see:<\/p>\n