Facebook's Javascript SDK has a method called getLoginStatus that stalls (and never fires the callback passed into it) while an image request on the page also stalls (i.e. the browser doesn't receive a 200 or 404 for a very long time.)
If you wait an extremely long time and the browser (?) finally closes out the attempt to fetch the image, the SDK continues on its merry way.
What might be going on, and is there a way to prevent it? It's awfully inconvenient when a user can't sign in or sign up just because of an image request.
Blocking (HTML):
<img src="..." />
Non-Blocking (with CSS):
#someDiv {
background-image: url(...) no-repeat;
width: xxx;
height: xxx;
}
Non-Blocking (with JS):
var img = new Image();
img.onload = function () {
document.getElementById('someDiv').appendChild(img);
};
img.src = "...";
Try with solution number 2 or 3 - there are also many preloader plugins for JavaScripts making it easier for you to load a lot of images asynchronously, for example: http://thinkpixellab.com/pxloader/
Another solution would be to load smaller images first and load the hires ones asynchronously.
When you use the initialization code from the Facebook SDK website, by default it wants to wait for the page to be fully loaded be for running certain events, like the fbAsyncInit function.
I'm not sure of an "officially supported" way to bypass this, but you could load the Javascript source yourself and call the routines outright (i.e. not in the async wrapper).
This is a barebones example that stalled like you mentioned using the Facebook SDK initialization procedure but works fine with this workaround.
<html>
<head>
<title>This is a test</title>
<script src="http://connect.facebook.net/fr_FR/sdk.js"></script>
<script language="javascript">
<!--
var loggedIn = false;
var authenticated = false;
FB.init({
appId : '{your app ID here}',
xfbml : true,
version : 'v2.0'
});
FB.getLoginStatus(function(response) {
if (response.status === 'connected') {
// the user is logged in and has authenticated your
// app, and response.authResponse supplies
// the user's ID, a valid access token, a signed
// request, and the time the access token
// and signed request each expire
var uid = response.authResponse.userID;
var accessToken = response.authResponse.accessToken;
loggedIn = true;
authenticated = true;
} else if (response.status === 'not_authorized') {
// the user is logged in to Facebook,
// but has not authenticated your app
loggedIn = true;
} else {
// the user isn't logged in to Facebook.
}
});
function testLogin()
{
alert("Logged in: " + loggedIn + "\nAuthenticated: " + authenticated);
}
// -->
</script>
</head>
<body>
Testing!
<button onclick="testLogin()">Test login?</button>
<img src="http://deelay.me/5000/ http://example.com/image.gif">
</body>
</html>
I'm not sure how this will affect integration with your site, but I can't imagine it would be a problem. If anything I suppose it's worth a shot!
Do you have any adblockers setup? I had a similar problem with a different API and Adblock Pro was causing some issues.
Related
This question already has an answer here:
Facebook ignoring OG image on first share
(1 answer)
Closed 6 years ago.
First of all hi and thanks in advance to anyone who can help with this because I've been going crazy over this for weeks now.
So I've got a website which lists gif taken from my mobile application (which are then stored on AWS and my visitors ( I haven't found a use for me to have users) can share these gifs on facebook using the facebook sdk.
The problem appears when I try sharing an image for the first time
This is what the share dialog shows the first time I click on my sharing button:
http://i.stack.imgur.com/lNVNF.png
and then I close and reclick the same button and now it works:
http://i.stack.imgur.com/YsDUm.png
Now I've been trying to find a way to make this work on the first sharing attempt but to no avail.
I am using meteor in combination with biasport:facebook-sdk and Amazon S3 for the hosting of my files.
Edit here is the code used:
FRONT SIDE
HTML
<div class="facebook share">
<img src="/gallery/fb.png">
</div>
Javascript
Template.*templateName*.events({
'click .facebook': function(e){
e.preventDefault();
e.stopPropagation();
// this is in a modal so I store the data I need
// (events have photos which in turn contain a url to the gif
var url = Session.get('event').photos[Session.get("id")].url;
FB.ui({
method: 'share',
href: url
});
}
SERVER SIDE
JAVASCRIPT
if(Meteor.isClient) {
window.fbAsyncInit = function() {
FB.init({
appId : 'APP_ID',
status : true,
xfbml : true,
version : 'v2.5'
});
};
}
Edit: I found a manual solution using exec future and curl
so first I added a call to a meteor method on the share that updates the facebook crawler
JAVASCRIPT
Template.*templateName*.events({
'click .facebook': function(e){
e.preventDefault();
e.stopPropagation();
// this is in a modal so I store the data I need
// (events have photos which in turn contain a url to the gif
var url = Session.get('event').photos[Session.get("id")].url;
Meteor.call('updateCrawler', url, function(){
FB.ui({
method: 'share',
href: url
});
});
}
Then I defined my meteor method as such
JAVASCRIPT
Meteor.methods({
updateCrawler: function(url){
var future = new Future();
cmd = 'curl -X POST -F "id=' + url + '" -F "scrape=true" -F "access_token={my_access_token}" "https://graph.facebook.com"';
exec(cmd, function(error){
if (error){
console.log(error);
}
future.return();
});
future.wait();
}
});
it's ugly but since I'd have to wait for the crawler to update and it works I'll leave this here for future use for someone maybe
Edit2:
I did not use og tags at all since I was simply sharing a url to aws directly and not a url to my website
I worked around this problem by calling the Facebook API direct from the server to make it scrape the og data by requesting info on the page. First time round it doesn't have the image cached but second time it does so this workaround does the initial call before sharing.
Use an access token for your facebook app and call the below in an ajax call and await the response before opening share dialog. Replace Google address with your own uri encoded address https://graph.facebook.com/v2.5/?id=http%3A%2F%2Fwww.google.co.uk&access_token=xxxxx
EDIT:
As per comments, here is my server side method for calling this which I use when posts etc are inserted to make the initial call and prompt a scrape from fb:
var getTheOGInfo = function (link)
{
if (!link || link.slice(0, 4).toLowerCase() != "http"){
throw new Meteor.Error("og-info-bad-url", "Function requires an unencoded fully qualified url");
return false;
}
var url = "https://graph.facebook.com/v2.5/{{{{id}}}}?access_token={{{{token}}}}&fields=og_object{id,description,title,type,updated_time,url,image},id,share";
var token = Meteor.settings.private.fb.token;
if (!token){
throw new Meteor.Error("og-info-no-token", "Function requires a facebook token in Meteor.settings.private.fb.token");
return false;
}
var link_id = encodeURIComponent(link);
url = url.replace('{{{{token}}}}', token).replace('{{{{id}}}}', link_id);
var result = HTTP.get(url, {timeout:1000});
return result;
}
Or for your purposes you may not want anything that might be blocking so you could change the last two lines to be aynchronous:
var result = HTTP.get(url, {timeout:1000});
return result;
//Replace with non blocking
HTTP.get(url, {timeout:1000}, function(err, result){console.log('something asynchronous', err, result);});
return true;
I'm wanting to implement the "Login With Facebook" that's common on websites but I'm having trouble grasping the whole concept and if anyone could assist me with this I'd be most appreciative.
I've been reading the documentation under this link https://developers.facebook.com/docs/facebook-login/ for days but I still don't "Get It".
Let's start with...
In the documentation, it says the JS SDK is easiest to use (for whom I dont know) but I'm thinking the NON JS version would be better and faster (and easier for me to grasp) but I don't know what to do. I'm "Stuck"
My main problem is I don't understand how I am suppossed to be able to insert an Auto Incrementing ID along with the person's first and last name into my DB. There's NOTHING or NOWHERE in the Facebook code where I could specify a DB, Table or Column so how is this data suppossed to get into my DB to log the user in??
I have a classifieds on my site of which I'm attempting to create a FB login for but as I said above, I'm stuck and could use help as I have only an intermediate level of knowledge regarding PHP and MySql
Like discussed in comments, here's example using JS SDK
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> <!-- jQuery library, makes things easier. -->
<title>FB example</title>
</head>
<body>
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
// init the FB JS SDK
FB.init({
appId : YOUR_APP_ID, // App ID from the app dashboard
status : true, // Check Facebook Login status
xfbml : true // Look for social plugins on the page
});
// Additional initialization code such as adding Event Listeners goes here
};
// 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'));
/*
This function gets information about user and alrets user's name.
*/
function getUserInfo() {
FB.api('/me', function(response) {
$.ajax({
url: "ajax.php", //url to send ajax request to
data: {
json: response, // Key => value pairs of items to send
},
success: function(ajaxResponse) { // upon successful request
alert(ajaxResponse); //Alert whatever response we got.
}
})
})
}
/*
This function gets the login status of user
*/
function getLoginStatus() {
FB.getLoginStatus(function(response) {
if (response.status === 'connected') { //User is connected to Facebook and authorized your app
getUserInfo();
} else if (response.status === 'not_authorized') { //User is connected to Facebook, but hasn't authorized your app
login();
} else { //User is not connected to Facebook
login();
}
});
}
/*
Function promts user to log in and asks for permissions
*/
function login() {
FB.login(function(response) {
if (response.authResponse) {
getUserInfo();
} else {
alert('User cancelled login or did not fully authorize.');
}
}, {scope: 'email'}); // Comma separated permissions
}
</script>
<a href="javascript:getLoginStatus()"/>Login</a>
</body>
</html>
This is very simple example. On the page you will see link "Login". Upon pressing it you'll be either asked to login (if you're not logged into Facebook, or you haven't authorized app yet), or it will show popup with your name. Most of the code has been taken from JavaScript SDK documentation
EDIT:
To add user's data to your database, i would suggest making AJAX call from the getUserInfo() function. Replace alert part with ajax call to certain php file, which you will create and pass it the data from response variable (which contains data about user, like response.name and response.email). In the php file itself insert the information you got into database.
ANOTHER EDIT:
I've updated the code once again, namely i added jQuery library (easier for me to make ajax calls in it, although it's not much different from plain JS).
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
And updated getUserInfo() function to make ajax request to ajax.php.
In ajax.php i've made only one line:
print_r($_REQUEST['json']);
This will simply print out whatever data was send via ajax, and you will see it in popup. Next step would be checking out what information you get, and take whatever you need (it's $_REQUEST['json'] is simple array), and insert it into db.
I am using the js sdk and getting the basic information such as name, location, id. Great but I need just one more thing and that is email. So I read here that email requires extended permissions. I also read here using fb.login how to ask for extended perms.
In my code from this tutorial here I don't call fb.login yet the visitor gets prompted to login and grant app permissions if they aren't. How is that done? The register button (modified slightly from tutorial) is a div with a class that styles it.
<div class="fb-login-button" data-show-faces="false" data-width="400" data-max-rows="1">Register</div>
Well I inspected the "register" button and found it rendered quite transformed but I never found an onclick or some clue as to how a user clicking on the button event is handled. My GUESS is that the iframe that comes from the styling has a src and the event must be on fb side.
So going back to my script I thought perhaps fb.login was with fb.init and I could add my perm request there but there is no fb.login?? I thought maybe to put it in the else branch below but nothing is there now and it works...minus extended perms for email?
window.fbAsyncInit = function ()
{
FB.init({...removed for concise....});
//If user authorizes using fb account info:
FB.Event.subscribe('auth.authResponseChange', function (response)
{
if (response.status === 'connected')
{
...removed for concise code...
}
else if (response.status === 'not_authorized')
{
// the user is logged in to Facebook,
// but has not authenticated your app
}
else
{
// the user isn't logged in to Facebook.
//**HERE IS WHERE I WOULD HAVE THOUGHT TO PUT FB.Login**
}
});
};
So what is eluding me is how the pieces fit together in the puzzle. I KNOW I need to ask for extended permissions to get the json to include email but not sure where to make the perm. request at???
This code here is the actual code in the page so you can see my entire sdk implementation.
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function ()
{
FB.init({
appId: 12324, // App ID
status: true, // check login status
cookie: true, // enable cookies
xfbml: true // parse XFBML
});
//If user authorizes using fb account info:
FB.Event.subscribe('auth.authResponseChange', function (response)
{
if (response.status === 'connected') {
// the user is logged in and has authenticated your
// app, and response.authResponse supplies
// the user's ID, a valid access token, a signed
// request, and the time the access token
// and signed request each expire
var uid = response.authResponse.userID;
var accessToken = response.authResponse.accessToken;
// send access token to server so we can fill in fields
var form = document.createElement("form");
form.setAttribute("method", 'post');
form.setAttribute("action", '/mypage');
var field = document.createElement("input");
field.setAttribute("type", "hidden");
field.setAttribute("name", 'accessToken');
field.setAttribute("value", accessToken);
form.appendChild(field);
document.body.appendChild(form);
form.submit();
} else if (response.status === 'not_authorized') {
// the user is logged in to Facebook,
// but has not authenticated your app
} else {
// the user isn't logged in to Facebook.
}
});
};
// 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));
</script>
Since you are not using the SDK itself to login, but the login button, you have to request the permission via the scope parameter, set as data-scope="…" on the button itself, see https://developers.facebook.com/docs/reference/plugins/login/
The other alternative would be to remove the button, and call FB.login onclick on a button/link of your own making.
I have used the following code for open the Facebook Pay Dialog box for My application app on Facebook but getting error :
<div id="fb-root"></div>
<script src="http://connect.facebook.net/en_US/all.js"></script>
<p> <a onclick="placeOrder(); return false;">Buy</a></p>
<script>
FB.init({appId: 367311903326028, status: true, cookie: true});
function placeOrder() {
// If using mobile, this is where you place the
// iOS native app check for credits (see below)
// Assign an internal ID that points to a database record
var order_info = 'abc123';
// calling the API ...
var obj = {
method: 'pay',
order_info: order_info,
action: 'buy_item',
dev_purchase_params: {'oscif': true}
};
FB.ui(obj, callback);
}
var callback = function(data) {
if (data['order_id']) {
return true;
} else {
//handle errors here
return false;
}
};
function writeback(str) {
document.getElementById('output').innerHTML=str;
}
</script>
<br>
Error :
There Was a Problem Processing Your Payment
Sorry, but we're having trouble processing your payment.
You have not been charged for this transaction. Please try again.
Please can anyone suggest me what going wrong here.
Thanks
Without more information it's really hard to know what the issue is here. Specifically, what response are you supplying to the payments_status_update request? Can you show us the code that handles those requests, or an example of your response?
I've personally seen that error message in cases where our callback was responding incorrectly to the payments_status_update request, but it could be something else.
Seems to me that you are using the old currency payments, which is a bad idea as they are going to be deprecated in two months.
Check that in your FB App settings you are NOT using the new Local currency payments, as if you have it enabled (which is the default setting now), then the only way that you can make a purchase is with the new way. Using the old way will fail.
Deactivating the new payment method will allow you to use BOTH the new and the old method.
I am getting FB undefined , when i write following code , i have successfully added the necessary files for facebook using window.fbAsyncInit , the thing is if i write following code under "click" event then it works well but not at the time of pageshow in jquery mobile. this is happening might be because the facebook js files are loading bit late. but i want to check the user status on every page to restrict unnecessary or anonymous access.
$("#details").live( "pageshow", function() {
FB.getLoginStatus(function(response) {
if (response.status === 'connected') {
// the user is logged in and connected to your
// app, and response.authResponse supplies
// the user's ID, a valid access token, a signed
// request, and the time the access token
// and signed request each expire
var uid = response.authResponse.userID;
var accessToken = response.authResponse.accessToken;
console.log("INSIDE ME");
} else if (response.status === 'not_authorized') {
// the user is logged in to Facebook,
//but not connected to the app
console.log("OUTSIDE ME");
} else {
// the user isn't even logged in to Facebook.
}
});
});
Put the jQuery live() assignment inside the window.fbAsyncInit as well. So that way it is only applied to the DOM element after FB has a chance to initialize.