FB.ui apprequests dialog - popup goes blank and invitations are not sent - facebook

The initialization code:
window.fbAsyncInit = function() {
var bheight = $(document).height() + 50;
FB.init({
appId: appid,
frictionlessRequests : true,
status: true,
cookie: true,
xfbml: true,
oauth: true});
FB.Canvas.setSize({ width:760,height:bheight });
};
// Load the SDK Asynchronously
(function(d){
var js, id = 'facebook-jssdk', ref = d.getElementsByTagName('script')[0];
if (d.getElementById(id)) {return;}
js = d.createElement('script'); js.id = id; js.async = true;
js.src = "//connect.facebook.net/en_US/all.js";
ref.parentNode.insertBefore(js, ref);
}(document));
The following code is called with an onclick:
function sendRequestViaMultiFriendSelector(msg){
FB.ui({
method: 'apprequests',
message: msg
});
}
The popup is shown and the user can select some friends, but after submitting or cancelling, the window goes blank. The pop up is still there but white and empty. No errors logged in Firebug.
If I add a callback function it's never reached.
I've tried adding a self closing redirect_uri (redirect_uri: 'http://.../self_close.html') but after submitting the popup redirects to self_close.html and even when the content of that html is just <script type="text/javascript">window.close(); </script> the popup won't close nor send the request to the selected friends.
Strangely enough a couple weeks ago this was working, you could select some friends and send them invitations and the popup would close.
My app is running in localhost, is in Sandbox mode and I've tried inviting other App's admins, test users, normal users, etc. In the past it used to work.
What could be happening now?
Similar questions that I've check:
FB.ui popup window doesn't close
Facebook app request dialog not sending request
http://facebook.stackoverflow.com/questions/4646441/how-to-close-a-facebook-sdk-dialog-opened-with-fb-ui
Thanks in advance!
UPDATE
I've added a test method using method:feed instead of method:apprequests
function feed_test() {
// calling the API ...
var obj = {
method: 'feed',
name: 'Feed test',
caption: 'Test',
description: 'Test'
};
function callback(response) {
document.getElementById('msg').innerHTML = "Post ID: " + response['post_id'];
}
FB.ui(obj, callback);
}
When I call upon this method with an onclick the popup is shown, I enter my comment, submit it and the popup goes blank too. The popup is not closing but the post is published in my wall.
UPDATE 2
I've realized that if I open the app in the browser, outside Facebook (using http://facebookapp.localhost/) the apprequest works fine and it opens the popup without the disabled address bar. When I try to invite friends inside FB the popup is shown with a gray address bar containing this:
https://www.facebook.com/dialog/apprequests?api_key=XXXXXXXXXX&app_id=XXXXXXXXXX&display=popup&frictionless=true&locale=en_US&message=XXXX&next=http%3A%2F%2Fstatic.ak.facebook.com%2Fconnect%2Fxd_arbiter.php%3Fversion%3D5%23cb%3Df2b013bbfaa712%26origin%3Dhttp%253A%252F%252Ffacebookapp.localhost%252Ff3267a4c771122%26domain%3Dfacebookapp.localhost%26relation%3Dopener%26frame%3Df3ad1f46b651196%26result%3D%2522xxRESULTTOKENxx%2522&sdk=joey
I wonder what could be the difference in using the app inside and outside FB, may be there are some js problems.
FIXED
Today I tryied again and the problem was gone. Also even when the popup wasn't closing and the callback function wasn't being called the invitations were sent. My test users forgot to check it they were getting them... anyway, mysterious bug, mysterious fix.

Related

how to send uri to facebook in the right format

