The Codepen you shared work for me on Google Chrome BUT only on Chrome.
On Safari and Firefox I get Content Security Policy issues.
Content-Security-Policy
The issue is due to Content Security Policy (a.k.a CSP):
Instead of blindly trusting everything that a server delivers, CSP defines the Content-Security-Policy HTTP header, which allows you to create an allowlist of sources of trusted content, and instructs the browser to only execute or render resources from those sources. Even if an attacker can find a hole through which to inject script, the script won’t match the allowlist, and therefore won’t be executed.
So you need to allow the facebook paths (used to serves scripts) on your website.
The Facebook required list is long and grows over the years, from this page you should add something like:
script-src
https://connect.facebook.net
https://graph.facebook.com
https://js.facebook.com;
style-src
'unsafe-inline';
frame-src
*.facebook.com
connect.facebook.net;
child-src
*.facebook.com
connect.facebook.net;
img-src
data:
*.facebook.com
*.facebook.net
*.fbcdn.net;
font-src
data:;
connect-src
*.facebook.com
connect.facebook.net;
form-action
*.facebook.com
connect.facebook.net;
These values above need to be added to you site default values, which should look like:
Content-Security-Policy: default-src 'self'; img-src *; child-src: *
More documentation on the CSP from Mozilla Docs.
Useful links:
- https://developers.facebook.com/community/threads/214596203217042/#:~:text=Here%27s%20the%20solution%20for%20adding%20to%20your%20.htaccess%20(this%20can%20also%20be%20done%20via%20meta%20tags)
- https://stackoverflow.com/a/26572451/10797718
- Whats the most restricted Content-Security-Policy to enable facebook connect
Setting CSP via HTML tag <meta>
You can set the CSP via the HTML <meta>, example:
<meta http-equiv="Content-Security-Policy" content="default-src 'self'; img-src https://*; child-src 'none';">
Be aware that if you set multiple <meta http-equiv=... in your website <head> only the last one will be used others will be ignored.
Ad Blockers, another potential issue
if you have an ad blocker like EFF Privacy Badger or uBlock (uBlock Origin) you will need to disable theses extensions or unblock the site, then reload the codepen.
Users with ad blockers won’t see you buttons since the JS call they made will be block, on Google Chrome you will see net::ERR_BLOCKED_BY_CLIENT.
CLICK HERE to find out more related problems solutions.