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
Related
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" />
Currently, our app posts to users' friends' walls via Graph API. However, Facebook is deprecating this functionality so we are migrating to the Feed Dialog per Facebook's recommendations (see the February 6, 2013 section at https://developers.facebook.com/roadmap/).
Now, we know we can specify the recipient as part of the Javascript SDK call (note FB.init() is called elsewhere earlier on the page):
<p><a onclick="launchFeedDialog(); return false">Testing the Feed Dialog</a></p>
<script>
function launchFeedDialog() {
// calling the API ...
var obj = {
method: 'feed',
to: 'RECIPIENT NAME', // Can specify recipient here
link: 'http://example.com',
name: 'Test post',
description: 'Test description'
};
FB.ui(obj);
}
</script>
However, it does not seem like the user can modify the recipient in the launched dialog. A screenshot of what I mean is at http://i.imgur.com/oLPTO.png.
Is there some way of invoking the Feed Dialog so that the user can change/add recipients, like in the Send Dialog?
The flow we are trying to implement (and the way it currently is) is:
User clicks a button to launch the Feed dialog
User fills in the Feed dialog (including recipient) and submits
Right now, we are stuck with this awkward flow:
User fills out a custom control specifying the recipient
User clicks a button to launch the Feed dialog
User fills in the Feed dialog and submits
OK, we found a workaround. The general idea:
Display the Feed Dialog inline as an iframe (by specifying display=iframe)
Create your own custom control for selecting a recipient Facebook username or id
Reload the iframe asynchronously upon selecting a recipient or onblur, etc
Some caveats/reasoning for above:
You can't use the JS SDK because it will launch the iframe version of the Feed Dialog as a modal lightbox (rather than inline in your page flow)
You'll need to implement a redirect page that does post processing, such as updating the state of the parent window, logging results, etc
For (2), the custom control can be as simple as a text input field, but you'll probably want at least some sort of autocomplete. This is actually not too tricky, as you grab your user's friend list with the https://graph.facebook.com/me/friends Graph API call.
Here's a basic example using a simple text input:
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
</head>
<body>
<div>
Recipient's FB username:
<input type="text" id="fb-recipient" placeholder="Recipient's FB username"></input>
<input type="submit" id="fb-recipient-submit" value="Pick" />
</div>
<iframe id="fb-feed-dialog" width="586" height="330" frameborder="0" allowfullscreen></iframe>
<script>
$('#fb-recipient-submit').click(function(e){
e.preventDefault();
var feedUrl = 'https://www.facebook.com/dialog/feed?';
feedUrl += 'display=iframe';
feedUrl += '&app_id=' + 'YOUR_APP_ID';
feedUrl += '&access_token=' + 'ACCESS_TOKEN';
feedUrl += '&link=' + 'SHARE_LINK';
feedUrl += '&redirect_uri=' + 'REDIRECT_URI';
feedUrl += '&to=' + $('#fb-recipient').val();
$('#fb-feed-dialog').attr( 'src', feedUrl );
});
</script>
</body>
</html>
You can find a screenshot of a slightly more fleshed out solution at: http://i.imgur.com/0jTM391.png
I do lots of stuff in my javascript code for posting feed in page as m`, but how i can get permission through javascript with just one click.
This is my code.
<body>
<div id='fb-root'></div>
<script src='http://connect.facebook.net/en_US/all.js'></script>
<p>
<a href="javascript:;" onclick='postToFeed(); return false;'>Post to Group</a>
</p>
<p id='msg'></p>
<script>
FB.init({appId: "apid", status: true, cookie: true});
function postToFeed() {
FB.api('/page_id/feed', 'post',
{
message : "It's awesome ...",
link : 'http://csslight.com',
picture : 'http://csslight.com/application/upload/WebsitePhoto/567-grafmiville.png',
name : 'Featured of the Day',
from: 'pageid',
description : 'CSS Light is a showcase for web design encouragement, submitted by web designers of all over the world. We simply accept the websites with high quality and professional touch.'
},
function(response) {
alert(JSON.stringify(response));
});
}
</script>
</body>
Output of above script is
But i wan't to post as a BeCrazzy.com not Rajnish..!
simply, i want to post feed in page as a admin. please help me. :)
There is a tutorial here that shows you exactly how to do this:
https://developers.facebook.com/docs/howtos/login/login-as-page/
You will not be able to use the Facebook Javascript SDK to make the API call signed with the Page access token, you'll need to use something like jQuery.ajax() to do so.
I am using FB:Comments on my page using XFBML. When I post a comment, an error comes up with the message "This comment has not yet been published to Facebook"
This is the code that I am using apart from the fb:comments tag
<div id="fb-root"></div>
<script>window.fbAsyncInit = function() {
FB.init(
{appId :'APP ID',status:true,cookie:true,xfbml:true});
};
(function(){var e=document.createElement('script');
e.async=true;
e.src=document.location.protocol+'//connect.facebook.net/en_US/all.js';
document.getElementById('fb-root').appendChild(e);}());
</script>
It looks this problem comes with ".info" domains.
Or it might be that this happens with top level domains with 4 or more letters, like .info, .name or .mobi, though I haven't investigated into all of them.
What attributes do you have set on the fb:comments tag? I believe all that's doing is the facebook connect/login side of things. Have you got the correct OG tags in place? You could also add in code to subscribe to the add comment event and see what's going on:
<script>
FB.Event.subscribe('comments.add', function(resp) {
for(var i in resp){
if(resp.hasOwnProperty(i)){
console.log(i + " " + resp[i]);
}
}
});
</script>
you may also need the channel file as detailed here https://developers.facebook.com/docs/reference/javascript/
I'm having the same problem. If I use the example page (http://developers.facebook.com/docs/reference/plugins/comments/) the comment gets posted on my wall, whereas doing the same in the comment box of my app does not, unless I pint them to a Facebook URL.
This works:
<fb:comments href="http://www.facebook.com/any-url/" ></fb:comments>
This doesn't if I do it from my app, but it works if I do it from my site (which doesn't really help for the purpose I need it to)
<fb:comments href="http://www.mysite.com/any-other-url/" ></fb:comments>
I just can't find out how to do this.
I'm building a website in scala (on google app-engine) and I made a facebook page for it and created a facebook application. All I want to do is to post to my own page's wall. I don't want to use java facebook api, 'cause I think it's way too much to do such a simple thing, but I really can't find a simple way to do so.
Is there a "low level" facebook api?? something simpler that works on posts and gets like twitter api for example?
Or any idea or alternative way to do so will be appreciated.
Thanks!
Facebook has an API that you can use, but it isn't quite as straightforward as the Twitter API. It would be a bit of overkill to write in support, unless perhaps you are prototyping something for someone else to use.
For an individual case, you might be best served by using Posterous- if you setup a Posterous account linked to your Facebook Profile, emailing facebook#posterous.com with the sender set as yourself will likely be the easiest way to post content to your wall. With this, you can use any SMTP email-capable library that supports either HTML emails or attachments. An added bonus is that you can also cross-post to twitter and a number of other places from Posterous by altering the destination Posterous email.
Incidentally, Posterous also has an API too, but I don't remember off the top of my head if you can redirect where posted materials are sent through the API. I've only used it for image uploads, myself.
Here is a strait forward out of the box wall feed example using Javascript SDK
SDK connection, just change the appId to your Applications own ID.
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : '135669679827333',
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true, // parse XFBML
//channelUrl : 'http://WWW.MYDOMAIN.COM/channel.html', // channel.html file
oauth : true // enable OAuth 2.0
});
if (window!=window.top) {
FB.Canvas.setAutoResize();
}
};
(function() {
var e = document.createElement('script'); e.async = true;
e.src = document.location.protocol +
'//connect.facebook.net/en_US/all.js';
document.getElementById('fb-root').appendChild(e);
}());
</script>
Post Script, notice the to: parameter, change this to the page you wish to post to. You can edit all other fields as needed.
<script language="javascript" type="text/javascript">
//<![CDATA[
function feedthis() {
FB.ui({ method: 'feed',
message: 'Testing Feed',
caption: 'This is the Caption value.',
name: 'Testing JS feed dialog on ShawnsSpace',
link: 'http://shawnsspace.com?ref=link',
to: '391793380398',
description: 'Testing property links, and action links via Feed Dialog Javascript SDK',
picture: 'https://shawnsspace.com/ShawnsSpace.toon.nocolor..png',
properties: [{ text: 'Link Test 1', href: 'http://shawnsspace.com?ref=1'},
{ text: 'Link Test 2', href: 'http://shawnsspace.com?ref=2'},
{ text: 'Link Test 3', href: 'http://shawnsspace.com?ref=3'},
{ text: 'Link Test 4', href: 'http://shawnsspace.com?ref=4'}
],
actions: [
{ name: 'Shawn', link: 'http://ShawnsSpace.com'}
]
});
};
//]]>
</script>
<button onclick="feedthis();">Post to Wall</button>
There are two steps required to do this:
Create a custom Facebook App and add it as a tab to your page
Set this newly added tab as the default when a new user visits your page
Details:
Create a custom Facebook App and add it as a tab to your page
This step is tricky but manageable for an average HTML programmer. To illustrate it best, I will point to a great tutorial on this:
http://how-to-create-facebook-app.koliber.com/
Set the tab as default
As the admin, go to your page
In the upper-right corner click on "Edit Page"
Under the heading "Default Landing Tab", select the tab which
contains the application you created earlier.
Well, I found there is a REST-like api:
This means that our Facebook method calls are made over the internet by sending HTTP GET or POST requests to the Facebook API REST server (http://api.facebook.com/restserver.php) . Nearly any computer language can be used to communicate over HTTP with the REST server.
Documentation here: http://wiki.developers.facebook.com/index.php/API