I need help on facebook login wth app. I have a website http://отдых-сицилия.рф. I did configured this in facebook app, and I am trying to login from my application.
I have the code below:
window.fbAsyncInit = function() {
FB.init({
appId : 'code', // App ID
channelUrl : '//отдых-сицилия.рф/channel.php', // Channel File
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true // parse XFBML
});
// Here we subscribe to the auth.authResponseChange JavaScript event. This event is fired
// for any authentication related change, such as login, logout or session refresh. This means that
// whenever someone who was previously logged out tries to log in again, the correct case below
// will be handled.
FB.Event.subscribe('auth.authResponseChange', function(response) {
// Here we specify what we do with the response anytime this event occurs.
if (response.status === 'connected') {
// The response object is returned with a status field that lets the app know the current
// login status of the person. In this case, we're handling the situation where they
// have logged in to the app.
// FB.login({scope:'email,hometown'});
FB.api('/me', function(response) {
document.getElementById('nome').value = response.name;
if(response.email){
document.getElementById('email').value = response.email;
}
document.getElementById('fbusername').value = response.username;
document.getElementById('fbname').value = response.first_name;
document.getElementById('fbsurname').value = response.last_name;
document.getElementById('nazionalita').value = response.locale;
if(response.hometown){
document.getElementById('citta').value = response.hometown.name;
}
});
} else if (response.status === 'not_authorized') {
// In this case, the person is logged into Facebook, but not into the app, so we call
// FB.login() to prompt them to do so.
// In real-life usage, you wouldn't want to immediately prompt someone to login
// like this, for two reasons:
// (1) JavaScript created popup windows are blocked by most browsers unless they
// result from direct interaction from people using the app (such as a mouse click)
// (2) it is a bad experience to be continually prompted to login upon page load.
FB.login({scope:'email,hometown'});
} else {
// In this case, the person is not logged into Facebook, so we call the login()
// function to prompt them to do so. Note that at this stage there is no indication
// of whether they are logged into the app. If they aren't then they'll see the Login
// dialog right after they log in to Facebook.
// The same caveats as above apply to the FB.login() call here.
FB.login({scope:'email,hometown'});
}
});
};
// Load the SDK asynchronously
(function(d){
var js, id = 'facebook-jssdk', ref = d.getElementsByTagName('script')[0];
if (d.getElementById(id)) {return;}
js = d.createElement('script'); js.id = id; js.async = true;
js.src = "//connect.facebook.net/it_IT/all.js";
ref.parentNode.insertBefore(js, ref);
}(document));
this code works very good on other 2 websites.
What I noticed is that when I open the login popup, the url is:
redirect_uri=http%3A%2F%2Fwww.facebook.com%2Fdialog%2Freturn%2Farbiter%3Frelation%3Dopener%26close%3Dtrue%23origin%3Dhttp%253A%252F%252F%25D0%25BE%25D1%2582%25D0%25B4%25D1%258B%25D1%2585-%25D1%2581%25D0%25B8%25D1%2586%25D0%25B8%25D0%25BB%25D0%25B8%25D1%258F.%25D1%2580%25D1%2584%252Ff32358e929d241c&app_id={APP_ID}&display=popup
so, the website url is not correct. How can I pass this url correctly?Or what cand I do?
Thank you!

Empty Facebook popup after login

