Make it easier to share social media photos & captions via Facebook/Twitter cards

[smarziano]

Relates to https://github.com/smartchicago/chicago-early-learning/issues/733#issuecomment-301106923

Currently, on the /outreach page, we have a list of social media captions and photos to download. I would like to see a solution where it would be easier for organizations' staff to be able to click "share" and have it produce a tweet or Facebook post with the caption and image.

[theandrewbriggs]

So the way this works is, we define metadata that dictates the image, title, and description text for a given page. Here's an example of what this looks like for an NYT article:

The original tweet only contains the raw URL for that story, and Twitter pulls the metadata so it knows what to display. Even if you share an NYT URL on your own, Twitter understands which data to pull to display the

This is the easiest way to handle sharing the site on social media, as staff only needs to copy and paste the site URL, and all the info is auto-populated by Twitter or Facebook. We can do this globally for the whole site, or even on a page-by-page basis, so the Families page and the City Resources page have their own content and images that get displayed.

Here's what the HTML looks like:

<meta name="twitter:title" content="Chicago Early Learning Portal">
<meta name="twitter:description" content="Apply now for the Fall 2017 School Year!">
<meta name="twitter:image" content="logo.png">
<meta name="twitter:card" content="summary_large_image">

To clarify, we define this on our end, this is not HTML a user embeds on their own.

We need to make sure our partners understand how this solution works, because I feel that it overrides much of the need for assets and such on the outreach page.

[theandrewbriggs]

Here is twitter documentation on how this works, how it's customizable, and how it looks: https://dev.twitter.com/cards/overview