I'm working on my Cordova application to get it more viral. Therefore I want to include Facebook and the Open Graph API to publish in the news stream of playing users, when they archive new things in the game. I'm completely new to the whole fb and open-graph thing, so please help getting started with it.
I login a new user by running the following code:
$(login).on("click", function() {
FB.login(function() {
console.log("Default Login succeded");
console.log("Asking for write permissions");
FB.login(function(rsp) {
console.log("GOT WRITE PERMISSIONS");
log(rsp);
}, {
scope : 'publish_stream'
});
}, {scope:"email"});
});
I registered a Open graph action called buy under the namespace einszwo. As object I use a default object.
It is not yet reviewed, but I'm using a developer facebook account to login on my device.
Now i want to call the action. To do that I use the following code:
var obj = {
title : "I visited Google",
url : "http://www.google.com"
};
function callback(response) {
console.log(JSON.stringify(response));
}
FB.api('me/einszwo:buy','POST',obj, callback);
Unfortunately the call fails with the following response from Facebook:
{"error":{"type":"Exception",
"message":"The action you're trying to publish is invalid because it does not
specify any reference objects. At least one of the following properties
must be specified: object.","code":1611072}}
It would be really great if someone can help me with that problem or provide my some information where I can look for further information.
Thank you!
Sebastian
EDIT
The solution to just paste a url as the objects works, but we want to use Facebook hosted Objects which you define in the Facebook Object Browser. The approach is to be able to publish a activity of the user and if someone clicks on that activity we want them to be redirected to our application information page.
We cannot provide a page for every different object. Isn't there a possibility to use the Facebook Javascript SDK to use the predefined objects which are hosted on facebook?
I would really like to have a possibility like this to either create new objects
var o = {
"og:title" : "Test " + new Date(),
"og:url" : "http://facebook.com/appcenter/**APPNAMESPACE**",
"og:type" : "Object"
}
FB.api('/me/**APPNAMESPACE**:buy', 'POST', {
object : o
}, function(response) { console.log(JSON.stringify(response));});
this returns
{"message":"(#3503) \"{\"og:title\":\"Test Thu May 23 2013 12:19:45 GMT+0300 (EEST)\",\"og:url\":\"http://facebook.com/appcenter/einszwo\",\"og:type\":\"Object\"}\" is an invalid value for property \"object\" with type \"Reference\"","type":"OAuthException","code":3503}
or a way to use the ID of the predefined facebook objects like:
FB.api('1234567890', 'POST', {
}, function(response) { console.log(JSON.stringify(response));});
Can anyone help me?
Thanks!
It sounds like you are talking about an app owned object.
An app-owned object. These objects are used across your entire app. They are public, just like self-hosted objects. Anyone who uses your app can see them and they can be attached to any story your app creates.
You cannot use your appcenter url as an object (This really doesn't make sense if you think about what open graph URLs are meant for, and is pretty much a misuse of Open Graph)
You create an object in cURL or using the Object Browser
In my case I created a Leopluradon object for my coffeeshop type. Then I obtained the id (149831668534005) from the result of creation and used that in my call
FB.api(
'/me/philippeharewood:code',
'post',
{ coffeeshop: '149831668534005' },
function(response) {
if (!response || response.error) {
alert('Error occured');
console.log(response.error);
} else {
alert('Publish was successful! Action ID: ' + response.id);
}
});
A demo can be found at http://philippeharewood.com/facebook/charlie.html, it wouldn't work for you but you get the gist.
Then you can see it in your activity.
This is all explained in https://developers.facebook.com/docs/opengraph/using-object-api/
You should provide a link for open graph object, for example:
FB.api('/me/einszwo:buy','POST',{object:'http://example.com/product1'}, callback);
The linked object (http://example.com/product1) should have open graph tags:
<meta property="fb:app_id" content="133696533402323" />
<meta property="og:type" content="object" />
<meta property="og:url" content="Put your own URL to the object here" />
<meta property="og:title" content="Sample Object" />
<meta property="og:image" content="https://s static.ak.fbcdn.net/images/devsite/attachment_blank.png" />
Related
https://developers.facebook.com/docs/javascript/reference/FB.ui
With the new update of Facebook API, I've been trying show a dialog for share in timeline, but don't only recognize me the href..
What can I do?
Code:
FB.ui({
name: 'Mejores Huecas',
link: 'www.lasmejoreshuecas.com',
from: '1469541393326876',
caption: 'Las mejores huecas!',
method: 'share',
href: 'https://apps.facebook.com/mejoreshuecas/?fb_source=search&ref=ts&fref=ts',
},
function(response) {
if (response && !response.error_code) {
//alert('Posting completed.');
}
else {
//alert('Error while posting.');
}
}
);
That´s intentional, the Share Dialog reads the data from the Open Graph Tags of the URL and it only takes the href as parameter, as you can see in the docs.
If you want to share custom data, you need to create a separate URL with separate Open Graph tags. After all you share a Link, and the message must be user generated anyway, so you don´t really need additional info - i guess that is why Facebook deprecated the old Feed Dialog.
I am new to open graph and what i am trying to do is to post a book quote, but without a url. because let's say i want to post a quote from a book using a url from amazon.The problem is that it requires a page that has those og tags, which amazon doesnt.Is there any way to bypass this?
Something like this, but without the book part. Simply put, is there any way of manually specifying the bookname and the thumbnail, instead of using a url to a page that has all that info in a og tag?
function postBook()
{
FB.api(
'me/books.quotes',
'post',
{
body: document.getElementById("quote").value,
bookname: document.getElementById("book").value,
book:"http://samples.ogp.me/344468272304428"
},
function(response) {
alert("Posted !");
}
);
}
What you are trying to do can be achieved using Object API.
Here you will create a quote object using the Object API.
Hope this helps.
I am trying to add a custom link to the [object] (marked in red, below) in a facebook custom Action post.
This is my code :
FB.api('/me/testapponens:cook', 'post',
{ recipe: 'http://foobar.com/page1.html' },
function(response) {
if (!response || response.error) {
alert('Error occured');
} else {
alert('Cook was successful! Action ID: ' + response.id);
}
});
Now, Because I have stated 'http://foobar.com/page1.html' in my 'recipe', when this is posted, the open-graph properties are picked from this page.
PROBLEM : I need to show the link as a thirdparty link www.thirdparty.com/page1.html but the open graph meta properties cannot be written in thirdparty.com/page1.html (as I don't have any control on that page).
So, I decided to do this:
i) Create a dummy page : www.foobar.com/page1.html.
ii) Add all the og meta to it.
iii) Add a redirect (javascript) code to the dummy page so that it goes to the third party page.
www.foobar.com/page1.html looks something like this :
<html ...>
<title> Page 1 </title>
<meta property="fb:app_id" content="..." />
...
<script type="text/javascript">
function redirect1()
{
window.location = "http://thirdparty.com/page1.html"
}
</script>
</head>
<body onLoad="redirect1()"></body>
</html>
QUESTION : I think this is a hacky approach and it may not be acceptable to the users. Is there a better way of doing this? Please let me know if I was not able to explain what I intend to do.
PS : I am not a spammer, the third party page is from a client and I am not trying to misguide the users.
I think this is a hacky approach and it may not be acceptable to the users. Is there a better way of doing this?
You can do a server-side redirect, checking the user agent – only if it is not indicating to be the Facebook scraper, redirect the client, otherwise let the scraper read the OG meta info from your page.
How to detect the FB scraper: https://developers.facebook.com/docs/reference/plugins/like/#scraperinfo
I've already registered my app on Facebook developer and got an ID, but had hard time to characterize the my app(chrome extension), it's website app, mobile app, facebook app? What I wanna do is a simple extension that allows users simply to click on it, and the background JavaScript calls the Facebook API to ask the users to log in like this.
window.fbAsyncInit = function() {
FB.init({
appId : '123456789',
status : true,
cookie : true,
xfbml : true,
oauth : true,
});
};
chrome.browserAction.onClicked.addListener(function(tab) {
FB.login(function(response) {
if(response.authResponse) {
alert('Welcome! Fetching your information.... ');
FB.api('/me', function(response) {
console.log('Good to see you, ' + response.name + '.');
});
} else {
alert('User cancelled login or did not fully authorize.');
}
});
});
However, it pops up a window that says an error occurred, it is another way of saying "I am not authorized", how do I specify my app's URL on the Facebook developer page, because the extension's URL is a garbage like this chrome extension://asdjlajsldj/ or anyone knows any workaround? Thank you
I would assume that Facebook's API uses OAuth 2 to let applications access users data. Google provides a way of doing this with an example in their API section. I have also have posted an alternative method on GitHub. Note that my method will require some alternations to fit Facebook's interface but the idea is the same (I have a GitHub branch to do this with GitHub).
Essentially your extension must get an access token for the user from Facebook, then using this token as a parameter you can query private data from the API. What makes it seem difficult is the fact the the chrome extensions are sandboxed and have no return URL, but using one of the two methods above should do you just fine.
Good Luck!
I've put together a script, with the help of another SA post, but the issue I'm having is it's always returning error. When logging the error with console log it contains no properties so I can't determine why I am getting the error.
$(".add-image").click(function() {
FB.login(function(response) {
if (response.authResponse) {
var imgURL="http://farm4.staticflickr.com/3332/3451193407_b7f047f4b4_o.jpg";
FB.api('/album_id/photos', 'post', {
message:'Test',
url:imgURL
}, function(response){
if (!response || response.error) {
console.log(response);
} else {
alert('Post ID: ' + response.id);
}
});
} else {
console.log('User cancelled login or did not fully authorize.');
}
}, {scope: 'publish_stream'});
});
I've created the app. Added the API ID when including the Javascript.
When running I get a pop up asking me to log in, and it seems to log me in without problems. But it returns an error when checking for a response or response.error.
Any advice.
Not sure if this is still a problem for you, but I've been looking into the same thing recently and I believe that, for this type of upload, FB basically requires source to be the image data itself, not a URL to the image. (See the create photos section on https://developers.facebook.com/docs/reference/api/album/ - it indicates that the source paramater must be multipart/form-data.)
So you have a few workarounds:
1) You may be able to do it from JS if you can create a custom Open Graph Object. I haven't tried this yet, but https://developers.facebook.com/docs/opengraph/usergeneratedphotos/ looks like it expects a URL rather than the post data itself.
2) If the image is originating on the user's computer, you can create an HTML form that submits to FB and have the image go directly from the user to FB without ever hitting your server. This blog post shows an example of that: https://developers.facebook.com/blog/post/498/
3) If the image is originating in your system, you can do a POST from your server to FB that mimics the above form. If it's somewhere else online (such as Flickr), you can download it to your system first and then POST it to FB. You'll have to include an access_token in the request. I don't know what language / framework you're using on your server, but there's probably a library to make creating POST requests easier.