I´m having a problem posting my first story on Facebook with the Open Graph.
I started a site at OrionHub. This is my code:
I have already created an action and an object.
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<meta property="fb:app_id" content="APP_ID" />
<meta property="og:type" content="pruebablackbear:app" />
<meta property="og:url" content="http://facebookapp.orionhub.org:8080/index.html" />
<meta property="og:title" content="Sample app" />
<meta property="og:image" content="https://fbstatic-a.akamaihd.net/images/devsite/attachment_blank.png" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<title>My Facebook App</title>
</head>
<body>
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
// init the FB JS SDK
FB.init({
appId : '124306291113571', // App ID from the app dashboard
channelUrl : '//facebookapp.orionhub.org:8080/index.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>
<h2 class="saludo">HELLO </div>
<button class = 'loginButton'> Press me to Login </button>
<button class = 'publiSH'> Publicar una historia </button>
<script src="main.js"></script>
</body>
</html>
main.js
$('.loginButton').click(function(){
// FACEBOOK LOGIN
FB.login(function(response) {
// GETTING FACEBOOK DATA
FB.api('/me', function(response) {
// stuff you want to happen after getting data goes here
// alert(response.name);
// console.log(response);
$(".saludo").append(response.name);
}); //FB.api
// END - FACEBOOK DATA
},{scope: 'publish_actions'}); //FB.login
// END - FACEBOOK LOGIN
}); //click
$('.publish').click(function(){
FB.getLoginStatus(
function(response){
// alert(response.status);
if(response.status=="connected"){
//stuff to happen after click goes here. E.g.
FB.api(
'me/objects/pruebablackbear:app',
'post',
{
app:"http://facebookapp.orionhub.org:8080/index.html",
privacy:{'value': 'SELF'}
},
function(response) {
// handle the response
if (!response || response.error) {
alert(JSON.stringify(response.error));
alert('Error Occurred ' + response.responseText + " " + response.error.responseText);
} else {
alert('Published: ' + response.id);
}
}
);
window.open('http://www.google.com','mywindow','width=400,height=200');
}else{
alert("Please Login");
}
}
);
}); //click
I can log in correctly, but when I try to publish a story I get this message:
{"message":"(#100) The parameter object is required","type":"OAuthException","code":100}
What's wrong?
You have used app as property name in the JavaScript object that you pass to FB.api:
FB.api(
'me/objects/pruebablackbear:app',
'post',
{
app:"http://facebookapp.orionhub.org:8080/index.html",
privacy:{'value': 'SELF'}
},
but that seems to be the name of your action - the parameter must use the same name that the object you are performing the action upon is called.
So if your object was named banana, it would be:
FB.api(
'me/objects/pruebablackbear:app',
'post',
{
banana:"http://facebookapp.orionhub.org:8080/index.html",
privacy:{'value': 'SELF'}
},
Edit: I think that’s what it should look like:
FB.api(
'me/pruebablackbear:crear',
'post',
{
app: 'http://facebookapp.orionhub.org:8080/index.html',
privacy: {value: 'SELF'}
},
Related
Im trying to post to a facebook friend wall after a friend is selected.
Im using friend's selector from https://codersgrave.com/
I have this code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Facebook Friend Selector Basic Example - Coders' Grave</title>
<!-- Add Facebook Friend Selector CSS -->
<link type="text/css" href="friend-selector/jquery.friend.selector-1.2.1.css" rel="stylesheet" />
<!-- Add jQuery library -->
<script type="text/javascript" src="js/libs/jquery-1.6.2.min.js"></script>
<!-- Add Facebook Friend Selector JS -->
<script type="text/javascript" src="friend-selector/jquery.friend.selector-1.2.1.js"></script>
<!-- Friend Selector Integration -->
<script type="text/javascript">
jQuery(document).ready(function($) {
var id = 0;
$(".bt-fs-dialog").fSelector({
max: 1,
onSubmit: function(response){
id = response[0];
alert(id);
FB.ui({
method: 'feed',
link: 'https://developers.facebook.com/docs/dialogs/',
caption: 'My text',
to: id,
},
function(response) {
if (response && response.post_id) {
alert('Post was published.');
} else {
alert('Post was not published.');
}
});
}
});
});
</script>
</head>
<body>
<!-- Facebook Integration -->
<script src="http://connect.facebook.net/en_US/all.js"></script>
<div id="fb-root"></div>
<script type="text/javascript">
window.fbAsyncInit = function() {
FB.init({
appId : '1399631740271365', // Facebook Application ID
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true, // parse XFBML
});
FB.getLoginStatus(function(response) {
if (response.authResponse) {
$(".connect").attr("class", "logout").text("Logout");
$(".fs-dialog-container").show();
$(".logout").click(function(){
FB.logout(function(response) {
location.reload();
});
});
} else {
}
});
};
// 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));
jQuery(document).ready(function($){
$(".connect").click(function(){
FB.login(function(response) {
if (response.authResponse) {
location.reload();
} else {
// User cancelled login or did not fully authorize
}
}, {scope: 'user_groups'});
});
});
</script>
Connect
<br />
Click here
</body>
</html>
I can select the friend, the dialog box shows ok, and finally my alert showing: "'Post was published.'" also displays, but still if i enter to my friend's wall, i can't see my post.
I have also tried posting to my own wall, and it's the same.
Any ideas?
Thanks
I am looking to create facebook login system in my website using javascript SDK. I am able to login as per details mentioned in facebook website. I am trying to enter data in mysql database primarily email ID of users. I am unable to do so despite different options. Need help. also how to disappear login button once user is logged into the system. Please help. below is the basic code
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
</head>
<body>
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : 'XXXX',
channelUrl : '//XXXX',
status : true,
cookie : true,
xfbml : true
});
FB.Event.subscribe('auth.authResponseChange', function(response) {
if (response.status === 'connected') {
testAPI();
} else if (response.status === 'not_authorized') {
FB.login();
} else {
FB.login();
}
});
};
(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));
function testAPI() {
console.log('Welcome! Fetching your information.... ');
FB.api('/me', function(response) {
$.post('send.php', {'name':response.name});
alert('Good to see you, ' + response.email + '.');
});
}
</script>
<fb:login-button show-faces="true" autologoutlink="true" scope="user_about_me,email" width="200" size= "large" max-rows="1"></fb:login-button>
<div class="fb-like" data-send="true" data-width="450" data-show-faces="true"> </div>
</body>
</html>
I am trying to make work the Open Graph. In the administration of the app I have these 2 items:
Action Types: write - note
Object Types: note
I don't know why, but Open Graph still doesn't work. I followed this tutorial, but when I press the button, still getting Error occured.
Relevant code:
<head prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# my_url: http://ogp.me/ns/fb/my_url#">
<meta property="fb:app_id" content="ID" />
<meta property="og:type" content="note" />
<meta property="og:url" content="http://google.com" />
<meta property="og:title" content="Sample text" />
<meta property="og:image" content="https://s-static.ak.fbcdn.net/images/devsite/attachment_blank.png" />
<script type="text/javascript">
function postCook()
{
FB.api(
'/me/my_url:write',
'post',
{ note: 'http://google.com' },
function(response) {
if (!response || response.error) {
alert('Error occured');
} else {
alert('Cook was successful! Action ID: ' + response.id);
}
});
}
</script>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : 'ID', // App ID
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 = "//connect.facebook.net/en_US/all.js";
d.getElementsByTagName('head')[0].appendChild(js);
}(document));
</script>
<form>
<input type="button" value="Write" onclick="postCook()" />
</form>
I am playing with setup of Open Graph whole day, but still cannot find the right configuration.
Missing I something important? Or how could I debug deeply this basic application?
EDIT The error message says:
code: 2500
message: "Unknown path components: /my_url:write"
type: "OAuthException"
Also, when I open the link (from Facebook developer administration), where should be displayed all actions, there is just:
{
"data": [
]
}
I am Unable to take the Permissions Dialog as well as Login to Facebook here is my code:
<!DOCTYPE html>
<html>
<head>
<title>My Page</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0-alpha.1/jquery.mobile-1.2.0-alpha.1.min.css" />
<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.2.0-alpha.1/jquery.mobile-1.2.0-alpha.1.min.js"></script>
</head>
<body>
<div data-role="page">
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : 'APP_ID', // App ID
channelUrl : 'http://connect.facebook.net/en_US/all.js', // Channel File
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true // parse XFBML
});
FB.Event.subscribe('auth.statusChange', handleStatusChange);
};
function handleStatusChange(response) {
document.body.className = response.authResponse ? 'connected' : 'not_connected';
if (response.authResponse) {
// console.log(response);
FB.api('/me/likes/171099129606813', function(response) {
if ( response.data.length === 1 ) { //there should only be a single value inside "data"
console.log('You like it');
} else {
console.log("You don't like it");
}
});
}
else
{
FB.login(function(response) {
if (response.status == 'connected') {
//console.log(response);
FB.api('/me/likes/171099129606813', function(response) {
console.log(response);
});
} else {
alert('Not Logged In');
// user is not logged in
}
}, {scope: 'email,user_likes'});
}
}
// 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>
<div data-role="header">
<h1>My Title</h1>
</div><!-- /header -->
<div data-role="content">
<p>Hello world</p>
</div><!-- /content -->
</div><!-- /page -->
</body>
</html>
still its not taking me to authentication page it is changing the class name of body but not working on fb login
It took me today a while to understand that window.fbAsyncInit method is not fired on some mobile browsers (in fact on all mobile devices in my company). What you need to do is to add sth like this:
var called = false;
window.fbAsyncInit = function () {
if (called) return;
called = true;
// here the fb code
}
if (!called) window.fbAsyncInit();
This happened to me as well. The FB.login function was nested in a callback. In my case the browser was blocking the popup page from facebook. When I unblocked popups, it came up fine.
I am trying out the facebook opengraph cookie recipe tutorial and I am following all the instructions, but every time I hit the cook form on it, it still says error. I am using php and using a heroku server. Here is my code:
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en-US"
xmlns:fb="https://www.facebook.com/2008/fbml">
<head prefix="og: http://ogp.me/ns# tommytechcook:
http://ogp.me/ns/apps/tommytechcook#">
<title>OG Tutorial App</title>
<meta property="fb:app_id" content="145722645553824" />
<meta property="og:type" content="tommytechcook:recipe" />
<meta property="og:title" content="Stuffed Cookies" />
<meta property="og:image" content="http://fbwerks.com:8000/zhen/cookie.jpg" />
<meta property="og:description" content="The Turducken of Cookies" />
<meta property="og:url" content="https://simple-journey-2635.herokuapp.com/cook.html">
<script type="text/javascript">
function postCook()
{
FB.api(
'/me/tommytechcook:cook?recipe=https://simple-journey-2635.herokuapp.com/cook.html',
'post',
function(response) {
if (!response || response.error) {
alert('Error occured');
} else {
alert('Cook was successful! Action ID: ' + response.id);
}
});
}
</script>
</head>
<body>
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : '145722645553824', // App ID
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 = "//connect.facebook.net/en_US/all.js";
d.getElementsByTagName('head')[0].appendChild(js);
}(document));
</script>
<fb:add-to-timeline></fb:add-to-timeline>
<h3>Stuffed Cookies</h3>
<p>
<img title="Stuffed Cookies"
src="http://fbwerks.com:8000/zhen/cookie.jpg"
width="550"/>
</p>
<br>
<form>
<input type="button" value="Cook" onclick="postCook()" />
</form>
</body>
</html>
alert(response.error);
will return "Object Object".
Use instead:
alert(JSON.stringify(response.error));
user1304503, I'm interested in finding out how you got around this problem - I'm having a hard time setting up a test app myself (one that posts to a user's news feed)
WoolyG
My guess is that you're not logged in. I don't see FB.login() anywhere.
What's the error message?
Change alert('Error occured'); to alert(response.error); to see the error message.