The like component and function

[dadiorchen]

We still don't have a login account on the website, so we are considering using the 3rd-party function for this, for example, the Facebook like, so this issue is about building the component and integrating the 3rd-party like button into our tree photo.

---

Some hints for building components:

• This kind of issue is about creating a new component, it might not need to mount it in the whole app, to know how to create a component separately, please check the tutorial below.
• Design resource: https://www.figma.com/file/XdYFdjlsHvxehlrkPVYq0l/Greenstand-Webmap?node-id=2497%3A11584
• A tutorial of how to use the Cypress component tool to build components: https://github.com/Greenstand/treetracker-wallet-web#how-to-build-a-component
• We are using MaterialUI to build the app: https://material-ui.com/
• Please mount the component with import { mountWithTheme as mount } from '../../models/test-utils'; to get our theme imported.
• Please use MaterialUI theme.spacing(x) as possible as we can, so the component is more responsive
• When you are ready to raise PR for the component, please attach the screenshot of the component for review.
• Please read our readme for more information/guide/tutorial.
• Here is an engineering book in Greenstand.
• To know more about our organization, visit our website.
• If you want to join the slack community (some resources need the community member's permission), please leave your email address.
• More issues in this project: https://github.com/orgs/Greenstand/projects/26

[cavesdev]

Hello! I want to work on this. Just to be clear, do you mean integrating a third party button like this?

Or using the same button?

[dadiorchen]

My original idea is to adopt a 3rd party service like facebook, but with a customized appearance, what do you think?

[cavesdev]

Now that I think of it... Using Facebook (for example) as a third party service provider would mean that the like button would have to be linked in some way to a photo or page inside Facebook. I think it falls outside the scope to keep a Facebook page up to date with the photos. Is there plans to add treetracker accounts? maybe we can wait until then to implement a like or favorite button.

[dadiorchen]

Do we just need an account of FB and a homepage then we can implement this feature, or we need to copy all the photos to FB?

[dadiorchen]

I found this: https://developers.facebook.com/docs/plugins/like-button/

[cavesdev]

Doing further testing, I think that the plugin uses the URL to track the like count. In the web-map-site branch, every tree has a unique URL so it can be possible to implement it, the caveat is that users must have a Facebook account to give likes.

Also, I have not found a way yet to customize the like button further than the basic options provided. The blue and white colors are too different from the actual theme, so I think they won't sit well there. I will keep looking for customization options

[dadiorchen]

good progress, thanks @cavesdev ! yes, I think requiring FB account is acceptable, considering it's the biggest social media.

I had that worry too, I think we can just try the best to do it, if we can't eventually, it's fine to display the Facebook-style button on the position.

[cavesdev]

Apparently, according to Facebook's Policy, the brand's assets cannot be changed further than the customization options provided (almost none). Additionally, the like button plugin builds the component on Facebook's side, so customization is also not possible. So, it seems that we are bound to using the Facebook's traditional like button.

It would look like this:

[dadiorchen]

Great, can you raise a PR for this, I think it is worth a try for us, do I need to give you any FB account stuff?

[cavesdev]

No extra data is needed. The only requirement is that users must have a FB account to like a tree.

[github-actions[bot]]

:tada: This issue has been resolved in version 1.15.0-beta.1 :tada:

The release is available on GitHub release

Your semantic-release bot :package::rocket: