I have this Facebook application profile page:
http://www.facebook.com/developers/editapp.php?app_id=122313254494566#!/apps/application.php?id=122313254494566
which is associated with my iframe-based Facebook application, Gem Spinner:
http://apps.facebook.com/gemspinner/
My understanding from reading recent Facebook documentation is that in the last couple months Facebook changed the method by which users can "bookmark" an app ("bookmarking" as I understand it, is the process of adding an icon for the application to the user's list of applications on the left side of the Facebook home page). My understanding is that bookmarking is now supposed to happen automatically the first time the person uses the app.
But that's not happening for my app. When you go there, it just shows you the app page and lets you play the game. There is no confirmation message, like I see with other apps, checking if I want to allow this app to access various information from my Facebook account. And there is no bookmark/icon added to the application list on my home page.
So I'm obviously missing something. I tried to follow the instructions here: http://developers.facebook.com/docs/guides/canvas/, including the part on bookmarks, but again that part makes it sound like it will just happen automatically.
My app has been approved for the Facebook directory (although it is not yet showing up in searches of the directory). And it's not in "sandbox" mode.
Perhaps there are some Facebook API calls I must make to let the user "install" the application. If so, I'd love to know what those are.
Apparently the thing I was missing is that it's necessary to call FB.login() from within your javascript code in order to get facebook to "automatically" bookmark the application for the user. I guess this makes a certain amount of sense, since the user has to be "authenticated" with your app before your app (or Facebook on behalf of your app) can make any changes to the user's account, such as adding a bookmark. Nonetheless, it seems like it could have been the case that it added the bookmark without the authentication, and certainly reading the Facebook documentation one would think that simply visiting the app would create the bookmark, regardless of the authentication.
Anyway, another problem was how to make the authentication happen in a smooth way. It may be that there's a more clever and more functional way to do this using page redirects, but it seems like this new API wants to show a pop-up window for the login UI. If that popup is triggered by a button press (i.e., a button that says/means "click here to authenticate with this application"), you get the popup without the terrible browser popup warning. But if you just call the FB.login() function yourself, you get the terrible warning.
So, to get around this, I had my code trigger the button event, and it worked (at least on Firefox). The code is:
<body>
<div id="fb-root">
</div>
<script src="http://connect.facebook.net/en_US/all.js" type="text/javascript"></script>
<script type="text/javascript">
FB.init({
appId : 'your app id here',
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : false // parse XFBML
});
function fblogin() {
FB.getLoginStatus(function(response) {
if (response.session) {
// logged in and connected user, someone you know
} else {
// no user session available, someone you dont know
FB.login(
function(response)
{
if (response.session)
{
// user successfully logged in *or* user was already logged in
// *and* user has now been successfully authenticated for this app
// *and* a bookmark added by Facebook for this app
}
else
{
// user cancelled login
}
} );
}
});
}
</script>
<a id="clickme" href="#" onclick="fblogin();return false;"></a>
... the rest of your page here ...
<script type="text/javascript">
document.getElementById( "clickme" ).onclick();
</script>
</body>
This all seems pretty hackish, but I don't know a better way to make the authentication happen automatically while avoiding the popup warning.
It seems to me that the FB.login() function is confusingly named. It really seems to mean, "If the user is not logged in, present the login UI. But if the user is already logged in, or if the user successfully logs in using the UI, also authenticate the user for this application, including automatically bookmarking this application for the user." So maybe at least loginAndAuthenticate() would be a better name.
Related
I've put a Like Gate on a few of my Facebook Pages and I'm getting a lot of complaints saying that people can't access the content via their mobile device since the mobile version of the facebook website, and the facebook apps for ios/android, don't support tabs on Facebook.
I see there are services out there (I'm not sure how legit they are) that offer a way to create a mobile like gate for your page tab, but I can't find any documentation on how they do it. These services are not suitable for me, because the content on my tab is custom and dynamic.
So, how can I create a interstitial page for a mobile page that requires the visitor to have liked my Page on Facebook before they can proceed? This has to work for new users, as well as existing users who re-visit the tab and without requiring an install to an application.
Thanks!
One approach you can take for a mobile site is to check that the user has liked the page in question via the JS SDK.
If you have a logged-in user to your application, you can Subscribe to the authResponseChange FB event within your JS SDK initialization, or call a function directly to make an API request to verify if the user is a fan of your page.
In your initialization:
FB.init({appId: YOUR_FB_APP_ID_HERE });
window.fbAsyncInit = function() {
// React to a user clicking an on-page Like button:
FB.Event.subscribe("edge.create", verifyUserLikesPage);
}
You can verify that the user likes the appropriate page in the like handler:
function verifyUserLikesPage() {
FB.api("/me/likes/"+FBID_OF_PAGE_TO_ENSURE_THEY_LIKE, function(apiResponse){
if (apiResponse.data && apiResponse.data.length > 0)
// User likes the page. Enabled them to proceed
else
// User does not like the page. Require they click Like.
}
}
More information on the edge.create subscribe via JS available here: https://developers.facebook.com/docs/reference/javascript/FB.Event.subscribe/
My site has the option of registering with and without facebook. When you register with facebook though, extra information is needed. This is fine, as I use fb:registration and specify extra fields.
However, the problem is, when a user comes to the site and hasn't registered, sees the facebook login button and clicks it, the link brings them to facebook to login and the app is registered and bypasses the registration form I have.
I there a way to redirect a non-registered user that is not logged in with facebook to a registration page instead of adding the app?
You can add the registration-url parameter to the login button as documented in the Login + Registration Flows section.
<fb:login-button
registration-url="yoururl" />
This isn't documented so I don't know if it will continue to work but if your using the HTML5 version of the login button then you can use:
<div class="fb-login-button" data-registration-url="yoururl">Login with Facebook</div>
Not 100% sure i understood you but..
Going on the assumption that you only want users who have an active FB browser session and have authorized the use of your application with their account to see your login button/a particular page you could try this right after your FB.init:
FB.getLoginStatus(function(response) {
if(notLoggedIntoYourSite && response.status != 'connected') {
// Redirect user or hide login button
}
})
Ref: http://developers.facebook.com/docs/reference/javascript/FB.getLoginStatus/
On my page I have the FB login button code. A user is able to join my site by authorizing it with Facebook, by pressing the FB login button. My site lets users log out and many of them like to do that.
After I authorize my FB account for the site, log out of my site, I can't login any more because the session event never fires (unless I de-authorize it). I press the FB Login button a white page opens, then closes right away, and nothing happens. This seems to be because the FB session doesn't change (it already existed) so the event is never fired. So I'm wondering if there's a way around this aside from hiding FB's login button and making my own if their session exists. I tried "auth.login" but that doesn't fire either.
Button:
<fb:login-button perms="email,user_about_me,user_birthday">Login with Facebook</fb:login-button>
Event:
FB.Event.subscribe('auth.sessionChange', function (response) {
document.location.href = "/FacebookLogin.aspx";
});
Steps to reproduce:
Click FB login and authorize app (in this case my site). User is redirected to my FB login page and an account on my site is created. The user is now logged into my site.
Logout of my site using my sites logout button
Click the FB login button to log back into site. This is where the user should be redirected back to that same page from step 1 so they can be logged into the site.
All that happens in step 3 is a white page pops up for a couple seconds and then closes. The site is already authorized and the session event isn't fired.
This also happens if I authorize with one browser and then go back with a different browser. Just get the popup, it closes and nothing happens. I must be missing something important.
I had the same problem but, after a while, i solved it doing this:
function after_login_button(){
FB.getLoginStatus(function(response) {
if (response.status=="connected") {
//User logged in! Do your code here
}
}, true);
}
You also need to call the onlogin event on the login-button:
<fb:login-button onlogin="after_login_button()" perms="email,user_about_me,user_birthday">Login with Facebook</fb:login-button>
This worked for me =).
PS - By the way, I'm using OAuth 2.0 and you should migrate your application to it too because in the developers zone, they say:
"Remember that all apps must migrate to OAuth 2.0 by October 1".
Sorry for eventual english errors =S
Please make sure that you are doing FB.Event.subscribe within
window.fbAsyncInit = function() {
FB.init({
......
)};
FB.Event.subscribe('auth.login', function(response){
.....
)};
};
I had the same problem. After I put it inside the fbAsyncInit, it started accepting the events "auth.login"..
Hope this will work for you.
I'm making a Facebook page app, and I need to get some extra permissions from my users, this prompts a pop up window which a lot of people have blocked, I remember seeing a lot of apps directing to a grant permission page with a callback url to handle this.
Is this depricted ? If not how can I use the embedded page rather the a pop up?
I'm sorry if this sounds like a lazy question, but it's been so long since I've been involved with Facebook and their API seems like a massive moving target, any tips would be greatly appreciated.
Thank you.
Try this little function in straight Javascript.
<script>
function addPermissions(permissions){
FB.login(function(response) {
if (response.session) {
if (response.perms) {
// user is logged in and granted some permissions.
} else {
// user is logged in, but did not grant any permissions
}
} else {
// user is not logged in
}
}, {perms:permissions});
}
</script>
<a onclick="addPermissions("email, publish_stream,...");">Click me</a>
If you don't pop the window at page load and do it in response to a link/button click the popup blocker shouldn't block it, aka the User actually requested the Pop to work. (I've had it working this way)
You can alternatively create the relevant authorisation URL and just send the user there.
Initially you send them there via dialog or redirect.
You can just send them there again requesting the additional permissions aka Scope.
Details:
https://developers.facebook.com/docs/authentication/
The URL for the dialog can either pop into a new window or redirect to it.
A new window normally pops from using the Javascript API.
I believe the popup method is deprecated. The standard method is to redirect to the facebook oauth dialog with a callback. There is an alternative popup method for iframe apps that isn't really a popup that would be blocked, it's more of an ajax popup.
The information you need as far as usage of the dialog I had mentioned is located at
http://developers.facebook.com/docs/reference/dialogs/oauth/
I have a Facebook like button on the top of my page and on every product page. How I can find out, where and who clicked the like button (on which product, or on the top of the page?).
You can't because it's restriction of their privacy policy
I've never done anything like that myself, but it looks like you can use Javascript to fire off an event when a given button is clicked -- so you would assign each button on each page a unique identifier and send that back to the server on click. Relevant bits:
After you have obtained the application id you first of all have to add Facebook’s namespace to your html element on the website you wish to add the “Like” button to:
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="http://www.facebook.com/2008/fbml">
Then, on the actual page, you include:
window.fbAsyncInit = function() {
FB.init({appId: 'YOUR_FACEBOOK_APP_ID', status: true, cookie: true, xfbml: true});
FB.Event.subscribe('edge.create', function(href, widget) {
// Do something, e.g. track the click on the "Like" button here
alert('You just liked '+href);
});
};
The actual post has a bit more detail.
EDIT: As others have mentioned, this only covers which button is clicked, and not who has clicked it. In addition to being technically impossible and in violation of Facebook's privacy policy, tracking individual Facebook users on your site without their explicit permission is an unethical invasion of their privacy. Respect your users.
You cannot know your users' Facebook account, it goes against Facebook's privacy policy.
As for where on the page, use Javascript.
If a user has connected to the application the xfbml like button is configured to, then yes you can collect the information the user has shared with your application. You can not share the analytical type data though. For your use only.
As per http://developers.facebook.com/policy/ art. II sec. 2,3
** Storing and Using Data You Receive From Us**
You will only request the data you need to operate your application.
You may cache data you receive through use of the Facebook API in
order to improve your application’s user experience, but you should
try to keep the data up to date. This permission does not give you any
rights to such data.
But in art. I sec. 7
Special provisions for apps on Pages:
b. When a user visits your Page, if they have not given explicit
permission by authorizing your Facebook app or directly providing
information to your Page, you may only use information obtained
from us and the user's interaction with your Page in connection with
that Page. For example, although you may use aggregate analytics for
your individual Page, you must not combine information from any other
sources to customize the user's experience on your Page and may not
use any information about the user's interaction with your Page in
any other context (such as analytics or customization across other
Pages or websites).
Step 1
Create a Facebook Page, such as http://www.facebook.com/pages/SomethingFacebookUsersLike/
Step 2
Create a custom Facebook Like button configured for the above URL. Place the Like button on your Web page.
Step 3
Create an event handler for when a Facebook user clicks the like button...
FB.Event.subscribe("edge.create", function(targetUrl) {
// When the Facebook Like Button is clicked (Likejacked), kick off
// a request to the server immediately to see who just now "liked" the page.
// That person who clicked the like button is probably the same person.
dojo.xhrGet({
url : server_url + fb_page_id,
handleAs : "json",
load : function(response, ioArgs) {
// response should have the facebook user data
}
});
});
Step 4
Server-side process makes a request for the fan page of the Facebook Page...
https://www.facebook.com/browse/page_fans/?page_id=[insert_facebook_page_id]
Replace the page ID for the Facebook Page in the above URL. On that page, the top most Facebook user listed, which will include a link to their profile, is the person who most recently clicked the Like button. Visit users profile and screen scape whatever information is sought after. This information would include at least their "real name" and Facebook ID.
Longer technical explanation can be found here:
I Know Your Name, and Probably a Whole Lot More (Deanonymization via Likejacking, Followjacking, etc.)
http://blog.whitehatsec.com/i-know-your-name-and-probably-a-whole-lot-more-deanonymization-via-likejacking-followjacking-etc/