The first time my users accesses the app, everything works fine. The user gets a popup with the question to authorize my app. But then, the next session(ex. refresh), he gets an empty popup that closes itself in an instant.
I believe it's Facebook asking for a new access token, but the problem is that I don't find it user friendly. When a popup opens and closes itself that fast, the user thinks there's something wrong or that he missed something.
Here's the code:
window.fbAsyncInit = function() {
FB.init({
appId : '', // App ID
channelUrl : '', // Channel File
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true // parse XFBML
});
// Here we subscribe to the auth.authResponseChange JavaScript event. This event is fired
// for any authentication related change, such as login, logout or session refresh. This means that
// whenever someone who was previously logged out tries to log in again, the correct case below
// will be handled.
FB.Event.subscribe('auth.authResponseChange', function(response) {
// Here we specify what we do with the response anytime this event occurs.
if (response.status === 'connected') {
// The response object is returned with a status field that lets the app know the current
// login status of the person. In this case, we're handling the situation where they
// have logged in to the app.
if(accessToken)
{
//console.log("Connected WITH accesToken");
testAPI();
}
else{
// console.log("Connected WITHOUTaccesToken");
FB.login(function(response) {
// handle the response
uid = response.authResponse.userID;
accessToken = response.authResponse.accessToken;
//console.log(uid);
//console.log(accessToken);
}, {scope: 'friends_location, user_location, user_relationships'});
}
} else if (response.status === 'not_authorized') {
// In this case, the person is logged into Facebook, but not into the app, so we call
// FB.login() to prompt them to do so.
// In real-life usage, you wouldn't want to immediately prompt someone to login
// like this, for two reasons:
// (1) JavaScript created popup windows are blocked by most browsers unless they
// result from direct interaction from people using the app (such as a mouse click)
// (2) it is a bad experience to be continually prompted to login upon page load.
//alert("You're logged in on FB but not on the APP");
FB.login();
} else {
// In this case, the person is not logged into Facebook, so we call the login()
// function to prompt them to do so. Note that at this stage there is no indication
// of whether they are logged into the app. If they aren't then they'll see the Login
// dialog right after they log in to Facebook.
// The same caveats as above apply to the FB.login() call here.
// FB.login();
//alert("You're offline on FB");
FB.login();
}
});
};
// Load the SDK asynchronously
(function(d){
var js, id = 'facebook-jssdk', ref = d.getElementsByTagName('script')[0];
if (d.getElementById(id)) {return;}
js = d.createElement('script'); js.id = id; js.async = true;
js.src = "//connect.facebook.net/en_US/all.js";
ref.parentNode.insertBefore(js, ref);
}(document));
// Here we run a very simple test of the Graph API after login is successful.
// This testAPI() function is only called in those cases.
function testAPI() {
FB.api('/'+uid+'/friends?fields=name,location,picture&accesstoken='+accessToken, function(response) {
}
//<img border="0" src="console.log(response.data[0].picture.data.url)">
}
});
}
//Logout
function fbLogout() {
//FB.init();
FB.logout(function (response) {
//Do what ever you want here when logged out like reloading the page
//window.location.reload();
});
}
How can I prevent this empty popup?
You are explicitly calling FB.login, vs FB.getLoginStatus, which is a wrapper around the login dialog. This is why you always get the popup.
Instead, first call getLoginStatus, and only if this fails, you present a button which triggers login.

Facebook javascript sdk An active access token must be used to query information about the current user

