search

ResistanceCalendar / resistance-calendar-frontend

A central listing of upcoming progressive events
https://resistance-calendar-staging.herokuapp.com/
MIT License
7 stars 8 forks source link

Make event title and image appear when event URL's are pasted into FB and Twitter posts #177

Open InciteDemocracy opened 7 years ago

InciteDemocracy commented 7 years ago

Currently FB share window looks like this:

screenshot 2017-06-19 08 50 17

Right now, the most viable solution I've found is to use a service like this one, which will automatically generate a server-side version of each event page which will only be visible to crawlers such as Google, FB, Twitter, etc: https://prerender.io/ - Doron

pdw207 commented 7 years ago

@sdotson Sounds like you might have the most experience with this. Does this relate to an app id or a regression since your PR on social buttons was merged https://github.com/ResistanceCalendar/resistance-calendar-frontend/pull/101

sdotson commented 7 years ago

Bummer. It looks like Facebook deprecated picture, caption, and description as things we can pass to the share dialogue api: https://developers.facebook.com/docs/apps/changelog#v2_9_90_day_deprecations

Looks like they really want folks to shift to open-graph tags, which has to be implemented server side.

Their API now only lets us specify a quote, url, and hashtag: https://developers.facebook.com/docs/sharing/reference/share-dialog

pdw207 commented 7 years ago

An argument for an isomorphic app.

dorono commented 6 years ago

Assuming that FB's policy of only allowing the API to give picture, caption, etc via the back end, we could always go with something like https://www.sharethis.com. It generates a pop-up window (as opposed to a modal overlay), but it seems to get the job done on desktop as well as mobile, so perhaps it's more important to make the content sharable than to make things look extra-slick.

dorono commented 6 years ago

Adding Twitter to this issue, since we're also not getting images from Twitter shares. Again, ShareThis would solve this issue with minimal work.

dorono commented 6 years ago

Though React Helmet would work, but that only works for server-side rendered apps. This bit of code might work: https://www.reddit.com/r/reactjs/comments/5j7100/react_dynamic_facebook_sharing_dialogue_question/

albjeremias commented 6 years ago

u just need to implement the correct meta-tags, on your html!

https://moz.com/blog/meta-data-templates-123

dorono commented 6 years ago

@albjeremias I don't believe that it would address the issue with the Facebook crawler not being able to find previews of a given page from the website. I think those meta tags help for sharing, which I think is working ok now, but it's for when someone goes into Facebook.com or Twitter.com and attempts to paste a URL from Resistance Calendar. The FB and Twitter crawlers do not execute JavaScript, so there is no way for them to see the JS-generated page content, so there has to be static HTML version of each page (which the end user never sees, of course).

Does that make sense?

albjeremias commented 6 years ago

no. and if you don't believe what can I say? good luck