my site is alonsart.com... when clicking the send button on my site..it opens a blank box...
this is what my code looks like:
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : 'my_id', // App ID
channelUrl : '//alonsart.com/index.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', ref = d.getElementsByTagName('script')[0];
if (d.getElementById(id)) {return;}
js = d.createElement('script'); js.id = id; js.async = true;
js.src = "//connect.facebook.net/en_US/all.js";
ref.parentNode.insertBefore(js, ref);
}(document));
</script>
and of course the div
<div style="margin-top:20px" class="fb-like" data-send="true" data-width="450" data-show-faces="true"></div>
any idea why it wouldnt show anything when clicked??
thanks
Don't know if you already solved the problem or not, but for future reference, I found that the Debug tool offered by Facebook [ https://developers.facebook.com/tools/debug ] was a lifesaver in troubleshooting this exact same issue on a site I was working on.
You give it a URL, it will scrape it, and give you a breakdown of exactly what is wrong with it (From an Open Graph perspective)
Although this question has been asked quite some time back but it might help someone looking for occasional problems with like and send plugin.
Yesterday the like and send plugin stopped working for my site too and there was nothing wrong with the implementation. Even the send button on http://developers.facebook.com had stopped working yesterday and today it is working back again.
So check if the plugin is working on others sites too or not. If not then most likely the problem is at Facebook's end and not your end.
Related
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.
I'm only getting this message in Chrome. Firefox works just fine. I've been debugging trying to find at what point this error is happening and can't seem to nail it down. The exact message is, "Uncaught TypeError: Cannot call method 'shift' of null" from all.js:57.
Also, I'll note a few other things that may help you help me:
I'm loading the SDK as a requirejs module. I've tried loading it the "normal way" as well but the result is the same.
It's not happening locally, only on our staging server. This makes me think it has something to do latency during the SDK load.
It's only happening in Chrome. Firefox works as well as Safari. The only difference in Safari is that I see a similar error stating that it's a type issue. The message there is "'null' is not an object (evaluating 'queue.shift`)" # debug.js:2712 but it doesn't break the app.
Any help and/or insight here would be great.
Rewriting calling the SDK script helped me. It needs to be called as it's explained on facebook.
Firstly I tried to append a script to head element simply with id='fasebook-jssdk', but an error with method 'shift' occurred. Then I rewrote it as it's recommended by facebook, without FB.init(). But the error went on occurring until I added FB.init() call. Now it works ok.
Trying to solve it, I found a debug version of 'all.js' file, where I found that error occurs in the following code:
function flush() {
if (!queue) {
return;
}
var fn;
while (fn = queue.shift()) {
fn();
}
queue = null;
}
where queue is an array of functions. I have no idea about the reason, but now, when the script goes ok, I don't really need to have. Maybe somebody more scrupulous than me will find out.
I had a similar issue. This solved if for me. These were the symptoms:
No issues on localhost
On servers (Amazon S3) occasionally get "Uncaught TypeError: Cannot call method 'shift' of null"
Solution:
I had messed up the order of the include of the Facebook SDK and the handler of the fbAsyncInit. You should include the SDK after you include the script for handling the loading of the SDK. Otherwise the SDK could load before the handler for it's load event has been registered.
<script src="Your script with fbAsyncInit here"> </script>
<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&appId=200817623450198";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
<div id="fb-root"></div>
</body>
Sorry, I can help much, but I have the same issue which might aid in closing in on the problem.
Loading JS likeso:
<script src='//connect.facebook.net/en_US/all.js'></script>
"It's not happening locally, only on our staging server. This makes me
think it has something to do latency during the SDK load."
I tend to agree. The error seems to occur sporadically only. In addition, I get the occasional CURLOPT_IPRESOLVE undefined error. Seems all to be related to connectivity.
These Facebook Instructions explain a different way to call the SDK and this worked for me. I haven't tested it yet, but I think the channel file will let you test this locally, which is super sweet.
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
// init the FB JS SDK
FB.init({
appId : 'YOUR_APP_ID', // App ID from the App Dashboard
channelUrl : '//WWW.YOUR_DOMAIN.COM/channel.html', // Channel File for x-domain communication
status : true, // check the login status upon init?
cookie : true, // set sessions cookies to allow your server to access the session?
xfbml : true // parse XFBML tags on this page?
});
// Additional initialization code such as adding Event Listeners goes here
};
// Load the SDK's source Asynchronously
// Note that the debug version is being actively developed and might
// contain some type checks that are overly strict.
// Please report such bugs using the bugs tool.
(function(d, debug){
var js, id = 'facebook-jssdk', ref = d.getElementsByTagName('script')[0];
if (d.getElementById(id)) {return;}
js = d.createElement('script'); js.id = id; js.async = true;
js.src = "//connect.facebook.net/en_US/all" + (debug ? "/debug" : "") + ".js";
ref.parentNode.insertBefore(js, ref);
}(document, /*debug*/ false));
</script>
I've implemented the JavaScript SDK in my website as stated on the facebook JavaScript SDK site.:
<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', ref = d.getElementsByTagName('script')[0];
if (d.getElementById(id)) {return;}
js = d.createElement('script'); js.id = id; js.async = true;
js.src = "//connect.facebook.net/en_US/all.js";
ref.parentNode.insertBefore(js, ref);
}(document));
</script>
But in the like plugin code section it gives me this code:
<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&appId=YOUR_APP_ID";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
My 1st question: What is the better code? and are their any differences?
My second question is about the HTML5 or XFBML rendering of the buttons or comment boxes. I run a wordpress blog, that's not html5.
My 2nd question: What is the best code to use, the HTML5 or the XFBML? and is one faster that the other, or one less supported than the other?
Thanks!
The first solution loads the Facebook JavaScript library asynchronously, and would provide faster page rendering for your visitors if arranged correctly. Place the <div id=fb-root"> and window.fbAsyncInit definition just after your <body> tag so they are defined up front before the Facebook JavaScript library loads.
In contrast, the function(d) definition should be located at the bottom of your page before the </body> tag thereby delaying Facebook library loading until all your other page elements have loaded above. This ensures your own salient page elements render first.
The function(d,s,id) code snippet looks newer (more parameters), but I don't think its asynchronously loading like the first. Therefore, for the time being, I would use the older (first) version for now until Facebook posts an asynchronous version of the newer function(d,s,id) code snippet.
On your second question, I would continue using the XFBML code implementation until very few of your website visitors are using IE7 or IE8 any longer. Once they have moved on to IE9+, then I would switch to the HTML5 implementation, which has many semantic advantages for search engines, screen readers, and scrapers.
I want facebook login in my website
For that I followed these steps:
1)Created a demo site at developers (i uploaded the image as well)
2)Copied the app id at the place where required
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : '<MY APP ID>',
status : true,
cookie : true,
xfbml : true,
oauth : true,
});
};
(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>
<div class="fb-login-button">Login</div>
3)I got the fb login button as shown in image:
on clicking the button a new window is popped up asking fb username and password and after coming back it shows this error
Unsafe JavaScript attempt to access frame with URL https://www.facebook.com/dialog/permissions.request?_path=permissions.request&app_id=158742990907100&redirect_uri=http%3A%2F%2Fstatic.ak.facebook.com%2Fconnect%2Fxd_arbiter.php%3Fversion%3D5%23cb%3Dfbf1cdd54%26origin%3Dhttp%253A%252F%252Flocalhost%253A8080%252Ffa53db99%26domain%3Dlocalhost%26relation%3Dopener%26frame%3Df27abde948&sdk=joey&display=popup&response_type=token%2Csigned_request&domain=localhost&fbconnect=1&from_login=1&client_id=158742990907100 from frame with URL http://localhost:8080/Befundo/. Domains, protocols and ports must match.
The properties I set for my app is :
I am not sure about APP NAMESPACE,APP DOMAIN,SITE URL
I am getting one more problem, when I click Login button twice it logs this message in the console of Browser::
FB.login() called when user is already connected.
and do nothing.
Please shed some light where I am doing wrong?
Thanks in advance.
Your login button is working as expected, and it's connecting user (which is confirmed by message that came after second click on the login button).
Next message is not an error in your code (it's because of cross-domain policy applied to JS-SDK trying to communicate with Facebook):
Unsafe JavaScript attempt to access frame with URL ... from frame with URL ... Domains, protocols and ports must match.
You can (probably) suppress it by passing self-hosted channelUrl to FB.init. (see FB.init documentation)
You also seems to do nothing after the user is connected. Read documentation for FB.login to figure out what you should do after user is logged in...
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.