Twitter and Facebook links

849
5
Jump to solution
11-09-2016 11:26 AM
AmySmart
New Contributor

Hi,

I'm interested in embedding a story map on my website. Is there any way to change the default Twitter link to my webpage, instead of pushing users to the arcgis.com site?

I'm also encountering an error with the automated Facebook link. It says, "Error: Item does not exist or is inaccessible." I'd like to customize that link too.

Finally, when I embed the story map (640x480), is there a way to have the background photo more visible? Right now, it's entirely the faded grey that appears behind the title box, when looking at the map on the main page.

Many thanks,

Amy

0 Kudos
1 Solution

Accepted Solutions
StephenSylvia
Esri Regular Contributor

Unfortunately, the way social media sites get the title, description, and URL of a page is by reading meta tags that have to be hardcoded in the html of the page and cannot be dynamically inserted when the app loads like the rest of the content of your story (cover image, title text, etc.). Because of this, the only way to make these changes is to download the source code and change the content of these meta tags. We have a blog post about it here: https://developerscorner.storymaps.arcgis.com/grow-your-story-maps-audience-with-open-graph-tags-b76....

Because you are embedding the story, you should actually place these open graph tags in your html of the parent page embedding your app. Then use the "og:url" open graph tag (The Open Graph protocol) with the content set to the URL of that parent webpage.

The Facebook share is getting the "Error: Item does not exist or is inaccessible" because you tried sharing the link on Facebook before you made the story public. Facebook caches this result to make their service more efficient. You can tell Facebook to refresh their cache at any time by going to this page: https://developers.facebook.com/tools/debug/og/object/, enter the URL in the input, and click "Fetch new scrape information".

The story map crowdsource app is a responsive app so when you embed it at a 640x480 px resolution, you are actually getting the same version a viewer would see on their smartphone. Because at this size, the title and subtitle usually fill most of the available cover screen, we have also extended the title background to fill the whole image. This helps keeps the text readably even to viewers with vision impairments. If you do need to change this, when you download the source code, you will find a place to enter custom CSS at the top of the body in the index.html.

View solution in original post

0 Kudos
5 Replies
RupertEssinger
Frequent Contributor II

Hi Amy

Could you let us know which Story Map app template you are using (there are eight of them ). Also could you share a link to your story map if it is shared publicly?

Rupert

0 Kudos
AmySmart
New Contributor

Hi Rupert,

It’s the crowdsourcing template.

Here’s a link to the map: https://victoriatc.maps.arcgis.com/apps/StoryMapCrowdsource/index.html?appid=5d4eb95c82fd422ea0eb32473581163c

(The site I’ve embedded it on is not live yet)

Many thanks,

Amy

0 Kudos
StephenSylvia
Esri Regular Contributor

Unfortunately, the way social media sites get the title, description, and URL of a page is by reading meta tags that have to be hardcoded in the html of the page and cannot be dynamically inserted when the app loads like the rest of the content of your story (cover image, title text, etc.). Because of this, the only way to make these changes is to download the source code and change the content of these meta tags. We have a blog post about it here: https://developerscorner.storymaps.arcgis.com/grow-your-story-maps-audience-with-open-graph-tags-b76....

Because you are embedding the story, you should actually place these open graph tags in your html of the parent page embedding your app. Then use the "og:url" open graph tag (The Open Graph protocol) with the content set to the URL of that parent webpage.

The Facebook share is getting the "Error: Item does not exist or is inaccessible" because you tried sharing the link on Facebook before you made the story public. Facebook caches this result to make their service more efficient. You can tell Facebook to refresh their cache at any time by going to this page: https://developers.facebook.com/tools/debug/og/object/, enter the URL in the input, and click "Fetch new scrape information".

The story map crowdsource app is a responsive app so when you embed it at a 640x480 px resolution, you are actually getting the same version a viewer would see on their smartphone. Because at this size, the title and subtitle usually fill most of the available cover screen, we have also extended the title background to fill the whole image. This helps keeps the text readably even to viewers with vision impairments. If you do need to change this, when you download the source code, you will find a place to enter custom CSS at the top of the body in the index.html.

View solution in original post

0 Kudos
AmySmart
New Contributor

Thanks so much Stephen, this is very helpful. Is there any way to remove the Twitter and Facebook share icons completely?

---

Amy Smart

Reporter, Victoria Times Colonist

asmart@timescolonist.com

250-380-5314

0 Kudos
StephenSylvia
Esri Regular Contributor

Yes, open the crowdsource in edit mode. Then open "Settings" and go to the "Social Settings." Then uncheck "Show social sharing buttons."

0 Kudos