In my code I have
FB.api('/me/friends', function(response) {
if(response.data) {
//TODO : what to do if no. of friends is more than 5000 (pagination by fb)
friends_data=response.data;
dijit.registry.byId("mainWidget_div").set_friends_data(friends_data);
} else {
alert("Error!");
}
});
And this gives an error. But, if I call this function manually(on the console), there's no error
FB.api('/me/friends', function(response){r=response;});
//wait a while
r
and now r.data is an array of my friends.
I checked the network panel and I gather that when I call this manually, an access token automatically gets inserted in the request url and when it is getting called via the code, the access token doesn't get inserted.
The full fb sdk loading code in my application is this:
<script type="text/javascript">
// You probably don't want to use globals, but this is just example code
var fbAppId = "{{facebook_app_id}}";
// This is boilerplate code that is used to initialize the Facebook
// JS SDK. You would normally set your App ID in this code.
// Additional JS functions here
window.fbAsyncInit = function() {
FB.init({
appId : fbAppId, // App ID
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true // parse page for xfbml or html5 social plugins like login button below
});
// Put additional init code here
dojo.ready(function(){
FB.api('/me/friends', function(response) {
if(response.data) {
//TODO : what to do if no. of friends is more than 5000 (pagination by fb)
friends_data=response.data;
dijit.registry.byId("mainWidget_div").set_friends_data(friends_data);
} else {
alert("Error!");
}
});
});
};
// Load the SDK Asynchronously
(function(d, s, id){
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) {return;}
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/all.js";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
The answer from Brent Baisley and another answer to a different question, helped me figure out what was wrong.
You can't call FB.init() dependent methods right after FB.init() because it loads asynchronously. Even loading the data asynchronously like in dojo.ready() doesn't help. You have to wrap the code in FB.getLoginStatus().
My guess would be that you are trying to get the list of friends before the Facebook API is fully initialized. What is the error you are seeing?
You are registering the FB.api call to be run on DOM ready (dojo.ready). That might be causing it to load out of sync, even though it's all wrapped in fbAsyncInit. The friends API call itself has no dependency on the DOM, so I wouldn't wrap it in a dojo call. You're not doing that in the console and it's working.
I'm no javascript expert. If I made a possibly incorrect guess, the reason this happens could have to do with javascript hoisting.

Deleting action on Timeline using JS SDK

I have an 'Add To Timeline' button and I can already add posts to the timeline using another function, but now I want to be able to obtain the requestID of an action so that I can delete it from another javascript function I have. I been searching everywhere but can't find a good example so that I can learn how to obtain the ID, I'm still confused on how to do it. This is the code:
<script type="text/javascript">
function deleteRead(requestId)
{
FB.api(
requestId,
'delete',
function(response) {
if (!response || response.error) {
alert('error...');
} else {
alert('Successfully Deleted!');
}
});
}</script>
Adding the Action ID number of a post directly works and I'm able to delete the post on my timeline. But I have to make it where it automatically obtains the id for each post.
Do I have to use the PHP SDK in order to obtain the requestID? This is the other code I am using:
<div id="fb-root"></div>
<script type="text/javascript">
window.fbAsyncInit = function() {
FB.init({
appId : 'I-have-my-app-ID-here', // App ID
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true // parse XFBML
});
};
// Load the SDK Asynchronously
(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/en_US/all.js";
d.getElementsByTagName('head')[0].appendChild(js);
}(document));
</script>
Even better, Is there a way where I can grab the requestID through PHP and pass it into a variable? depending on the post (if it's added to timeline), so that I can replace it with "requestID" to something like:
<?php echo $requestID; ?>
This way I can use the php code inside of my javascript where the requestID is and plus incase you want to use that same requestID that is obtained for something else in that same page. Example: if the post is added to Timeline it will show it's request ID number on that post page, incase you want to show the delete button only if its added to timeline, if it's not added, then don't show the delete button using a conditional statement.
There are two ways of doing this:
Store the IDs in a database for each action. This is not ideas as actions can be deleted from Facebook and can make it out of sync with your database.
Query the user's actions in real-time and use that to show a list of actions to delete. This is preferred.
Sample code:
// get activity from Facebook
$actions = $facebook->api('/me/' . $action_id );
// get ID of last action
echo $actions[0]['id'] );
You can then grab the ID of the post from above (e.g. $actions[0]['id']) and pass it to your JavaScript function or create a PHP function to delete the action. Optionally, you can loop through $actions to search if a particular action already exists, matching by URL, e.g.
if ( $actions[0]['data']['article']['url'] == $current_url ) {
...
}

How to track twitter follow us & facebook like us?

Is it possible to track users who like us or follow us on website. Also I want to track if some one unfollowing or unlike us. If there an api or any trick to do this?
Thanks to all
check out edge.create event - see more here: https://developers.facebook.com/docs/reference/javascript/FB.Event.subscribe/
edge.create - fired when the user likes something (fb:like).
edge.remove - fired when the user unlikes something (fb:like).
regarding capturing twitter event - see here: https://dev.twitter.com/docs/intents/events
Include widgets.js
<script type="text/javascript" charset="utf-8">
window.twttr = (function (d,s,id) {
var t, js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return; js=d.createElement(s); js.id=id;
js.src="//platform.twitter.com/widgets.js"; fjs.parentNode.insertBefore(js, fjs);
return window.twttr || (t = { _e: [], ready: function(f){ t._e.push(f) } });
}(document, "script", "twitter-wjs"));
</script>
Bind to an event when the user has clicked the Tweet Button:
twttr.events.bind('click', function(event) {
var click_type = event.region;
});
avs099 is correct and the link will provide some good info. But I thought I would post some further information to help others as they find this link.
I used the FB.init() function to call a setup function that creates the callback functions for the edge.create and edge.remove.
FB.Event.subscribe('edge.create',
function(response) {
alert('You liked the URL: ' + response);
//ajax back to the server.
var xmlhttp;
if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp = new XMLHttpRequest();
}
else {// code for IE6, IE5
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.open("POST", "YourCapturePage.php", true);
xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xmlhttp.send(response + "&add=1");
});
YourCapturePage.php or what ever processing page can then parse the response and add a record to your database back-end to track the usage of your like button on a given page. The response contains the info about what page was liked. Then you can do something similar for the edge.remove.