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.
Related
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'}
},
Trying to integrate a facebook social like button plugin with the comment box. The like/unlike function works fine, and it reflects properly in my activity log on Facebook.
However, once I type in a comment in the comment box and click "post to facebook", nothing happens! The comment box won't close when I submit, and it doesn't publish anything in the timeline.
I can see the post request in Firefox debugger. Facebook debugger doesn't report any errors on the page, and extracts the meta tags.
See my code below: What am I doing wrong or missing?
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en-US"
xmlns:og="http://ogp.me/ns#"
xmlns:fb="https://www.facebook.com/2008/fbml">
<head prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# website: http://ogp.me/ns/website#">
<meta property="og:title" content="mytitle" />
<meta property="og:description" content="mydescription" />
<meta property="og:type" content="website" />
<meta property="og:url" content="<?php echo $this->baseUrl(); ?>/welcome"/>
<meta property="og:image" content="<?php echo $this->baseUrl(); ?>/images/screen_shot_general.jpg" />
<meta property="og:site_name" content="myname" />
<meta property="fb:app_id" content="xxxxxxxxx" />
</head>
<body>
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : 'xxxxxx', // App ID
channelUrl : '<?php echo $this->baseUrl(); ?>/channel.html', // Channel File
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>
<div class="fb-like" data-href="<?php echo $this->baseUrl(); ?>" data-send="false" data-layout="button_count" data-width="90" data-show-faces="false" data-font="lucida grande"></div>
This is probably just a Facebook Plugin bug and it's not your code that's affecting the plugin, since it's loaded within an iframe. Are you still getting the issue? If you are, it's best to report the bug to Facebook or see if there is an existing bug that relates to the issue.
<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# fb: http://ogp.me/ns/fb# music: http://ogp.me/ns/fb/music#">
<meta property="fb:app_id" content="###########" />
<meta property="og:type" content="music.song" />
<meta property="og:url" content="http://mymediaupload.com/fbindex1.php" />
<meta property="og:locale" content="en_US" />
<meta property="og:title" content="MyMediaUpload" />
<meta property="og:description" content="MMU" />
<meta property="og:image" content="http://www.mymediaupload.com/v4/img/ErrorBG.png" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
</head>
<body>
<div class="fb-login-button" data-show-faces="true" data-width="200" data-max-rows="1" scope="publish_actions"></div>
<input type="button" value="Read" class="openGraphButton" action="song" page="http://mymediaupload.com/fbindex1.php" />
<script type="text/javascript">
$(document).ready(function()
{
$('.openGraphButton').click(function(){
var action = $(this).attr('action');
var page = $(this).attr('page');
postAction( action, 'article', page);
});
});
function postAction( action, object_type, object_url ){
FB.api('/me/music.' + action + '?' + object_type + '=' + object_url, 'post', function(response){
var msg = 'Error occured';
if (!response || response.error)
{
if (response.error) {
msg += "\n\nType: "+response.error.type+"\n\nMessage: "+response.error.message;
}
alert(msg);
}
else
{
alert('Post was successful! Action ID: ' + response.id);
}
});
}
</script>
<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
});
// Additional initialization code here
};
// 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>
</body>
</html>
I have used facebooks own actions.. I have searched and searched! I fixed all my errors apart from this last one, i get the error:
Error occured
Type: GraphMethodException
Message: Unsupported post request.
Please help! I can't find an answer!
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": [
]
}
Below you can find the code I use, as you can see it has been copied from the sample code. However the result is very unstable, more than often it returns 'unexpected error please try again later', also the dev app has some problems. At random it clears the app namespace, while I did not delete it. In fact, the app namespace is still active so if I re-enter my app namespace it says it already exists.
This has kept me busy for 12 hours now. I was wondering if other people are experiencing the same problem that it might be a bug on the Facebook part.
<html xmlns:fb="http://ogp.me/ns/fb#"
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# mycookieapp:
http://ogp.me/ns/apps/mycookieapp#">
<title>OG Tutorial App</title>
<meta property="fb:app_id" content="115973895205576" />
<meta property="og:type" content="mycookieapp: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="http://www.crystalminds.nl/facebook/index.html">
<script type="text/javascript">
function postCook()
{
FB.api(
'/me/mycookieapp:cook?recipe=http://www.crystalminds.nl/facebook/index.html',
'post',
function(response) {
if (!response || response.error) {
alert('Error occured: ' + response.error.message);
} else {
alert('Cook was successful! Action ID: ' + response.id);
}
});
}
</script>
</head>
<body>
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : '115973895205576', // App ID
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true // parse XFBML
});
};
(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/nl_NL/all.js#xfbml=1&appId=115973895205576";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
<h3>Stuffed Cookiess</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>