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
Related
I search a solution for the problem highlighted in this question.
Unfortunately, the accepted solution (which dates back to 21/11/2012) doesn't work anymore, as you can this in this demo.
Does someone know why?
Body
<div id="fb-root"></div>
<script src="http://connect.facebook.net/en_US/all.js"></script>
<script>
FB.init({
appId : '179378788777832',
status : true,
cookie : true,
xfbml : true
});
</script>
<div id="login">
You are not logged in to FB, Please click here to login.
</div>
<div id="container_notlike">
YOU DONT LIKE
</div>
<div id="container_like">
YOU LIKE
</div>
JS
var hideLogin = function(){
$("#login").hide();
}
var showLogin = function(){
$("#login").show();
}
var doLogin = function(){
FB.login(function(response) {
if (response.session) {
hideLogin();
checkLike(response.session.uid)
} else {
// user is not logged in
}
});
}
var checkLike = function(user_id){
var page_id = "40796308305"; //coca cola
var fql_query = "SELECT uid FROM page_fan WHERE page_id = "+page_id+"and uid="+user_id;
var the_query = FB.Data.query(fql_query);
the_query.wait(function(rows) {
if (rows.length == 1 && rows[0].uid == user_id) {
$("#container_like").show();
//here you could also do some ajax and get the content for a "liker" instead of simply showing a hidden div in the page.
} else {
$("#container_notlike").show();
//and here you could get the content for a non liker in ajax...
}
});
}
$(document).ready(function(){
FB.getLoginStatus(function(response) {
if (response.status === 'connected') {
hideLogin();
checkLike(response.authResponse.userID)
} else {
showLogin();
}
});
$("#login a").click(doLogin);
});
CSS
body {
width:520px;
margin:0; padding:0; border:0;
font-family: verdana;
background:url(repeat.png) repeat;
margin-bottom:10px;
}
p, h1 {width:450px; margin-left:50px; color:#FFF;}
p {font-size:11px;}
#container_notlike, #container_like, #login {
display:none
}
I search solution for hours but I didn't find anything what works.
Thank you for help.
Like Gating is not allowed anymore, that´s why it is not possible. The only reliable way to get that information is by authorizing a user with the user_likes permission and using /me/likes/[page-id]. But you will not get that permission approved for like gating in the Login Review.
People need to like something because they really want to, not because they get something for it:
Only incentivize a person to log into your app, enter a promotion on your app’s Page, or check-in at a place. Don’t incentivize other actions
Source: https://developers.facebook.com/policy/
Btw, you can also subscribe to the edge.create event to find out if a user just clicked your like button, but you can´t find out if the user liked it before: https://developers.facebook.com/docs/reference/javascript/FB.Event.subscribe/
The problem on that code is that FQL is deprecated .
You can't do what you want to, and thats why changes are necessary .
Your code would work if your app is old, created before changes that turns like gating not allowed, but anyway, you cannot use that for show content. You can use that kind of implementation for creating an interactive experience, where you can for example changing the content, saying "Thanks for liking".. Or "Connect with us, liking our page.." ..
You can also think about interfaces, where you show up the page plugin, and just after user likes, you say Thank you ... and hide the page plugin ... But user must always be able to close without liking .
For checking if user likes a page, you need use :
FB.api get on '/me/likes', and with the response ...
if (response.data[likes].name == "Coca-Cola")
or... better
if (response.data[likes].id == "40796308305") {
}
I repeat, One thing has nothing to do with another ..
You can check if user likes a page, but you cannot restrict content, based on this kind of resource .
There are other ways to check it, for exaple :
Get api call to userid/likes/pageid returns page info if user likes the page, and returns nothing if user does not like the page .
You will waste time trying do that for controlling content consumption .
Your app must be aprooved for asking user_likes permission, and its better you think about creating another experience for users, instead of submitting something like that .
I also think that content with good open graph for sharing, commenting and optional liking is very much more efetive, because i noticed that many people used to like and dislike the page after getting the content .
If you just... Prompt a FB.UI for sharing after 1 minute, for example, you will have much more results .. Aways positioning the page plugin in strategic places, people will naturally like your page ..
Than you can say change the page plugin element :
Thank you for liking, please share with your friends ....
Who would also like ...
Or use a callback for triggering the share dialog ..
OLD SCHOOL API CALL
The method FB.Event.subscribe() allowed apps to subscribe to a range of events, and define callback functions for when they fire, is deprecated .
Also FQL Query is deprecated .
For checking if user likes a page, you need user.likes permission, so you can try :
FB.api get on '/me/likes', and with the response ...
if (response.data[likes].name == "Coca-Cola")
or... better
if (response.data[likes].id == "40796308305") { }
There are other ways to check it, for exaple :
Get api call to userid/likes/pageid returns page info if user likes the page, and returns nothing if user does not like the page .
You can check if user likes a page using this call, but you cannot restrict content, based on this kind of resource .
2018 UPDATED SOLUTION
But nowadays, in 2018 the best method for is setting Webhooks .
Webhooks are a subscription based system between Facebook and your server. Your app subscribes to receive updates from Facebook via a specified HTTPS endpoint .
This allows your to app to receive notifications whenever there are updates to a chosen set of topics and their fields, so, you can track changes to most sections of the user's profile, such as About, Photos, Posts, Friends, and Likes.
Webhooks update notifications are sent as POST requests to a callback URL that you supply. Notifications can be lightweight, indicating only that a field has been updated, or can include the newly updated value .
webhooks user reference
Full list of user profile fields that you can subscribe to, such as About, Photos, Posts, Friends, and Likes.
webhooks page reference
The easiest way to set up your app to receive Webhooks updates is to use the App Dashboard's, check out Facebook Platform documentation for more info .
Webhooks documentation
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 created a web app using jquery mobile 1.1.1
As part of my app I built password retrieval functionality. If a user needs to reset their password, they fill out a form and receive an e-mail with a link that includes the address of the password reset page and two other parameters as such:
www.mywebapp.com/demo.html#resetPassword?x=123&y=123
The Initial Problem:
When the user clicks on the link, they see the home page of the web app even though the URL in the address bar says: www.mywebapp.com/demo.html#resetPassword?x=123&y=123 I understand that jQuery mobile does not support passing parameters after the hash, so I came up with the following solution.
A Solution with a small inconvenience:
I put together the following code, which reads the URL, captures my two parameters and redirects the user to the password reset page:
$( document ).bind( "pagebeforeshow", function() {
//cpe("parameter") will check whether the specified URL parameter exists
if(cpe("x") && cpe("y")){
//gpv("parameter") captures the value of the specified URL parameter
recovery.username=gpv("x");
recovery.token=gpv("y");
$.mobile.changePage("#resetPassword");
}
})
The Inconvenience, and thus my current problem:
When the user clicks on the link in the e-mail the browser fires up and opens the main page of the app, and then it quickly displays the #resetPassword page. I understand that this happens because I'm changing the page
$.mobile.changePage("#resetPassword");
But, how do I modify the above code so that the user won't see the main page at all, and go straight to the #resetPassword page?
Use an empty initial page with no content. By default do a changePage to what was your initial page, but in other cases, like the resetPassword case, you changePage to that instead.
I followed Raymond Camden's suggestion and added the following to my html:
<pre>
<!--Start of blank initial page: #initPage-->
<div data-role="page" id="initPage">
<div data-role="content"></div>
</div>
<!-- /page -->
</pre>
I also added the following to my javascript:
//init page -> path control hub
$( document ).bind( "pagebeforeshow", function() {
var pageid=$.mobile.activePage.attr('id');
if(pageid=="initPage"){
if(cpe("x") && cpe("y")){
recovery.username=gpv("x");
recovery.token=gpv("y");
$.mobile.changePage("#resetPassword");
}else{
$.mobile.changePage("#info");
}
}
})
It's working now.
So I have an iFrame app on a fan page, which includes the comments plugin. Is there a way I/any admin can receive a notification or email every time someone adds a comment?
You can subscribe to comment.create event and send the notification to admin in any way you prefer, once comment is created. Facebook itself doesn't provide such functionality.
This may looks like this (I assume Facebook JavaScript SDK is already loaded on page before doing this, read about it in documentation on Loading, anyway if you're using Social Comments Plugin it should be loaded already):
<script type="text/javascript">
FB.subscribe('comment.create', function(response){
// Here you need to do a call to some service/script/application
// to notify your administrator about new comment.
// I'll use jQuery ajax to call server-side script to illustrate the flow
$.post('//hostnamne/path/to/script', {
"action": "comment created",
"url_of_page_comment_leaved_on": response.href,
"id_of_comment_object": response.commentID
});
});
</script>
In your script located at http(s?)://hostnamne/path/to/script you can send a notification to admin, how to do it may vary on way you want it for example if you want to send an email you can use something like this php sample (aging this is just a flow sample, not real code you should use):
<?
$admin_email = 'root#localhost';
$commentID = $_REQUEST['id_of_comment_object'];
$page_href = $_REQUEST['url_of_page_comment_leaved_on'];
$message = "comment #{$commentID} was leaved on page {$page_href}";
mail($admin_email, "You have a new comment", $message);
?>
If you need to track the deletion of comments too you can use comment.remove event with similar flow...
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