Facebook Application Tab URL - facebook

I have a facebook application that can be added to fan pages as a tab. The application requires that users are authenticated in order to use it. This can be accomplished by using requirelogin=1 in a link which is visible only to users who have NOT added the application. This part works fine.
However, after the user has given my application permission from the dhtml pop up that requirelogin opens, I want the tab to reload. In order to do that, I need the full URL to be included in the link as follows:
<a href="http://www.facebook.com/pages/PAGE_NAME/PAGE_ID?v=app_APP_ID" requirelogin=1>Authorize</a>
I cannot figure out how to get the full url or, at least, the PAGE_NAME to build this url dynamically. Seems like the app should be able to know where it is without any special permissions.

When your Tab is loaded, the API passes you a Signed Request that contains, amongst other things, a page array contain id, liked & admin. You can use that to dynamically pull the page id that's currently calling your code.

If you have the PAGE ID and APP ID, this is what you do:
http://www.facebook.com/profile.php?id=PAGE_ID#v=app_APP_ID
For example:
http://www.facebook.com/profile.php?id=282955631557#v=app_278523304881

In the new scheme, the # no long works. One needs to use
http://www.facebook.com/profile.php?id=PAGE_ID#v=app_APP_ID
To carry parameters to the app, it has to be in a parameter called 'app_data'
http://www.facebook.com/profile.php?id=PAGE_ID#v=app_APP_ID&app_data="..."
To carry multiple parameters, the best strategy is to encode app_data in Json.

All of the above answers will not work (redirect you only to page stream) or are deprecated now. The best solution thou is using JS:
// called when like button, box, etc is rendered
FB.Event.subscribe("xfbml.render", function() {
// assigns click to that thing
FB.Event.subscribe("edge.create", function(response) {
window.location.reload(); // reload frame only
});
});
You'll also have to load and init facebook JS SDK. If you don't know how to do it, use this:
<script>
document.onload = function(){
(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/pl_PL/all.js";
d.getElementsByTagName('head')[0].appendChild(js);
}(document));
window.fbAsyncInit = function(){
FB.init({
appId : <PASTE_YOUR_APP_ID_HERE>,
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true // parse XFBML
});
FB.Event.subscribe("xfbml.render", function() {
FB.Event.subscribe("edge.create", function(response) {
window.location.reload();
});
});
}
}
</script>

Related

FacebookJavaScriptLoginHelper fails to authenticate user on first page refresh

I'm creating a Facebook app for mobile devices. Such application is displayed within a mobile browser, unlike Facebook canvas pages which are held in an iframe.
I'm using a mix of JS and PHP SDK to authorize and authenticate a user. The user needs to be already logged into Facebook to use my app. If not, they need to log in with Facebook login button. As a bridge between JS and PHP SDKs I'm using FacebookJavaScriptLoginHelper.
Part of my Facebook.php library doing the job:
<?php
// Initialize the SDK
FacebookSession::setDefaultApplication($this->app_id, $this->app_secret);
// Create the login helper
$this->helper = new FacebookJavaScriptLoginHelper();
try {
$this->session = $this->helper->getSession();
} catch(FacebookRequestException $ex) {
// When Facebook returns an error
} catch(Exception $ex) {
// When validation fails or other local issues
}
if ($this->session) {
// User logged in
$this->session = new FacebookSession($this->session->getToken());
}
?>
Facebook JS init:
<script type="text/javascript">
window.fbAsyncInit = function() {
FB.init({
appId: '{my app id}',
status: true,
xfbml: true,
cookie: true
});
}
FB.getLoginStatus(function(response) {
console.dir(response);
});
</script>
The above code works fine but there's a specific case when it fails. Let's assume I have two tabs open in my browser: in the first tab I have my app open, in the second one - I'm logged into Facebook. Two scenarios can take place:
I log out of Facebook and refresh the tab with my app. The result is correct:
FacebookSession is NULL
response.status from FB.getLoginStatus is 'unknown'. The user is not
logged in.
I go to the second tab, log back into Facebook and refresh the first tab with my app. The result is incorrect, but only on the first refresh:
FacebookSession is still NULL, even if
response.status of FB.getLoginStatus is 'connected'
The reason behind this fail on first refresh seems to be obvious: In the moment of reloading the page PHP SDK is triggered before Facebook cookie is refreshed. However, it's never a problem when the user logs out - in this case, somehow FacebookSession is updated instantly, as expected.
How come it does not work the same when the user logs into Facebook?
Does this help?
Subsequent calls to FB.getLoginStatus will return data from this cached response. This can cause problems where the user has logged into (or out of) Facebook since the last full session lookup, or if the user has removed your application in their account settings.
To get around this, you call FB.getLoginStatus with the second parameter set to true to force a roundtrip to Facebook - effectively refreshing the cache of the response object.
FB.getLoginStatus(function(response) {
// this will be called when the roundtrip to Facebook has completed
}, true);
Source: https://developers.facebook.com/docs/reference/javascript/FB.getLoginStatus
Section: Roundtrips to Facebook's servers

