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.
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 want to integrate open graph using sdk and facebook login button (token action)
the probleme is with the smarty template tpl file
in fact i tested all my code on simple html file, and it work like a charme : http://zdig1.biz/1.htm
the same code when i report it to tpl file don't work
of corse by adding {literal}
you can compare the other link with this
http://zdig1.biz/video/naruto-shippuden/317-video_7605be4c2.html
the facebook boutton called time line dont exit
and the publich one dont work
<div id="fb-root"></div>
{literal}<script type="text/javascript">
window.fbAsyncInit = function() {
FB.init({
appId : '48439698629',
channelUrl : '//zdig1.biz/channel.html',
status : true,
cookie : true,
xfbml : true
});
};
(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>{/literal}
{literal}<script type="text/javascript">
function postArticle()
{
FB.api(
'me/video.watches',
'post',
{
video: "http://zdig1.biz/video/naruto-shippuuden/321-video_f69d2a355.html"
},
function(response) {
if (!response || response.error) {
alert('Post was not published.');
} else {
alert('Post was published. Action ID: ' + response.id);
}
});
}
</script>{/literal}
and the action one
<fb:login-button onlogin = 'postArticle()' perms="email,publish_actions,user_actions.video">
Timeline
</fb:login-button>
or
<fb:add-to-timeline></fb:add-to-timeline>
<form>
<input type="button" value="Publish" onclick="postArticle()" />
</form>
the solution was :
<fb:login-button onlogin='postlike()' perms="email,publish_actions,user_actions.video">Timeline</fb:login-button>
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'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! ;)
It looks like:
FB.Event.subscribe('edge.create', function(href, widget) {
alert("Hi");
});
works for everybody except me!
Here is my code:
<html xmlns:fb="https://www.facebook.com/2008/fbml">
.
.
.
<body>
<div id="section1">
<div id="fb-root"></div>
<script src="http://connect.facebook.net/en_US/all.js"></script>
<script>
window.fbAsyncInit = function() {
FB.init({
appId :'xxx',
status : true,
cookie : true,
xfbml : true,
oauth : true
});
FB.Event.subscribe('edge.create', function(href, widget) {
alert("Hi");
});
});
(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="mysite" send="false" width="450" show_faces="false" font="tahoma"></fb:like>
</div>
I just need a simple way to check if the like button was clicked to show a form on the page! Any Suggestions? Thanks
You can even detect multiple likes on the same page. We use this quite often, check the below snippet.
window.fbAsyncInit = function() {
FB.init({appId: 'YOUR_FACEBOOK_APP_ID', status: true, cookie: true, xfbml: true});
FB.Event.subscribe('edge.create', function(href, widget) {
// START: LOGIC For detecting multiple likes on the same page
if(href == "LINK_1_ON_THEPAGE') {
alert('User Like is for Link1');
} else if (href == "LINK_2_ON_THEPAGE') {
alert('User Like is for Link2');
}
// END: LOGIC For detecting multiple likes on the same page
});
};