Facebook Open Graph publish action with object - facebook

I'm working on publishing stories with Facebook Open Graph, for this I'm using their JS SDK. Docs is here : https://developers.facebook.com/docs/opengraph/overview
So the point is to publish for a user : John Smith is listening Shakira - Lalala on Mywebsite.
listening is the action
Shakira is the object
The JS code would be:
FB.api(
'me/mynamespace:listen',
'post',
{
song: "http://mywebsite/shakiramusic"
},
function(response) {
// handle the response
}
);
In this page, some others informations will be specified with code like this:
<meta property="og:title" content="Lalala" />
<meta property="og:image" content="wonderShakira.jpeg" />
But, here is my problem. Imagine that I would like to make a Stories like :
John Smith is reading page 542 from a BigBook on mywebsite
The page number is highly variable and so can't be stock in meta property because Facebook won't refresh it in time.
So I would like making something like that:
FB.api(
'me/mynamespace:reading',
'post',
{
object:{
app_id: 1234567890,
type: "book",
url: "http://mywebsite/thebigbook
title: "The Big Book"
image: "bigbookcover.png",
description: "A super book",
** page_count:542 **
}
},
function(response) {
// handle the response
}
);
But of course it's not working and i get an error. May be i misunderstand the principe of custom stories, actions and objects... I hope my problem is clear and you'll be able to help me.
Thanks :)

I got the answer, here is the good code:
FB.api(
'me/mynamespace:reading',
'post',
{
book:{
app_id: 1234567890,
type: "book",
title: "The Big Book"
image: "bigbookcover.png",
description: "A super book",
url: "http://mywebsite/thebigbook
page_count:542
}
},
function(response) {
// handle the response
}
);
There is two things to consider:
you need to send an object call book for reading and you need to put the url parameter in last, otherwise, Open Graph will get the value in the meta tag. If you put it last, OG will take the parameter that you send.

Related

Facebook sharing: going from 'feed' to 'share_open_graph'

