This tutorial shows how to implement a “Continue with Facebook” button using JS and PHP. The button is implemented with JS. PHP is used to process Facebook result.
If you prefer a pure PHP solution, with no JS, see my other tutorial.
JS vs PHP rendering:
This tutorial uses JS to render the button. There are pros/cons compared to a PHP version:
- The button disappears on FF’s private mode: this happens due to FF’s anti-track feature;
- “Facebook Container” plugin issues: users have to manually allow the button first;
- Always up-to-date API;
- Easier to set up than pure PHP;
- No CSS needed (it automatically loads its official colors and font);
- API “Breaking-changes” resistant;
I personally prefer a pure PHP, no JS, version because it works with anti-trackers, ad-blockers, etc. But feel free to decide which one suits better your needs.
0. Create an app on FB’s developer:
Create an app:
Get the ID and SECRET:
1. Install PHP SDK on your project folder:
cd my-project composer require facebook/graph-sdk
2. The code:
Save this code on a file (ex.
test-fb-js.php) and open it in your browser.
The code is self-explanatory. But let me know in the comments if you think it is not.
After testing, you need to publish your FB app: