Here I have a very, very noob question. I'm trying to create a web facebook app, using Javascript SDK. I have never done any website, any app, etc. So very basic, excuse me in advance..
Basically, I'm following the steps decribed in the quickstart: https://developers.facebook.com/docs/javascript/quickstart
I created a html file, and copy-pasted exactly what is described on this page:
<script>
window.fbAsyncInit = function() {
FB.init({
appId : 'your-app-id',
xfbml : true,
version : 'v2.8'
});
FB.AppEvents.logPageView();
};
(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/sdk.js";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
I changed "your-app-id" with the id I was provided.
Then I just open my html file with my web browser, which is showing a blank page, I guess it's normal at that point.
Then, I go to the next step, that is supposed to "trigger a share dialog" (see: https://developers.facebook.com/docs/javascript/examples). Again, I copy-paste the provided snipped starting with FB.UI(... and paste it after the FB.init() call, which is just before the "FB.AppEvents.logPageView();" line, if I'm not mistaken (?).
And then I reload my html file with my browser.
According to the "examples" page, "Now when you reload your page, you'll see a Share dialog appear over the top of the page."
Well, it's still a blank page.
So, I guess my approach is very naive.. is it supposed to work just like that? Or if not, what am I doing wrong? Am I supposed to download something before?
Thanks in advance for any help! :)
You have to test this on a real server, not just by opening the html file in a browser. Either upload it to an external server or start one on localhost. You can also try adding the protocol:
js.src = "https://connect.facebook.net/en_US/sdk.js";
...but i would recommend using a server on localhost and NOT adding the protocol.
Related
I have a working Facebook-Login procedure using the PHP SDK. Now Facebook is requiring me to update my login flow since I apparently "violate the Facebook Platform Policies". According to them my "Login button doesn't properly reference Facebook." They suggest that "To fix this issue, you should always use our official SDK for Login." I suspect (but don't know for sure) this is because the login is not opened in a popup but rather in a new window using the PHP SDK getLoginUrl() method. Thus, I'm trying to update my Facebook Login flow.
In trying to combine the Javascript SDK (to render the official button and popup) with the PHP SDK (to handle the responses) I'm using the following approach (Source: https://developers.facebook.com/docs/php/howto/example_access_token_from_javascript)
<html>
<body>
<p>Log In with the JavaScript SDK</p>
<script>
logInWithFacebook = function() {
FB.login(function(response) {
if (response.authResponse) {
alert('You are logged in & cookie set!');
// Now you can redirect the user or do an AJAX request to
// a PHP script that grabs the signed request from the cookie.
} else {
alert('User cancelled login or did not fully authorize.');
}
});
return false;
};
window.fbAsyncInit = function() {
FB.init({
appId: 'your-app-id',
cookie: true, // This is important, it's not enabled by default
version: 'v3.2'
});
};
(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>
</body>
</html>
When clicking the Login-Button a popup will show, as expected, to log me in. But...
...before I even enter my FB credentials the code alerts 'User cancelled login or did not fully authorize'.
...after entering my credentials the popup remains open with a blank white page.
...when I click the button while already being logged in to Facebook I will only see a blank white page in the popup.
...there's no redirect (which I suppose has to be handled in the if (response.authResponse) part)
I have used Facebooks Javacript SDK to add a sharebutton and a like button on my website, but it only works on a desktop computer browsers, not on mobile browsers..
For example I added the parts provided by FB:
<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 = 'https://connect.facebook.net/sv_SE/sdk.js#xfbml=1&version=v3.1';
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<div class="fb-like" data-href="https://kanzan.se/interviews?id=" data-layout="button" data-action="like" data-size="small" data-show-faces="true" data-share="false"></div>
and the button shows up on my computer (even using chrome responsive design mode with mobile sizes.), but not when I use my phone (any phone) to access it. There the button is gone!
Have Facebook made it impossible to show like buttons on mobiles?
The problem is that I was in development mode all the time! This should be emphasized more clearly on different sites describing how "simple" it is to add a Facebook like button. I didn't even recognize it while making my Facebook account a development account.. only recently, when thinking about it I came to the conclusion that the problem has to do with the app id and all that comes with that.
The website I'm working on has a Facebook login option, but recently a user reported it wasn't working for them. I disabled my extensions etc, I got this error in my console:
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.
Is there an option I can feed to the API that will get it to work on the same protocols? FYI, the primary website runs on HTTP (no S).
It is especially odd because it seems like it stopped working all of a sudden (but it is possible this was always a problem as I am new and am learning this system).
I have this code at the foot of my page:
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : ..., // App ID
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true, // parse XFBML
channel: '//...mychannel.../channel'
});
FB.Event.subscribe('auth.authResponseChange', function(fbResponse) {
// function that logs in user
});
};
// 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>
If you are not loading the javascript sdk async, you could see this error a lot.
refer to: https://developers.facebook.com/docs/javascript/quickstart
in addition, if you are using any Facebook plugins via the iframe code, be sure the src url protocol matches.
<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 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_US/all.js";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
I had the same issue on my development environment.
Steps to solve (not sure which one did it):
Log out of the application.
Delete all cookies from the browser.
Log in to FB as the intended user (not to the developer page but to the user app permissions page).
Delete the app permission from the FB permissions page.
Log out of FB.
Reload the app and try to log in.
I would not have answered in such a voodoo answer unless I had spent some hours on it, and would value any sort of witchcraft to get me out of it.
i've been with this problem...
my solution:
move your facebook call to static page...
(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/pt_BR/all.js#xfbml=1&appId=IDDDD";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
set a ajax callback:
try{setTimeout(FB.XFBML.parse);}catch(e){}
happy :)
jquery example:
$(document).ajaxComplete(function(){
try{
setTimeout(FB.XFBML.parse);
}catch(ex){}
});
For what it's worth, I managed to fix this issue by converting to HTTPS (which is what I should have been doing anyway).
I'm sorry, I have searched for a day and a half but I can't find the specific answer I'm looking for.
My Facebook Like button doesn't appear on IE, Chrome or Firefox. I am using Javascript.
I have the required HTML addition.
I need to put in the Meta Tag
meta property="og:tag name" content="tag value"
COULD I GET AN EXAMPLE FOR THE "TAG NAME" AND "TAG VALUE"?
I don't know what to fill in!
I am supposed to have the Javascript SDK right after the body; however, I don't know what to put for an APP_ID as in:
<script>
window.fbAsyncInit = function() {
FB.init({
appId : 'YOUR_APP_ID', // App ID
//CAN I GET AN EXAMPLE OF YOUR_APP_ID, please?
channelUrl : '//WWW.YOUR_DOMAIN.COM/channel.html', // Channel File
//is channel.html the page it's on?
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>
I am getting so frustrated! Please help me!
The YOUR_APP_ID is the ID of your Facebook Application. If you haven't created a App, you can do so here.
However, you don't need to use an app to use the Like Button plugin. You should be able to use the Plugin just by copy-and-pasting the plugin code from the developer website. If that doesn't work, use the debug tool to see what's going wrong.
Well, I recommend you to read more carefully the documentation of the Facebook's JS SDK, but also the "Getting Started" and the "Core Concepts". There you will find a lot of very useful information.
I'll try to explain what the App_id is. When you want to do some more funcional applications, that interact with user information from facebook, you need to create a Facebook's app. To do that log into your account and go to https://developers.facebook.com/apps. There you need to tell your app's name, URL, and some other things. When you save you'll see an app_id, that is an unique number that identifies your app on Facebook. Is this number that you have to put in your script (surrounded by quotes, don't forget).
The channel file is a single line html file that you have to put in your server, at the same domain of your app. The content of this file is:
<script src="//connect.facebook.net/en_US/all.js"></script>
Replace the "en_US" by your app locale.
You questioned about the meta tags of the OpenGraph. Well, when you click "like" for a URL, the Facebook-bot navigates to your page and reads the meta information. When it finds OpenGraph meta tags, the information posted at the user wall is more personalized. You'll have to spent a little time to understand more what kind of OpenGraph meta tags you will need, once every site has different information to share.
I'm setting up a rails app and trying to implement login via Facebook JS SDK. Missing Omniauth already... :(
Anyway, what happens is that the dialog pops up, the user provides the login info, but then it redirects to https://www.facebook.com/connect/window_comm.php?_id=some-string&_relation=opener&auth_token=some-big-string, a blank screen. The pop-up doesn't close.
If I close it manually, though, and then refresh my page, I can see the login happened.
A curious thing is that on the first login, when permissions are asked for, everything works as expected, with the pop-up closing after permissions are granted or denied.
Tested on Chrome, FF, Safari and Opera. Consistent behaviour.
If I debug the blank redirect page on Chrome, there are two errors:
1) Unsafe JavaScript attempt to access frame with URL http://something from frame with URL https://something. Domains, protocols and ports must match. (note http x https...)
2) window_comm.php:7Uncaught TypeError: Cannot call method '_recv' of undefined
Here's the relevant code:
<script>
window.fbAsyncInit = function() {
FB.init({
appId : 'my-app-id',
status : true,
channelURL : 'http://localhost:3000/channel.html',
cookie : true,
oauth : true,
xfbml : true
});
FB.Event.subscribe('auth.login', function(response) {
window.location.reload();
});
};
(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/pt_BR/all.js"
fjs.parentNode.insertBefore(js, fjs);
}
(document, 'script', 'facebook-jssdk'));
</script>
<div class="fb-login-button" data-show-faces="true" data-width="400" data-max-rows="1" perms="offline_access"></div>
Thanks a lot for any light on this... Driving me nuts! =(
Edit: Can it be a bug on Facebook, since it is redirecting from http to https?
This answers Q.1) only. Facebook new requirements:-
switching to Oauth2.0 to fetch token_access
using SSL (ie: https://) to authenticate (hence the cross domain issues)
Also, I'd generally start with the code below to figure out the possible user state during the login process. That means clicking on anything and everything during testing phase.
FB.Event.subscribe('auth.authResponseChange', function(response) {
alert('The status of the session is: ' + response.status);
});