Facebook Page Tab : Error 191 (The specified URL is not owned by the application) but URLs are set

For a contest page, I use Page Tab within a Facebook App, but I can't set a Share dialog without getting this error.
window.fbAsyncInit = function()
{
FB.init({ appId: '##### (correctly set)',
status: true,
cookie: true,
xfbml: true,
oauth: true});
FB.Canvas.setAutoGrow();
}
window.fbAsyncInit = function()
{
FB.ui({
method: 'feed',
name:'name',
link:'https://expertsmo.ca/_fb/concours/1', // https://apps.facebook.com/expertsmo
caption:'test'
});
}
Here is the App conf
I checked many posts on this error code, most of these problems are caused by the URL not being set; in my case, URL is well set and I still get this error. I tried many many things, still not working ( this solution of a similar case doesn't seem to work because I can't find the field "Website With Facebook Login").
I also use PHP sdk to find out if the user likes the page already, or not.
Really, I can't find the solution to this problem ... any idea? Thanks...
You include the JavaScript SDK two times in the code, only one time with an App ID (that is different from the FB.init call). Make sure you are using the latest code from the Facebook docs and clean up old stuff. That error message comes up when the App ID is not correct, the settings should be fine.
https://developers.facebook.com/docs/javascript/quickstart/v2.0
You also use window.fbAsyncInit in a wrong way, this should only be used once when you open the page. FB.ui should get called on user interaction or you will also get problems with popup blockers.
Btw, you should put ALL JavaScript code right before the closing body tag (for many reasons). Not sure why you put the async function after the opening body tag.

Share data from my web application on Facebook Wall

Usecase - I have my web application and I want to post some data from my application onto my Facebook wall manually when a user clicks on a Link.
I'm currently using Share Link as follows -
https://www.facebook.com/sharer/sharer.php?u=&t=titleABC" target="_blank">
Share on Facebook
Issue -
I see that a new window opens to post the data. My data also gets posted to my wall, but I want the title to be populated with data from my application rather than asking the user to "Write Something".I want the text box to get populated with the message from the title(t from the url parameter) rather than user editable.
Is there a way to do this.
Sharing your content with Share button is absolutely simple. In my case I did it like this for a button i have in my html with id sharebuttonfacebook
$("#sharebuttonfacebook").click(function() {
var msg = "Hi This is my wonderful website";
FB.ui({method: 'feed',
name: 'MCQ Nation ',
link: 'http://www.mcqnation.com/Trail3/pyramid.php?..dyanmic stuff..' ,
picture: 'http://www.mcqnation.com/Trail3/fbapp2.png',
caption:'CLICK ON THE IMAGE TO GO TO OUR WEBSITE',
description: msg ,
message: 'AAA'});
return false;
});
In addition to this you need to register an app.
Nothing could be simpler.
Just go to http://www.facebook.com/developers/app
and register your new app.
They will give you a simple code that has to be put just after the body which goes like -
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : 'YOUR_APP_ID', // App ID
channelUrl : 'CHANNEL FILE LOCATION', // Channel File This file has just one line which you will find at facebook developers
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true // parse XFBML
});
</script>
With these two things in place you can Decide what to share on facebook.
Also in the function we have made above you can substitute whatever variables you like hence make it dynamic. Hope this answers your Question.
PS: If it could get better than this you dont need any permission from the user!

Facebook logout button and redirect after logout

