Social sharing functionality

[versatilehuman]

Updated Twitter and Facebook to use lightest, most current functionality. Kept email basic with "mailto" link. I originally implemented AddThis so we could connect to our account but thought it was too heavy (and not worth our time right now to cut down on the bloat).

@shua123 https://github.com/smartchicago/trailsy/blob/gh-pages/js/trailhead.js#L2641

[versatilehuman]

@shua123 We need to add Open Graph for FB sharing. Some of this will be dynamic so I'll need your help. I'll follow up with how it should function.

[versatilehuman]

@shua123 So the sharing works, but it's pulling the link from the previous page on all three platforms.

So if you started from home and clicked on Beck Lake, then shared, you'd get this:

Then click to Des Plaines River Trail, you get this:

Maybe something with how it's building socialLink or how the URLs are set up in general? https://github.com/smartchicago/trailsy/blob/gh-pages/js/trailhead.js#L2641

This is also occurring on the development branch without the social updates.

[shua123]

The sharing should use the correct links on gh-pages now. The problem was that we were creating the detail panel details/links before updating the url. I switched this to update the url first.

[versatilehuman]

@shua123 Not sure how you are going to do this, so here's what I'm thinking with generic conditionals and places to plug data--noted in [ ]s:

General:

[IF HOME] <meta name="description" content="Explore this interactive map of the Forest Preserves of Cook County&mdash;nearly 70,000 acres of woodlands, prairies, savannas and wetlands in &amp; around Chicago" /> [/IF][ELSEIF we have a poi/trail description:] <meta name="description" content="[poi/trail description]" /> [/ELSEIF][ELSE] <meta name="description" content="Explore [current location/trail name (if trail, and 'the' before name)], part of nearly 70,000 acres of woodlands, prairies, savannas and wetlands in &amp; around Chicago" /> [/ELSE]

Open Graph:

<meta property="og:title" content="[current page title]" />
<meta property="og:type" content="website" />
<meta property="og:url" content="[current page URL]" />
<meta property="og:site_name" content="Map: Forest Preserves of Cook County" />
<meta property="fb:app_id" content="1382262871801846" />

[IF HOME] <meta property="og:description" content="Explore this interactive map of the Forest Preserves of Cook County&mdash;nearly 70,000 acres of woodlands, prairies, savannas and wetlands in &amp; around Chicago" /> [/IF][ELSEIF we have a poi/trail description:] <meta property="og:description" content="[poi/trail description]" /> [/ELSEIF][ELSE] <meta property="og:description" content="Explore [current location/trail name (if trail, and 'the' before name)], part of nearly 70,000 acres of woodlands, prairies, savannas and wetlands in &amp; around Chicago" /> [/ELSE]

[IF we have a dedicated image: trailhead.properties.photo_link] <meta property="og:image" content="[http://URL/photo_link]" /> <meta property="og:image:secure_url" content="[https://URL/photo_link]" /> [/IF]

<meta property="og:image" content="http://[URL]/images/poi-photos/map-social-sharing.png" /> <meta property="og:image:secure_url" content="https://[URL]/images/poi-photos/map-social-sharing.png" />

Twitter:

`

`

[IF HOME] <meta name="description" content="Explore this interactive map of the Forest Preserves of Cook County&mdash;nearly 70,000 acres of woodlands, prairies, savannas and wetlands in &amp; around Chicago" /> [/IF][ELSEIF we have a poi/trail description:] <meta name="twitter:description" content="[poi/trail description]" /> [/ELSEIF][ELSE] <meta name="twitter:description" content="Explore [current location/trail name (if trail, and 'the' before name)], part of nearly 70,000 acres of woodlands, prairies, savannas and wetlands in &amp; around Chicago" /> [/ELSE]

[IF we have a dedicated image: trailhead.properties.photo_link] <meta name="twitter:image" content="[http://URL]" /> [/IF][ELSE] <meta name="twitter:image" content="http://[URL]/images/poi-photos/map-social-sharing.png" /> [/ELSE]

[shua123]

Based on what I can tell, at least for Facebook/Open Graph, I don't think its possible since I think the scrapper reads without javascript.

https://developers.facebook.com/tools/debug/

[versatilehuman]

Ok, it sounds like Google is now capable: https://webmasters.googleblog.com/2015/10/deprecating-our-ajax-crawling-scheme.html

So not sure it's worth trying to pre-render pages for bots to get better previews on Twitter & Facebook using something like https://github.com/prerender/prerender. Thoughts?

The SEO aspect isn't as important as each location will have a page on fpdcc.com that we'd want to rank higher.

[shua123]

Hmm, we can look into pre-rendering.

[shua123]

Basic "home" metadata added.