I have included Facebook customer chat plugin on my website. It works fine for the first day. From the second day, it's not working. I have seen an error message in Google Chrome console:
Refused to display
'https://www.facebook.com/v2.11/plugins/customerchat.php?app_id=214160985792954&channel=https%3A%2F%2Fstaticxx.facebook.com%2Fconnect%2Fxd_arbiter%2Fr%2FlY4eZXm_YWu.js%3Fversion%3D42%23cb%3Df157c0f5ff1898c%26domain%3Dwww.fast-pay.cash%26origin%3Dhttps%253A%252F%252Fwww.fast-pay.cash%252Ff11cff6d515fe88%26relation%3Dparent.parent&container_width=0&locale=en_US&minimized=false&ref=front-page&sdk=joey'
in a frame because an ancestor violates the following Content Security
Policy directive: "frame-ancestors https://www.facebook.com/"."
I googled the solution. Every answer I have seen that this is domain white listing problem.
But I have whitelisted my domain in facebook page.
Here is the process how I white listed my domain
- First I go to my page settings
- Under messenger platform settings I put my domain name for whitelisting
I have put my domain name in several patterns. Here I give you my patterns
- https://www.my-domain.com/
- https://www.my-domain.com/
- https://my-domain.com/
- http://www.my-domain.com/
- http://my-domain.com/
Here is the console error image
You didn't mention anything about using additional plugins or CMS. Are you using plain PHP or CMS like WordPress? I wonder there might be an issue with your incorrect configuration. Please Re-check your Facebook Page Id. For any additional plugin, make sure to turn it on.
There are two things required to avoid this message:
Ensure you have the correct Facebook page ID set in your HTML. This should be the numeric ID, not what you see in the URL. I found my page's numeric ID via https://findmyfbid.com
Example:
<div class="fb-customerchat" page_id="6708927376315932">
</div>
Whitelist your domain at Your Page > Settings > Messenger Platform. Ensure this matches your domain, uses HTTPS protocol, and include the port too if using a non-standard port.
(And then make sure you hit the Save button!)
There are several things:
- Ensure Facebook page is Published
- Under Facebook page settings (Messenger Platform), add your domain. MUST be https:// Make sure domain name matches exactly including www (or lack thereof).
- Use correct app_id
- Use this page_id (from steps 3 and 4)
If chat plugin works for you and no one else, it's probably because you're logged into FB and you're the page admin. Check steps 1 & 2.
Make sure your FB page is published.
Some of the common things
source, more info
I had the same problem. If you click that in the console you'll see it says:
Parameter page_id: Invalid id: <107153046051560>
The problem was simply the <>. I removed that so its:
And it worked.
Hope it works for you too. Regards
I think that's not coming from facebook but your website. Your browser refuses to display an iframe from a "bad" source, in this case facebook.com.
You may read
- https://developer.mozilla.org/en-US/docs/Web/Security/CSP
- https://developer.mozilla.org/en-US/docs/Web/Security/Same-origin_policy
Or greenlight any requests from facebook like in this example (which is not the best way to do it, as it undercuts some major protection against XSS):
Link at Stackoverflow: Content-Security-Policy issue
the issue is not about whitelisting mistake or something else. its about google chrome browser issue. if you open with firefox then there is no problem with the messenger chat. i think it is something wrong with chrome.
As evidenced by all these answers, this could be happening for several reasons.
However, one condition that will lead to this error that I have experienced but have not seen listed here is if you load the page while logged in as a Test User.
In the "Set Up Customer Chat page" make sure FINISH button is already clicked.
If FINISH button is grey, click SAVE button first