I'm trying to integrate the facebook registration-login plugin in my site.
Following is an example that is trying just to implement the login button.
According to documentation:
"If the user has not registered for your site, they will be redirected to the URL you specify in the registration-url parameter."
However this doesn't happen. When the user clicks on the login button and he isn't registered in my site yet, the same page, with the login button, reloads.
<?php
<!DOCTYPE html>
<html lang="en-US">
<head>
</head>
<body>
<div id="fb-root"></div>
<script type="text/javascript">
(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'));
window.fbAsyncInit = function() {
FB.init({
appId : 'MY APP ID',
channelUrl : 'MY CHANNEL URL',
status : true,
cookie : true,
oauth : true,
xfbml : true
});
FB.Event.subscribe('auth.login', function(response) {
window.location.reload();
});
FB.Event.subscribe('auth.logout', function(response) {
window.location.reload();
});
};
</script>
<fb:login-button
registration-url="...my site's address/test.php"
on-login="console.log(arguments)"
/>
</body>
Go to this site: https://www.facebook.com/appcenter/my and remove your app and try again! You will see, it works! ;)
Related
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>My Feed Dialog Page</title>
</head>
<body>
//I can trigger the FB.ui with this image here but thatś not what I want. I want to trigger the FB.ui with the test function with the native facebook-share button with the class fb-share-button below.
<img id="share_button" onclick="test();" src="">
<script>
window.fbAsyncInit = function() {
FB.init({
appId : '',
xfbml : true,
version : 'v2.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 = "//connect.facebook.net/en_US/sdk.js";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
function test(){
FB.ui({
method: 'share_open_graph',
action_type: 'og.likes',
action_properties: JSON.stringify({
object:'https://developers.facebook.com/docs/',
})
}, function(response){});
}
</script>
<div class="fb-share-button" data-href="http://testgenerall.webhomeschool.de/test_fb_ui.html" data-redirect="http://testgenerall.webhomeschool.de/test_fb_ui.html" data-layout="button_count"></div>
</body>
</html>
That´s not possible, you can only use the image of the share button, but you can´t use the share button plugin to trigger your own custom function.
I'm trying to code a Facebook app that can create groups, but it's not working. My minimal complete example, which you can poke at here (I couldn't get the Facebook API to work on jsFiddle), is as follows:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Create Group</title>
</head>
<body>
<script>
window.fbAsyncInit = function() {
FB.init({
appId: '784633881599418',
xfbml: true,
version: 'v2.2'
});
document.getElementById('create').addEventListener('click',
function() {
FB.login(function() {
FB.ui({
method: 'game_group_create',
name: 'Test Group',
description: 'This is a test. Only a test.',
privacy: 'CLOSED'
}, function(response) {
if (response && response.id) {
alert('Success: ' + response.id);
} else {
alert('Error.');
}
});
});
}, false);
};
(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/debug.js";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
<button id="create">Create Group</button>
</body>
</html>
When the user clicks the button, they're prompted to log in (if they haven't already) and authorize the app (if they haven't already), exactly as you'd expect. But after that, a Facebook box appears in the middle of the window with a perpetual loading indicator. Meanwhile, the following errors are logged to the console:
GET https://www.facebook.com/login.php?skip_api_login=1&api_key=784633881599418…4d12677ce003e1ddf.googledrive.com%252Ff13eb6ab9%26relation%3Dparent.parent 500 (Internal Server Error)
Refused to display 'https://www.facebook.com/login.php?skip_api_login=1&api_key=784633881599418…4d12677ce003e1ddf.googledrive.com%252Ff13eb6ab9%26relation%3Dparent.parent' in a frame because it set 'X-Frame-Options' to 'DENY'.
What's going on, and how can I fix it?
So I commented out FB.login(function() { and the corresponding }); and that fixed it.
I've embedded the Facebook send button. It works, so I can send messages and a link through it.
However, the message.send event isn't firing.
I tried again but now with a new page, that has nothing in it, except the code which I copy-pasted from here and here and the FB.Event.subscribe documentation.
I don't get any errors in the console.
Any help will be greatly appreciated.
My code:
<!doctype html>
<html xmlns:fb="http://ogp.me/ns/fb#">
<head>
</head>
<body>
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
// init the FB JS SDK
FB.init({
appId : 'XXXXXXXXXXXXXXXXXXXXX', // App ID from the app dashboard
channelUrl : '//WWW.YOUR_DOMAIN.COM/channel.html', // Channel file for x-domain comms
cookie : true, // enable cookies to allow the server to access the session
status : true, // Check Facebook Login status
xfbml : true, // Look for social plugins on the page
oauth : true
});
FB.Event.subscribe('message.send',
function(response) {
alert('You sent the URL: ' + response);
}
);
};
(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/debug.js";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<fb:send href="http://www.google.com"></fb:send>
Test test
</body>
</html>
Same here too. I created a bug report at https://developers.facebook.com/x/bugs/1425315047692224/ please subscribe.
I have created a Facebook Page Tab app using the Heroku hosting option. I see an option for setting the width of the Page Tab to either Normal (810px) or Narrow (520px), but don't see an option to set the height, as there is when creating an 'App on Facebook' app.
I understand I could set this app up as an 'App on Facebook', but am wondering if I might be missing something in the 'Page Tab' app setup.
Here is a screenshot of the 'App on Facebook' and 'Page Tab' app setup page.
Here's what worked, based on https://stackoverflow.com/a/13181388/820113
<script src="//connect.facebook.net/en_US/all.js"></script>
<script type="text/javascript" charset="utf-8">
window.fbAsyncInit = function()
{
FB.init({ appId: 'appid',
status: true,
cookie: true,
xfbml: true,
oauth: true});
FB.Canvas.setAutoGrow();
}
</script>
And a <div id="fb-root"></div> in the body.
Found latest solution # Step 2014
What you need to do
After add this:
<script>
window.fbAsyncInit = function() {
FB.init({
appId : '{Your-mail-App_id}',
xfbml : true,
version : 'v2.0'
});
FB.Canvas.setSize({ width: 770, height: 735 }); // set your own figure
};
(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'));
That is all. It will work for sure.
FB.Canvas.setSize() without parameters means leting FB auto detect page size.
Insert before you close the body tag:
<div id="fb-root"></div>
<script type="text/javascript" src="//connect.facebook.net/en_US/all.js"></script>
<script type="text/javascript" charset="utf-8">
window.fbAsyncInit = function() {
FB.init();
FB.Canvas.setAutoGrow();
}
</script>
I've got a facebook iframe page with the following (cut out irrelevant) code. I can't seem to become moderator of the comments. Any idea where i messed up?
(debugging link: https://developers.facebook.com/tools/debug/og/object?q=brandpreview.nl%2Ffbkerst%2Fwhitewishingboard.php)
<html xmlns:fb="http://ogp.me/ns/fb#">
<head>
<meta property="fb:admins" content="737418775" />
<meta property="fb:app_id" content="240672092656980"/>
</head>
<body>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : '240672092656980', // App ID
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
oauth : true, // enable OAuth 2.0
xfbml : true // parse XFBML
});
FB.Canvas.setSize({ width: 520, height: 2000 });
// Additional initialization code 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_GB/all.js#xfbml=1&appId=240672092656980";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
<div id="fb-root"></div>
<div class="fb-comments" data-href="http://www.facebook.com/brandrepublic.nl" data-num-posts="5" data-width="520"></div>
</body>
First off, you shouldn't place your profile id inside those brackets. You should provide it without:
<meta property="fb:admins" content="737418775" />
Secondly, a requirement from Facebook has to be met; the facebook user who should get moderator priviliges needs to 'Like' your application.
Propably needless to say, but make sure you are logged in to Facebook when looking at your comment plugin.