How to fix Facebook sharing

UPDATE: Stories hosted on ArcGIS Online have been updated to fix Facebook sharing. This post is now only relevant to stories that are self hosted and have not been updated.


Recently, a change to the Facebook sharing API caused an issue with the Facebook button in the header of our story map apps (see announcement and description of the issue in this post on the ArcGIS blog).

The issue described in this article affects the Facebook sharing button in the header of story maps, such as the one shown here in a Story Map Journal.

A workaround mentioned in that blog is to use the Builder to hide the Facebook button so readers do not encounter the issue. This will work for any apps you are hosting on your own infrastructure except Story Map Shortlist, which currently doesn’t have a builder.

We will push a fix for this issue to the downloadable version of our apps on GitHub soon so you can update your app to make the Facebook button work properly again. However, a simple code change in your hosted apps will get the button working properly again now if you don’t want to hide the Facebook button or wait for the update.

Test Facebook sharing

First, test the Facebook button in your app to see if it is indeed broken. If you have customized the Facebook sharing in your hosted app it may not be affected by this issue so no change is needed.

If you get the error below, then proceed with the fix.

Find and replace the sharing URL in the app code

To fix the Facebook sharing button so that it works in a story map you are hosting on your own infrastructure search for:

http://www.facebook.com/sharer.php

and change it to:

http://www.facebook.com/sharer/sharer.php

in the files mentioned below.

In Story Map Tour, make the change in these files:

  • apps/maptour-builder-min.js
  • apps/maptour-viewer-min.js

In Story Map Journal, make the change in these files:

  • apps/builder-min.js
  • apps/viewer-min.js

In Story Map Series, make the change in these files:

  • apps/builder-min.js
  • apps/viewer-min.js

In Story Map Swipe/Spyglass, make the change in these files:

  • apps/swipe-builder-min.js
  • apps/swipe-viewer-min.js

In Story Map Shortlist, make the change in this file:

  • apps/js/main.js

In some cases the source code files are minified files and look unformatted when viewed in a text editor like Notepad, but you can still search for the URL and update it.