I use this code
<fb:login-button autologoutlink="true" perms="user_likes" size="large"></fb:login-button>
to create a login/logout fb button.
Everything works, after the login, the login button become a logout button. But If the user click on the logout button, the current page is not refreshed and so all the things that should appear only when the user is authenticated are still there until a manual page refresh is done.
This doesn't happen if I get the logout url (Javascript SDK)
$logoutUrl = $facebook->getLogoutUrl();
and then implement a logout button myself; in that case a proper "next" parameter (with the url of the current page) is passed and the current page is reloaded.
I still would like to use the first solution, is it possible to make it use the "next" parameter?
Do the redirect yourself - add this to JavaScript, somewhere after FB.init():
<script>
FB.Event.subscribe("auth.logout", function() {window.location = '/logout'});
</script>
This function will fire when logout through the FB button happens.
For integrated authentication (Facebook + Asp.Net MVC), I just use Javascript and FormsAuthentication.SignOut();
function LogoutFacebook() {
FB.logout(function (response) {
window.location = "/facebook/logout/";
}); }
Above answer by Piskvor did it for me. Its crazy how many hours I've spend trying to figure this out.
Main problem with plugins such as this Facebook for CakePHP is that they don't come with updates. APIs, especially popular ones like Facebook, change all the time because they are being imporved. If the guy who wrote it initially as a hobby moves on with his life and stops updating the SDK people who are less knowladgable on how to alter these things become stuck.
WORKING CODE:
Nevertheless, thanks for a great solution Piskvor, here is my piece of code for
apps/plugins/facebook/views/helpers/facebook.php
$init .= $this->Html->scriptBlock(
<<<JS
window.fbAsyncInit = function() {
FB.init({
appId : '{$appId}',
session : {$session}, // don't refetch the session when PHP already has it
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true // parse XFBML
});
FB.Event.subscribe("auth.logout", function() {
window.location = '/users/logout'
});
{$callback}
};
The key piece of code here is:
FB.Event.subscribe("auth.logout", function() {
window.location = '/users/logout'
});
{$callback}

Facebook Connect disable auto login

I integrated the graph api facebook connect but if we are login to facebook, we will automatically login to the site with facebook connect as well. Is there any way we let the user clicks on fb "Login" only then the user is connected to the site with their fb account?
Now the user is automatically login to the site without the option to choose whether they would want to use their facebook account. If they want to logout from the site, they need to logout from facebook completely only then they can logout from the site with facebook connect as well.
Anyone can help me or give some tips how to go about?
Thank you!
I had this same problem on a recent website, and found a way to overcome it. My solution allowed a user to already be logged into facebook on their computer, yet not have it auto login on my website, then they can login with Facebook Login button and finally when they logout it won't log them out of Facebook on their computer, just on my website (much like Digg does with facebook).
To do it I was using https://github.com/facebook/php-sdk/ to check within PHP if there was an active facebook session with the user and the website (which would cause the auto login). If there was, I would not echo the auto login code:
FB.init({
appId : '<?php echo $facebook->getAppId(); ?>',
session : <?php echo json_encode($session); ?>, // don't refetch the session when PHP already has it
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true // parse XFBML
});
FB.Event.subscribe('auth.login', function() {
window.location = "process-login.php";
});
but instead just render my own facebook login button that would link to "process-login.php".
process-login.php would set the custom $_SESSION variable that told my website someone was logged (whether via my own system, or via facebook), and then reload the referring page (using $_SERVER['HTTP_REFERER']) which would now display the user as logged in via Facebook since my own $_SESSION variable was now set. To log them out (without logging them out of Facebook entirely, just my website), I would just load a logout script that removed the $_SESSION variable.
The example.php (in the php-sdk on github) was very helpful at finding my solution, though I had to customise it significantly to make it work with my existing system. It at least helped me see how to access the facebook session variable in PHP (stored in $me in the example).
Hope this helps you if its still a problem, or that it helps someone else in this situation.
EDIT:
Turns out I still had some issues with auto login on the rare occasion. To fix it I removed the event.subscribe('auth.login') and make a facebook button that called the following function to check login status before subscribing to the auth.login even. Here is the function:
function check_login_session(){
FB.getLoginStatus(function(r){
if(r.session){
window.location = '/process-login.php';
}
else{
FB.Event.subscribe('auth.login', function(response) {
window.location = '/process-login.php';
});
FB.login();
}
});
}`
I had the same problem, I guess that you are using the scripts provided by facebook. In that case you have a function associated with the window.fbAsyncInit event. This happens everytime that the page is loaded.
At the end of this method you have the code:
FB.getLoginStatus(function(response) {
statusChangeCallback(response);
});
The function statusChangeCallback verifies your user's facebook status (connected, authorized, or unknown). Here, if the user is "connected" you log him into your site. Well that's the problem, you are always trying to log the user in with facebook.
This must only happen on click, so you should erase those lines
hello dear I think you have made your question so confused. Your question is not stating what actually do you want. As for as I have understood I think you want to connect the user to you site through facebook connect and you want when user clicks on facebook logout, it automatically logouts from your site.
if my understanding about your question is right then simply let the user to login through facebook and do logins in your system in FB.Event.Subscribe event.
Use the following code for login button
<fb:login-button perms='email' autologoutlink='true'>
When user will allow your his facebook account to connect with your site
<div id="fb-root">
<script>
window.fbAsyncInit = function() {
FB.init({appId: "Your APP ID",
status: true,
cookie: true,
xfbml: true});
FB.getLoginStatus(function(response) {
if (response.session) {
// Send here parameters that logins to your system through your website login system
} else {
}
});
FB.Event.subscribe("auth.login", function(response) {
window.location.reload();
});
FB.Event.subscribe("auth.logout", function(response) {
window.location.reload();
//Send the Parameters that logouts user from your website through your website logout system;
});
};
(function() {
var e = document.createElement("script");
e.type = "text/javascript";
e.src = document.location.protocol +
"//connect.facebook.net/en_US/all.js";
e.async = true;
document.getElementById("fb-root").appendChild(e);
}());
and put the above whole code right after your <body> tag
If You have:
FB.Event.subscribe('auth.login', function() {
fbLogin(this);
});
Try to comment it /* fb.Event..... */