We Keep Coding

Facebook Login Window Keeps Resizing and Flickering

I have added Facebook Login for my website. The login procedures all function normally. Although, the Login Window seems to expand itself vertically and flickers a lot. You cannot double click on a field to see the saved logins from the browser even, as the window seems to flicker and resize.
The code I have for the init is as below.
window.fbAsyncInit = function() {
//SDK loaded, initialize it
FB.init({
appId : 'my-app-id',
autoLogAppEvents : true,
status : true,
xfbml : true,
version : 'v2.9'
});
};
//load the JavaScript SDK
(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.com/en_US/sdk.js";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
//add event listener to login button
function facebookLogin(url) {
//do the login
FB.login(function(response) {
if (response.authResponse) {
//user just authorized your app
myLogin(response.authResponse.accessToken, url);
} else {
console.log("Error")
}
}, {scope: 'email,public_profile', return_scopes: true});
}
Why is this happening? What's the workaround? TIA.

How do I stop my Facebook share window from being blocked by popup-blocker?

I have my Facebook share window appearing when a function is called onClick of the Facebook share button.
The problem is that the Facebook window attempts to appear but is blocked by popup-blocker.
This is my first time creating a share window. Is there a simple solution to bypass the popup blocker?
Here is the button that triggers the function:
<button class="share-now" onclick="fb_callout();">
And here is the function that is called:
<script>
function fb_callout() {
(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));
}
window.fbAsyncInit = function() {
// init the FB JS SDK
FB.init({
appId : '162280254223002', // App ID from the App Dashboard
xfbml : true,
version : 'v2.5',
status : true
});
// Additional initialization code such as adding Event Listeners goes here
FB.ui(
{
method: 'feed',
href: 'http://www.example.com',
name: 'Example',
link: 'http://www.example.com',
picture: 'http://image.png',
caption: 'Caption',
description: 'words go here'
},
function(response) {
if (response && response.post_id) {
alert('Post was published.');
} else {
alert('Post was not published.');
}
}
);
};
</script>

Right now you are trying to open a popup not on user interaction, but in an asynchronous callback function. Of course the popup blocker detects that and blocks the popup (for a good reason). You need to do two things:
Load the JS SDK on page load, NOT on user interaction.
Call FB.ui directly on user interaction. It should be the only thing in the fb_callout function.

How to repopulate Facebook Sharing Dialog with javascript

What I'm trying to do is to make a form field that counts checked radio buttons with a specific value(integer 7). If the number of checked radio button is more than 3, then the system populates "Facebook" sharing dialog.
It works well if nothing goes wrong, but when I close the popup dialog, and click more radio buttons, even if the count is higher than 3, the Facebook dialog doesn't popup. I suspect that this is the problem due to initialization but I have no clue how to fix the issue. ( And because I suspect, I am not sure this guess is also directing me to the right solution )
The below is my javascript code to work this out.
I really hope to share any thought!
Best
<script>
$(".evaluation").click(function(){
console.log('clicked');
var count = 0;
$(".evaluation").each(function(index,item){
if (item.value == 7){
if (item.checked == true){
count ++;
}
}
});
console.log('count:' + count);
if (count >= 3){
window.fbAsyncInit = function() {
FB.init({
appId : '####',
xfbml : true,
version : 'v2.5'
});
FB.ui({
method: 'share_open_graph',
action_type: 'og.likes',
action_properties: JSON.stringify({
object:'http://www.###.com',
})
}, function(response){
// Debug response (optional)
console.log(response);
});
};
(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/sdk.js";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
}
}
);
</script>

You need to use window.fbAsyncInit and FB.init on Page load, one time. NOT on button click. Don't try to load and initialize the JavaScript SDK again, i assume the callback function will not get called because it is already initialized.
For example: http://www.devils-heaven.com/facebook-javascript-sdk-login/

Load facebook comments plugin Async

I am using facebook comments plugin in my site and it seems to me, that the plugin loads up when the page is loaded completely which I do not desire.
I have a lot of pictures on my page, and page is taking some time to fully load up. So i want the facebook comments to load even the page is still in progress.
Added this right after the body tag.
<div id="fb-root"></div>
<script>(function (d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s);
js.id = id;
js.async = true;
js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.4&appId=ID";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
Added that where i want to comments to appear.
<div class="fb-comments" data-href="{{ blog.share_url }}"
data-version="v2.3"
data-width="100%" data-numposts="5"></div>
Tried
Setting js.async = false;
Again, when the page load is complete, the comments plugin is visible after that.
Thoughts?

After months of research I am able to find the solution.
FB.XFBML.parse();
Will load your comments even if the page loading has not been completed.
<script>
window.fbAsyncInit = function () {
FB.init({appId: '1422501874658917', version: 2.4, xfbml: true});
// *** here is my code ***
if (typeof facebookInit == 'function') {
facebookInit();
}
};
(function () {
var e = document.createElement('script');
e.src = document.location.protocol + '//connect.facebook.net/en_US/all.js';
e.async = true;
document.getElementById('fb-root').appendChild(e);
}());
function facebookInit() {
console.log('Found FB: Loading comments.');
FB.XFBML.parse();
}
</script>

You should be able to just set async = false. This makes it blocking which will keep the pictures from loading until the comments have loaded. It also depends how you call the js file which loads the images. I prefer placing it at the bottom to make sure all html elements have loaded first.

Facebook doesn't reload canvas after authorization

I have the following JavaScript on a canvas app, which gets called if the user is NOT logged in (checked via php).
<script>
window.fbAsyncInit = function() {
FB.init({
appId : '(appid)',
xfbml : true,
version : 'v2.0'
});
FB.getLoginStatus(function(response) {
if (response.status === 'connected') {
console.log('Logged in.');
}
else {
FB.Event.subscribe('auth.statusChange',function(response) {
if (response.authResponse) {
setTimeout('window.location.reload()',0);
};
});
FB.login(function(){}, {scope: 'email,user_birthday,user_friends'});
}
});
};
(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/sdk.js\";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
The problem is that the Window doesn't reload even though I tell it to do so. I know the function is called after pressing "login" and accepting permissions, because if I include and alert it shows at that point.
As you can see I already tried wrapping it in a setTimeout, but that doesn't work.
If I press F5 after this, the page reloads and I'm logged in.
Help!

It turns out, all I had to do was change to:
top.location.href="https://apps.facebook.com/appname";
instead of window.location.reload()
This also prevents the browser from asking if it should resubmit the data.