I'm running an error very similar with this one: Facebook Login API HTTPS Issue.
I have a website use facebook authentication, the Facebook login is no problem. But the Facebook like-button get troubled when been clicked (test fail on Chrome, Safari, Firefox, in OSX), the error message is:
Blocked a frame with origin "https://www.facebook.com" from accessing a
frame with origin "http://static.ak.facebook.com". The frame requesting
access has a protocol of "https", the frame being accessed has a protocol
of "http". Protocols must match.
I've searched all over and find no solutions.
It seems like that when the like-button is clicked, it pop out a frame from https://facebook.com callback and trying to request http://static.ak.facebook.com thus cause protocol mismatch?!
Here's what I put right after <body> tag
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
// init the FB JS SDK
FB.init({
appId : 'appid', // App ID from the app dashboard
channelUrl : '//mydomain/channel.html', // Channel file for x-domain comms
status : true, // Check Facebook Login status
xfbml : true // Look for social plugins on the page
});
// Additional initialization code such as adding Event Listeners goes here
};
// Load the SDK asynchronously
(function(d, s, id){
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) {return;}
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/zh_TW/all.js";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
and the channel file at http://mydomain/channel
<script src="//connect.facebook.net/zh_TW/all.js"></script>
and here's how I use the like-button
<div class="fb-like" data-href=url data-send="true" data-width="450"
data-show-faces="true"></div>
Really needs help, please!
In your first script tag you can tell Facebook explicitly to use HTTPS...
Add the line:
FB._https = (window.location.protocol == "https:");
Add it before the FB.init function call, just below or in place of the comment:
// init the FB JS SDK
This will ensure that Facebook's servers load any required libraries their end over https.
Hope this helps.
Reviewing the js code on Facebook there are multiple urls containing hard coded strings for
http://static .../rsrc.php
it's possible those are the files triggering the error.
This may be something Facebook needs to update.
On a side note, it may be possible to download that js file from Facebook and store it on your server and remove the hard coded http string. I would test this further but I am on my phone at the moment.
Related
I'm trying to include Facebook Messenger Customer Chat Plugin in my website, but the plugin is not showing. It was working fine couple days ago but suddenly it stopped working.
I'm getting two types of errors:
1- When I'm not logged in to facebook, I'm getting this error in console:
Failed to execute 'postMessage' on 'DOMWindow': The target origin
provided ('https://www.facebook.com') does not match the recipient
window's origin ('https://web.facebook.com').
I used FB.CustomerChat.show() in the console, and the dialog appears but the error is repeated, and the bubble isn't shown.
2- When I'm logged in to facebook, I'm not getting any errors and the plugin still doesn't appear.
I used FB.CustomerChat.show() in the console, and the dialog appears but and the bubble isn't shown, but this time an Error link is displayed within the bubble's iframe saying:
this plugin requires the use of the Javascript SDK and XFBML
I tried changing the version of the sdk, changing the settings in the facebook app (developers.facebook.com), whitelisting the domain in my facebook page,
tried adding #xfbml=1&version=v2.12&autoLogAppEvents=1 after the url for the sdk..
no luck at all.
window.fbAsyncInit = function () {
FB.init({
appId: app_id,
autoLogAppEvents: true,
xfbml: true,
version: 'v2.12'
});
};
(function (d, s, id) {
var js;
var fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) {return;}
js = d.createElement(s); js.id = id;
js.src = 'https://connect.facebook.net/'+localization+'/sdk/xfbml.customerchat.js';
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
To workaround add this to response header:
X-Frame-Options: allow-from *
or
X-Frame-Options: allow-from https://www.facebook.com https://web.facebook.com
Changing the version for Facebook JS SDK to v3.3 and making sure that the Facebook SDK and Facebook MCC SDK are both loaded exactly after the body tag solves the issue.
Update:
There is a bug within the Facebook JS SDK that causes this problem, you can track the issue here:
https://developers.facebook.com/support/bugs/470869643489449/
I'm attempting to integrate facebook chat to my website, but get this error:
Refused to display 'https://www.facebook.com/v2.12/plugins/customerchat.php?
app_id=166409452530897&channel=https%3A%2F%2Fstaticxx.facebook.com%2Fconnect
%2Fxd_arbiter%2Fr%2FJW5GlLnAsFw.js%3Fversion%3D42%23cb%3Df1fc7859561b6e%26do
main%3D[domainsnipped]%26origin%3Dhttps%253A%252F%252F[domainsnipped]%252Ff17b909ebfe83c4%26relation%3Dparent.parent&container_width=0&locale=
en_US&page_id=857469729300&sdk=joey' in a frame because an ancestor violates
the following Content Security Policy directive: "frame-ancestors
https://www.facebook.com".
I have added exactly https://www.example.com/ as a whitelisted domain in my page's settings at https://www.facebook.com/example/settings/?tab=messenger_platform
https://findmyfbid.com/ reports my pageID to be 857469729300
My facebook appID (taken from https://developers.facebook.com/apps/ appears to be 166409452530897, and the app is "live".
This is the code I've got on my site:
<div class="fb-customerchat" page_id="857469729300"></div>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : '166409452530897',
autoLogAppEvents : true,
xfbml : true,
version : 'v2.12'
});
};
(function(d, s, id){
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) {return;}
js = d.createElement(s); js.id = id;
js.src = "https://connect.facebook.net/en_US/sdk.js";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
What am I doing wrong? Many thanks!
According to facebook chat troubleshooting tips:
If you see a console error like "Refused to display * in a frame because an ancestor violates the following Content Security Policy directive: *", check that the domain of the page the plugin is being rendered on has been whitelisted. Also make sure you didn't set the Referrer-Policy header to no-referrer.
In your case, you send Referrer-Policy: same-origin response header, which means that the Referer request header when an iframe url is requested, is set only for iframe urls of the same domain, not others, in this case www.facebook.com.
So the Referer: https://www.example.com request header is not set for the facebook chat url and it could be that you are getting this error because of this.
Change the response header to origin.
Eg, with php, do
header('Referrer-Policy: origin');
Note, you may have to reload the page a couple of times and wait some minutes for this to be "understood" by the browser.
References
Referrer-Policy header
Same-origin policy
Code on my web page:
<body class="popup">
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
// init the FB JS SDK
FB.init({
appId : '476947702378530', // App ID from the app dashboard
channelUrl : '//www.majorforms.com/fb_channel.php?_lang_id=1',// Channel file for x-domain comms
status : true, // Check Facebook Login status
xfbml : true // Look for social plugins on the page
});
// Additional initialization code such as adding Event Listeners goes here
};
// Load the SDK asynchronously
(function(d, s, id){
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) {return;}
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en/all.js";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
After loading that page with a browser, I get this error in firebug console:
Application Error: There was a problem getting data for the application you requested. The application may not be valid, or there may be a temporary glitch. Please try again later.
I don't really understand. I do not have a real app, I just used the identifier of a facebook (company) account. I do not want to create a new facebook app, I just want to use credentials of a specific facebook account. How do I do that?
I'm not hundred percent sure but you need to create an app to use the facebook sdk because in the FB.init method it obviously asks for the Facebook App Id.
Creating a Facebook App doesn't necessarily mean that you actually have an app on facebook, the app configuration screen on Facebook Developers page has a specific section for "Website With Facebook Login" , so I think thats the way you should go.
I found I was getting this error when testing my application because I was signed into Facebook as a test account user. When I tried to access the live environment it would generate that error as it was already authenticated to the developer user. The error message is kind of generic and doesn't really spell out the issue in black and white.
My facebook like button loads really slow, so as a solution I read this;
http://developers.facebook.com/docs/reference/javascript/
The only part I am confused about are these two lines;
appId : 'YOUR_APP_ID', // App ID
channelUrl : '//WWW.YOUR_DOMAIN.COM/channel.html', // Channel File
I am unsure what would go in the above.
Could someone enlighten me? Thank you .
Edit: This is how my code looks like (for facebook like button), and I know it isn't right..
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : 'YOUR_APP_ID', // App ID
channelUrl : '//WWW.YOUR_DOMAIN.COM/channel.html', // Channel File
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true // parse XFBML
});
// Additional initialization code here
};
// Load the SDK Asynchronously
(function(d){
var js, id = 'facebook-jssdk'; if (d.getElementById(id)) {return;}
js = d.createElement('script'); js.id = id; js.async = true;
js.src = "//connect.facebook.net/en_US/all.js";
d.getElementsByTagName('head')[0].appendChild(js);
}(document));
</script>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_GB/all.js#xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
I'm not quite sure you need this.
For your like button you should be using https://developers.facebook.com/docs/reference/plugins/like/.
The FB JavaScript SDK is used when you're writing applications that would relay on data they receive from the Facebook API. In your case you're only using a "Like button". That doesn't depend on any data thus you don't need it.
Channel File
The channel file addresses some issues with cross domain communication in certain browsers. The contents of the channel.html file can be just a single line:
<script src="//connect.facebook.net/en_US/all.js"></script>
It is important for the channel file to be cached for as long as possible. When serving this file, you must send valid Expires headers with a long expiration period. This will ensure the channel file is cached by the browser which is important for a smooth user experience. Without proper caching, cross domain communication will become very slow and users will suffer a severely degraded experience. A simple way to do this in PHP is:
<?php
$cache_expire = 60*60*24*365;
header("Pragma: public");
header("Cache-Control: max-age=".$cache_expire);
header('Expires: ' . gmdate('D, d M Y H:i:s', time()+$cache_expire) . ' GMT');
?>
<script src="//connect.facebook.net/en_US/all.js"></script>
The channelUrl parameter is optional, but recommended. Providing a channel file can help address three specific known issues. First, pages that include code to communicate across frames may cause Social Plugins to show up as blank without a channelUrl. Second, if no channelUrl is provided and a page includes auto-playing audio or video, the user may hear two streams of audio because the page has been loaded a second time in the background for cross domain communication. Third, a channel file will prevent inclusion of extra hits in your server-side logs. If you do not specify a channelUrl, you can remove page views containing fb_xd_bust or fb_xd_fragment parameters from your logs to ensure proper counts.
The channelUrl must be a fully qualified URL matching the page on which you include the SDK. In other words, the channel file domain must include www if your site is served using www, and if you modify document.domain on your page you must make the same document.domain change in the channel.html file as well. The protocols must also match. If your page is served over https, your channelUrl must also be https. Remember to use the matching protocol for the script src as well. The sample code above uses protocol-relative URLs which should handle most https cases properly.
App Id
This is your Facebook application ID. Go to https://developers.facebook.com/apps and select the application you setup. If you didn't setup an application, then read: http://developers.facebook.com/docs/guides/canvas/
The page you linked to is for the Javascript SDK, which is probably not what you want, unless you want to do more than just plop a "Like" button on your page. To use the SDK, you have to have a Facebook app and add some code to your website, which is where you'll get the App ID.
The "Like" button documentation is here, and there's not a whole lot you can do to get it to load faster if it's Facebook taking a while to load the page, unless you want to add a full-fledged app and maybe use that to "Like" pages for the user, but I'm not sure if that's even possible. Pull up Firebug or Chrome Dev Tools and see what's taking the longest, but it's probably just on Facebook's end.
I'm really confused.
I'm trying to use some of the very simple Facebook plugins on my site, specifically the basic "Like" button.
I already know how to use the limited version with an iFrame.
However, now I'm trying to figure out the XFBML method and the online documentation seems to make a lot of assumptions about what you already know and really short on working examples. For example, they show you how to call the JavaScript Init and give you the single line of HTML code for element fb:like... but I could not see any examples of how to show/hide faces, set the default font, etc. like in the iFrame code.
I've since figured out that you need to add them as attributes to the element but that was thanks to StackOverlfow and no thanks to the Facebook documentation which simply takes you in circles.
<fb:like href="http://mydomain.com" show_faces="true" action="recommend" colorscheme="light" width="400" height="35" />
Ok, so now when using the XFBML code, it's height should expand/contract automatically depending on being logged in or not I assume.
I do not know if I'm supposed to initially set the height to "80" or if that happens automatically.
And I have no idea what I'm supposed to use for 'your app id' in the Init script. There is no App... just a Facebook Company Page... so why would I need an App Id when I'm just putting a Like button on a website?
<script>
window.fbAsyncInit = function() {
FB.init({
appId: 'your app id',
status: true,
cookie: true,
xfbml: true
});
};
Any enlightenment on these issues would be appreciated.
Thank-you!
Answering my own question, after pulling out all my hair...
http://developers.facebook.com/docs/guides/web/
"The JavaScript SDK requires that you register your website with Facebook to get an App ID (or appId). The appId is a unique identifier for your site that ensures that we have the right level of security in place between the user and your website. The following example shows how to load the JavaScript SDK once you have your appId:"
http://developers.facebook.com/setup/
The title of that page/form is Create an App. I still don't understand why they don't use more generic terminology. I'm not "creating an app" and I don't consider my website to be an app.
I don't have an appId but just got this code from the like code generator and it seems to work in my local environment (which uses localhost:8000 yet still has 136 likes). When I press the buttons I get the facebook login popup as expected.
<div id="fb-root"></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<fb:like href="url here (optional)" send="true" width="450" show_faces="true"></fb:like>
you can do...
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="http://ogp.me/ns/fb#" >
...
window.fbAsyncInit = function() {
FB.init({
// appId : 'none', // App ID
cookie : true, // enable cookies to allow the server to access the session
xfbml : true // parse XFBML
});
FB.Event.subscribe('edge.create', function(href, widget) {
var ss=href;
if (ss.match(/myWebSite/i)) {
alert('You just liked me');
}
});
};
(function (d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "https://connect.facebook.net/en_GB/all.js#xfbml=1";
//js.src = "https://connect.facebook.net/en_GB/all.js";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
...
<fb:like ref="core" class="fb-like" data-href="http://www.mySite.com"
data-send="false" data-layout="button_count"
data-width="50" data-show-faces="false" data-colorscheme="dark"></fb:like>
the above works, but Like yourself, and and note how Facebook divides up real Likes with Facebook registered sites (giving a spash page, #followers, #talking, etc), from Liked urls it does not know. (the site does, at least, get a increasing counter). It kinda defeats the purpose of being Liked at all. I might be wrong, but I think it does not even post messages about the latter.
this is too bad, because I am running out of phone numbers for Facebook :)
Then, for me at least, there is a bigger problem. If you are going to reward someone for Liking you, you can't really be sure they did, because this is js. If you try to js redirect to a reward page, a user can just cut paste that url. You could set a rnd session var, pass it to js, and redirect js to a php page with it, but a user could figure that out too.
You cant seem to (or commented out appId) ...
require 'face_sdk/face/src/facebook.php';
$facebook = new Facebook(array(
'appId' => '',
'secret' => '',
));
$user = $facebook->getUser();
so there seems no direct php way. I was playing with passing the iframed Like button url to php, parsing it with simple_html_dom.php, and finding which of the two main divs has the class 'hidden_elem'. But in the end, it just isn't worth it because Facebook will treat you like a second class citizen.