feat: facebook like button

[cavesdev]

Description

Closes #310

Added a Facebook like button to the tree details page. The like is linked to a specific URL (using the tree id) and users must have a FB account to like the tree.

Type of change

• Bug fix (non-breaking change which fixes an issue)
• New feature (non-breaking change which adds functionality)
• Breaking change (fix or feature that would cause existing functionality to not work as expected)
• This change requires a documentation update

Screenshots

How Has This Been Tested?

• Cypress integration
• Cypress component tests
• Jest unit tests

Checklist:

• I have performed a self-review of my own code
• I have commented my code, particularly in hard-to-understand areas
• I have made corresponding changes to the documentation
• My changes generate no new warnings
• I have added tests that prove my fix is effective or that my feature works
• New and existing unit tests pass locally with my changes
• Any dependent changes have been merged and published in downstream modules

[VWRoli]

Not working on my side.

And you get this error message while rendering sometimes:

Tried it with different browsers like Brave, Chrome, and Firefox.

[dadiorchen]

Maybe we need to load some js file from FB?

[cavesdev]

Maybe we need to load some js file from FB?

The Facebook's SDK is being loaded at the beginning.

One problem I faced: depending on your browser's configuration, it may be blocking requests to Facebook. For example, I use Edge with Strict Tracking Protection and it doesn't show the like button.

I updated the code to test if the SDK is loaded before attempting to use it.

[VWRoli]

Seems like the error message is gone but still can't see it.

[cavesdev]

Is there anyone else that can test this? On my side it's working so I don't know what to fix :(

[dadiorchen]

@VWRoli can you help to test it and do some research on your side?

[VWRoli]

@VWRoli can you help to test it and do some research on your side?

Sure, I will take a look at it.

[VWRoli]

@cavesdev can you tell me what OS and browser do you use? Can you show me a screenshot of the inspected element?

My best guess is that we run it locally with http, instead of https, and that causes the problem. Because we load the scripts, just the iframe does not have a height and width. If that is the problem then it should work when we run it on a public domain. Not sure though, it is just a theory.

[dadiorchen]

Is this useful? https://create-react-app.dev/docs/using-https-in-development/

[VWRoli]

Is this useful? https://create-react-app.dev/docs/using-https-in-development/

Yes, it was. Set up HTTPS for next, but the like button still does not work. It seems I have to dig deeper.

[VWRoli]

Found the problem, staring right in my face. https://developers.facebook.com/docs/plugins/like-button

Switched my location to somewhere else and the like button worked.

So it is just location and policy issues, the component itself is working fine.

[cavesdev]

Oh I see, sorry I'm just seeing your messages! Nice catch, will it be a problem for users on those regions? It will be awkward if some users see the button and some don't.

[dadiorchen]

oh.... funny problem... the whole Europe? it seems unacceptable...

[dadiorchen]

@cavesdev can you solve the conflict above and merge your code to branch, we can raise new issue for the problem mentioned above.

[cavesdev]

Done! Pulled the most recent changes from web-map-site

[dadiorchen]

Thanks!

[github-actions]

🎉 This PR is included in version 1.15.0-beta.1 🎉

The release is available on GitHub release

Your semantic-release bot 📦🚀