i'm currently building an app where you can like the app itself from a like button inside the frame. So, i load the js sdk :
<script>
window.fbAsyncInit = function() {
FB.init({
appId : '<?php echo $appid; ?>', // App ID
status : true,
cookie : true,
xfbml : true,
oauth : true,
});
FB.Canvas.setSize()
checkIfLoaded();
// 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>
then i just write a like button in the html :
<div id="page" class="page-01">
<div id="content">
<h1><img src="img/skin/logo.png" alt=""/></h1>
<div class="block-01">
<div id="fb-root"></div>
<div class="fb-like" data-send="false" data-layout="button_count" data-width="105" data-show-faces="false"></div>
</div>
</div>
<div id="footer">
</div>
</div>
I was expecting a like on my application by this button, but it like the url hosting my application.
I'm new to js sdk, is there a way to do this kind of things ?
There is no such thing as "Liking Application", actually the only thing you can bound your Like Button is URL (which may represent OpenGraph object).
You cannot use Like Button to like any internal Facebook Objects like Page, Application, User, etc.
If you speaking about liking the Page that associated with specific Application you should use Like Box social plugin (which is intended to be used with Pages).
You'll need to specify the URL to like with data-href="url to like"
Related
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 creating a sample html file for testing fb login. I used the code from the facebook developer page as follows but cannot get FB.getLoginStatus to be called. For my facebook app settings i have sandbox mode NO and put a random site url:
<!DOCTYPE html>
<html>
<head>
<title>Example</title>
</head>
<body>
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
// init the FB JS SDK
FB.init({
appId : 'MYAPPID', // App ID from the App Dashboard
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
FB.getLoginStatus(function(stsResp) {
alert('get login status callback!');
});
};
// Load the SDK's source 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>
</body>
</html>
The Facebook JavaScript SDK does not support being used in a non-http/https context.
I'd recommend using localtunnel so you can map your localhost to a public HTTPS URL like this:
lt --subdomain yourapp --port 3001
And then you just setup https://yourapp.localtunnel.me as your website.
i have created a page tab app for which i have set all the parameters under Auth Dialog in the app settings.
Now when i send a friend request through my app, and my friend clicks on the app request, he is able to see the authentication box describing the app and the permissions requested etc.
But if anyone visits my page on which i have added the app, and clicks on the app from there, it directly takes the user to the page tab without displaying the auth box.
Is this how it is supposed to work from a page? is it possible to display the auth box for a user coming to the app from a page?
Secondly, i have added a multi friend selector which opens by default in a popup as it is supposed to.
Is it possible to display it in the page itself instead of a popup?
I tried adding the display: 'page' option but it din work.
I have used the same code from : https://developers.facebook.com/docs/reference/dialogs/requests/
...
<body>
<div id="fb-root"></div>
<p>
<input type="button"
onclick="sendRequestToRecipients(); return false;"
value="Send Request to Users Directly" />
<input type="text" value="User ID" name="user_ids" />
</p>
<p>
<input type="button"
onclick="sendRequestViaMultiFriendSelector(); return false;"
value="Send Request to Many Users with MFS" />
</p>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : XXXXXXXXXXX,
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>
<script>
function sendRequestToRecipients() {
var user_ids = document.getElementsByName("user_ids")[0].value;
FB.ui({method: 'apprequests',
message: 'My Great Request',
to: user_ids,
}, requestCallback);
}
function sendRequestViaMultiFriendSelector() {
FB.ui({method: 'apprequests',
message: 'My Great Request'
}, requestCallback);
}
function requestCallback(response) {
// Handle callback here
}
</script>
...
Any help in this regard would be very much appreciated.
Is this how it is supposed to work from a page?
Yes. Authenticated referrals don’t work when the app is accessed from a page directly.
is it possible to display the auth box for a user coming to the app from a page?
Of course – analyze the signed_request parameter, and react accordingly (meaning, display the auth dialog yourself, server- or client-side).
I have the following simple test page and trying to add a FB login button. This will be part of a stand along web site and not a canvas application. If the current user is already logged in on FB, then the list of friends using the application is displayed, but there is no login button. If the current user is not logged in on FB then I get nothing.
Any ideas?
Here is my page... I'm currently running it under localhost.
<body>
<div id="fb-root">
</div>
<!-- Loading of FB SDK -->
<script type="text/javascript">
window.fbAsyncInit = function () {
FB.init({
appId: '319067848117743', // App ID
channelUrl: 'http://localhost/TestApp/channel.aspx', // Channel File
status: true, // check login status
cookie: true, // enable cookies to allow the server to access the session
xfbml: true // parse XFBML
});
};
// 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 = "http://connect.facebook.net/en_US/all.js";
d.getElementsByTagName('head')[0].appendChild(js);
} (document));
</script>
<!-- Display FB Login Button -->
<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 = "http://connect.facebook.net/en_US/all.js#xfbml=1&appId=319067848117743";
fjs.parentNode.insertBefore(js, fjs);
} (document, 'script', 'facebook-jssdk'));</script>
<div class="fb-login-button" data-show-faces="true" data-max-rows="2" data-scope="user_about_me,publish_stream,read_stream">
</div>
</body>
first you don't really need to put in the async js loader twice, just redundant code is all. Secondly, I don't know how that code could list friends, I don't see the code for it.
1) You say you're expecting a log-in button even though the person is already logged in? The login button plugin you're using doesn't work that way. It will only show login if the user is not logged into your application. See the note saying "Note: If the user is already logged in, no login button is shown." on https://developers.facebook.com/docs/reference/plugins/login/
2) You also say you cannot see any login button when the user is logged out of Facebook. This is odd, but without seeing all the code I don't know what to help with that part of your question.
Is your app on sandbox mode? Try disabling sandbox mode from app facebook config.
I am using the following code to rendered the facebook login button
<div id="facebook-login">
<script>
FB.init({
appId:"appid", cookie:true,
status:true, xfbml:true
});
FB.Event.subscribe("auth.login", function(response) {
window.location = "http://xxx"; // redirect if user has logged in
});
</script>
<fb:login-button perms="publish_stream"><?php print 'Login with Facebook'; ?></fb:login-button>
</div>
But it no longer works today, and I think it is related to the oauth2.
So I tried to update the code as suggested in Facebook's developer docs.
The new code:
<div id="facebook-login">
<script>
window.fbAsyncInit = function() {
FB.init({
appId:"appid", cookie:true,
status:true, xfbml:true, oauth:true, xfbml: true, channelUrl: '//mydomain/channel.php'
});
FB.Event.subscribe("auth.login", function(response) {
window.location = "http://xxx"; // redirect if user has logged in
});
};
// 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>
<fb:login-button scope="publish_stream"><?php print 'Login with Facebook'; ?></fb:login-button>
</div>
Now whenever I click the facebook login button, the chrome console keeps throwing the following error
Unsafe JavaScript attempt to access frame with URL https://www.facebook.com/login.php?...
I think it is a js cross domain issue, but I have setup the channel url. Any idea on how to solve this problem?
Thanks.
Regards,
Kit
Be sure to replace the code to the new oAuth 2.0
param => scope
response.session => response.authResponse
response.session.access_token => response.authResponse.accessToken
FB.getSession().uid => FB.getAuthResponse().userID
link:
https://developers.facebook.com/blog/post/525/
Finally i found the answer. the get_facebook_cookie() no longer works for OAuth 2.0. we need the facebook php-sdk as mentioned in Facebook Developers – Facebook for Websites
You can also tried the example in Facebook Javascript SDK – A Simple Login Page with OAuth 2.0