Facebook sign-up button with JS and PHP (tutorial)

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:

Cons:

  • 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;

Pros:

  • 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:

Go to:
https://developers.facebook.com/apps

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.


Publishing:

After testing, you need to publish your FB app:

Close Menu