I'm messing around with an Angular app, let's say for the sake of argument that I'm not using any meta tags, how can I use the Share Dialog to let users share pages of my app?
Using the old Feed Dialog works, but it has been deprecated:
$scope.share = function() {
FB.ui({
method: 'feed',
name: 'This is the name field',
link: 'The link',
picture: 'The picture',
caption: 'The caption',
description: 'This is the content of the "description" field, below the caption.'
})
},
function(response) {
if (response && !response.error_code) {
console.log('Posting completed.');
} else {
console.log('Error while posting.');
}
});
};
So even though this works, I want to use the Share Diolog in the same way but I'm not figuring it out. This is sort of what I've been trying, keep in mind that I'm a newbie:
$scope.share = function() {
FB.ui({
method: 'share_open_graph',
action_type: 'og.likes',
action_properties: JSON.stringify({
object: {
'title': 'The title',
'image': 'An image',
'url': $scope.shareUrl,
'description': 'This is the description',
}
})
},
function(response) {
if (response && !response.error_code) {
console.log('Posting completed.');
} else {
console.log('Error while posting.');
}
});
};
Any hints?
The short answer is that you can't, you must use OpenGraph meta tags.
Since Facebook doesn't understand JavaScript and thus Angular, you must detect Facebook's crawlers server-side and render a static page for them instead of the Angular app.
While the precise implementation will vary depending on your server technologies, here's the general idea:
Setup a route for the resources that need sharing: http://example.com/resources/:id
Look for the user-agent
If it's one of Facebook's crawlers, fetch the resource and render a simple view with OpenGraph tags and an empty body. Otherwise, simply render the Angular app.
Facebook's crawlers are available here and they currently are:
facebookexternalhit/1.1 (+http://www.facebook.com/externalhit_uatext.php)
facebookexternalhit/1.1
Facebot

Facebook custom share alternative to feed dialog

Hi i'm working on a test site to share personalized content non linked to og.
I'm at the point that i have implement the FB.ui method feed but i read that it's deprecated.
So i have looked for the new share_open_graph with object and action.
Now i can create an action and share it, but when i share it don't appear in the board but only in the timeline. and as i read on the rules this function make 2 call that can be passible to ban/suspension.
the site is:
www.paris-web.it/test.html
you can see all the code directy in page/with inspector
function postLike(){
accessToken = FB.getAuthResponse().accessToken;
FB.api(
'me/objects/article',
'post',
{
object: {
"app_id": fbAppId,
"type": "article",
"url": objectToLike,
"title": "my title",
"image": logoImage,
"description": "my desc",
"expiration_time": "2014-07-23"
}
},
function(response) {
console.log(response);
if ( response.error != undefined ){
$("#result").text(response.error.message);
return;
}else{
$("#result").text("succesfull shared "+response.id);
}
FB.ui({
method: 'share_open_graph',
action_type: 'og.shares',
action_properties: JSON.stringify({
object: response.id
})
}, function(r){});
});
}
i'm looking for some solution/alternative and with some example. i'm blocked there from 3 day and i can't find any other solution.
tHANKS
Solved with a dynamic url that generate dynamic og via php.
It's the only solution to have personalizedcontent and don't have problem with google/facebook cache!
You can see the result on the same page linked in OP

facebook api with private message multiple to (friends)

I development facebook private message for invite with facebook api.
<script>
FB.init({ appId: 'xxxxxxxxxx', xfbml: true, cookie: true });
FB.ui({
method: 'send',
to: ['1736383768','590528674'],
// picture: 'http://thinkdiff.net/iphone/lucky7_ios.jpg',
//Can be page, popup, iframe, or touch.
display: 'popup',
name: 'yyyyyy',
link: '<%=Request.QueryString["link"]%>'
});
</script>
but adds only the first mate.
how to multiple friends send private message ?
var publish =
{
method: 'stream.publish',
message: 'Some kind of test',
uid: uid,
attachment: {
name: 'Test',
caption: 'Facebook API Test',
description: ('Sure hope it worked!'),
href: 'http://www.test.com/',
media: [
{
type: 'image',
href: 'http://test.com/',
src: 'http://test.com/image.jpg'
}
]
},
action_links: [
{ text: 'Your text', href: 'http://www.test.com/' }
],
user_prompt_message: 'Share your thoughts about test'
};
publish.target_id = friendID;
FB.ui(publish);
publish.target_id = friendID;
FB.ui(publish);
return false;
You should not use stream.publish.
As said by facebook : "We are in the process of deprecating the REST API, so if you are building a new application you shouldn't use this function. Instead use the Graph API and POST a Post object to the feed connection of the User object"
So, now you have the send and feed methods left.
You cannot fill the send method with more than one user id (you can only if you are whitelisted by facebook, but I'm not quite sur how to do this , I would not count on it either).
You can use the feed method to post on many user's friends wall with something like this
FB.api('/USERID/feed', 'post', {
name:postName,
link:postLink,
picture:postPicture,
description:postDescription,
message:postMessage
}, function (postResponse) { //DO SOMETHING HERE });
But doing it, you are taking the risk of your app being deleted by facebook if someone flag it as spam.
As far as I know, sending messages to multiple friends via an App is considered bad/spam by facebook so they do not allow this anymore.
You still can Invite as many friends as you want via the App request dialog (method apprequests) but I'm not sure this is what you want.

FB.ui is giving me Error Message: redirect_uri is not owned by the application

Help please! I'm creating a Facebook tab/app on facebook for a contest, part of the contest is to have a user have the option to share the contest on their wall. This is the error I'm receiving -
API Error Code: 191
API Error Description: The specified URL is not owned by the application
Error Message: redirect_uri is not owned by the application.
This is my facebook auth code:
<div id='fb-root'></div>
<script>
FB.init( {
appId : 219691398094935,
status : true,
cookie : true,
xfbml : true
}
);
window.fbAsyncInit = function() {
FB.Canvas.setAutoResize();
}
</script>
<script src='http://connect.facebook.net/en_US/all.js'></script>
This is my FB.ui Code:
<script>
function showStreamPublish() {
FB.ui(
{
method: 'feed',
name: 'I signed up to win an iPad 2 from Upillar.com',
link: 'http://www.facebook.com/pages/udev/121216321302968?sk=app_219691398094935',
picture: 'http://static.upillar.com/fb/images/logo.png',
description: 'I entered the iPad 2 Sweepstakes from Upillar.com which only requires you to create a listing to enter! Enter the contest now by by clicking this link.',
app_id: '219691398094935'
},
function(response) {
if (response && response.post_id) {
$('#main-screen').css('display','none');
$('#step2').css('display','block');
}else{
$('#main-screen').css('display','none');
$('#step2').css('display','block');
}
});}
</script>
This is the information in my app:
Site/App Domain: upillar.com
Site URL: http://fb.upillar.com/contest.php
Page Tab URL: http://fb.upillar.com/contest.php
Secure Tab URL: https://fb.upillar.com/contest.php
Please tell me what am I missing! Thank you so much.
Got same problem - solution is simple, but not even mentioned by Facebook Dev DOCS. Take a look at this:
FB.ui(
{
method: 'feed',
redirect_uri: 'http://www.yourdomain.com', // that caused the problem
message: 'getting educated about Facebook Connect',
name: 'Connect',
caption: 'The Facebook Connect JavaScript SDK',
description: (
'A small JavaScript library that allows you to harness ' +
'the power of Facebook, bringing the user\'s identity, ' +
'social graph and distribution power to your site.'
),
link: 'http://www.yourdomain.com',
picture: 'http://www.yourdomain.com/f8.jpg',
actions: [{
name: 'yourdomain',
link: 'http://www.yourdomain.com'
}],
user_message_prompt: 'Share your thoughts about RELL'
},
function (response) {
if (response && response.post_id) {
alert('Post was published.');
} else {
alert('Post was not published.');
}
}
);
site URL should not be a file, try to set this as your domain only, without contest.php
if that does not work, set the canvas URL as your domain, with "/" at the end too.
Sorry to bump an old post, first I should say i'm relatively new to facebook development but i've been getting the same problem, basically it seems like facebook does some fairly nifty detection in terms of what qualifies as a redirect when you land on your page.
For example I was detecting if it was a new user and then displaying a colorbox, whose onclick event redirected to a newuser creation form. That gave me error 191 redirect_uri not owned. It seems because the javascript was in the <HEAD> element it qualified as a redirect.
I simply changed the login process to fully render the main page and display a normal div telling them to click here to login.
Sorry for grave-digging!
I just had the same problem and found the solution. You do not have to change anything on your sources.
Just head over to http://developers.facebook.com open your app and navigate to "Settings" and "Basic".
There is a textfield that says "App Domains" - enter the domain name where the app is currently hosted at there, save the settings and you are done.

FB.ui : stream.publish - post to wall issue

When I click a link which calls following function...I get
"Something went wrong. We're trying fix it as soon as possible".
It's been working for couple weeks, and has started behaving like this, for last week.
Did I change anything?, probably yes. But, the same code works on another non-production, test fb-app-settings!!
Here is the javascript.(There's no javascript error on the page)
I need help figuring out what's wrong or where to look! I've waiting couple days, but still same problem.
function publishReview() {
var atch = {
name: 'Raajneeti - Movie Review',
href: 'http://www.moviereviewsindia.com/Movie.aspx/Details/Raajneeti',
caption: '{*actor*} just revealed his taste of a movie',
description: 'Write, Read and Share movie reviews just through your Facebook Account',
media: [{ type: 'image', src: 'http://moviereviewsindia.com/Content/Images/logoround.png', href: 'http://www.moviereviewsindia.com'}]
};
FB.ui(
{
method: 'stream.publish',
message: '3/5 - Multi-starrer raajneeti was good but not great, and a very good efforts from Prakash Jha. A lot happened in 3 hours. I recommend to hire ajay devgan for car wash. Nana patekar was rocking as usual in his unusual style. Take him out and your movie experience may deterior. Ranbeer got a nice role of ARJUN, and he was characterized nicely in the movie. I can\'t say whether he was that great in acting. Story was good enough, but don\'t expect total real life thingy there. ',
attachment: atch,
action_links: [
{ text: 'My Reviews', href: 'http://www.moviereviewsindia.com/User.aspx/Profile/1266802272' }
],
href: 'http://www.moviereviewsindia.com/Movie.aspx/Details/Raajneeti',
user_prompt_message: 'Share your thoughts about ' + 'Raajneeti - Movie Review'
},
function(response) {
if (response && response.post_id) {
//success action
} else {
//failure action
}
}
);
}
I tried with shorter FB.ui.message. And that worked. I wonder if there is any defined length limit for this message.