Chicago / design-cds-bootstrap

The Chicago Design System as a Bootstrap 4 theme
https://chicago.github.io/design-cds-bootstrap/
MIT License
8 stars 2 forks source link

social assets: We should make templates of commonly sized content for major platforms (FB, TW, Insta, Nextdoor) as well as make sure shares of sites on those platforms look great. #49

Closed jdkunesh closed 4 years ago

chrisjcalderon commented 4 years ago

For content sharing, we need to add some header meta elements, in specific:

<meta property="og:site_name" content="The Name the website, i.e. City of Chicago Official Website">
<meta property="og:type" content="website" />
<meta property="og:title" content="The Page Title- usually same as meta title" />
<meta property="og:url" content="full path/url of the page" />
<meta property="og:description" content="usually same as meta desc" />

If provided:

Twitter specific:

<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="usually page title, but could be different" />
<meta property="twitter:description" content="card content, usually same as meta desc" />
<meta property="twitter:image" content="full path of the thumbnail image" />

I will check which others might be needed. Most can use the information from the og:, twitter is a bit more picky hence the twitter metas

For more information: https://ogp.me/

jdkunesh commented 4 years ago

I added images for FB & Twitter.

https://github.com/Chicago/design-cds-bootstrap/commit/d4f3789a7c1887dcdae4a407831f11de6a6ae416

See it in action:

https://twitter.com/ChiDesignDir/status/1209526605741084672

alaeder16 commented 4 years ago

OK

alaeder16 commented 4 years ago

I added common sizes Social Media Cheat Sheet 2020 to Figma: https://www.figma.com/file/t1oXrlay6I8WiDnz58vnu8/Chicago-Design-System-Digital-sticker-sheet-v0.9?node-id=8406%3A2575 Do we need to create ALL the assets for That?

alaeder16 commented 4 years ago

avatar treatment, shared content, shared on the platform examples