search

codeforgermany / click_that_hood

A game where users must identify a city's neighborhoods as fast as possible
http://click-that-hood.com
MIT License
446 stars 638 forks source link

Change FB/TWTR share buttons to be more generic #333

Closed epaulson closed 2 years ago

epaulson commented 2 years ago

This removes the 'Share on Twitter' and 'Share on Facebook' buttons and turns them into a single generic 'Share' button. The 'Share on Facebook' button has been broken for some time - it uses an older Facebook sharing approach which needs an app registered with FB, which probably needs some configuration changes but to which no one has any access to anymore, so at a minimum we need to change the FB button. I also think having a good share is important - see #324 - and also just see the Wordle craze going around.

We could update the share to FB button to use a more recent Facebook share dialog, and I think there's a way to do that without needing to load Facebook javascript, but I also think we've seen from Wordle that just doing a copy-paste is good enough.

This PR scraps the Twitter and FB buttons at the end of a game and replaces them with a 'Share' button, that just copies a share message to the clipboard. The copy to clipboard code comes from an MIT-licensed javascript library: https://www.npmjs.com/package/clipboard

In keeping with the Wordle craze, I updated the sharing message a bit - I was even, um, "inspired" by Wordle and took the green box and put it into the message. (I actually think that's useful right now, in early 2022, to let people know that it's a challenge game that they should click on and try. In 2024 when no one remembers what Wordle was, we can take it out)

Anyway, it looks like this now:

Screen Shot 2022-02-06 at 5 56 51 PM

and after clicking on 'Share'

Screen Shot 2022-02-06 at 5 56 59 PM

and then pasting that into Facebook:

Screen Shot 2022-02-06 at 5 57 49 PM
epaulson commented 2 years ago

@fnogatz any thoughts on this? I'd like to get the broken FB share button gone soon, but I think we definitely want some kind of 'share' button

fnogatz commented 2 years ago

Hm, in your initial post, the "Copied results to clipboard" text had a dark shadow box as its background. In my tests it was not present :thinking:

Screenshot from 2022-02-23 00-31-23

epaulson commented 2 years ago

Hrm - I see a black shadow on Mac in Safari, Firefox, and Chrome, so I'm not sure. Did you rebuild less?

epaulson commented 2 years ago

(I mean rebuild the css with less)

fnogatz commented 2 years ago

Alright, apparently it was a little bit too late last night for my brain to work :D Just compiled and checked again, works as expected. Thank you very much!