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.
Related
I have implemented Facebook Share dialog with javascript and I am having consistency issues.
I have a button to open the dialog and when I do so from the page it automatically appears in an iframe on the page which is great! Exactly what I want.
Now here's the issue, I have another page that redirects to this exact same page and it is set to call the exact same function for the facebook share dialog if a get variable is set. It calls it but now it opens in a new window instead of in an iframe and I have no idea why. I will literally close the window and click on the button and it will open it perfectly in an iframe.
$(document).ready(function() {
window.fbAsyncInit = function() {
FB.init({
appId : '######',
autoLogAppEvents : true,
xfbml : true,
version : 'v3.2'
});
#if(isset($_GET['share']))
facebook_share();
#endif
};
(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 = "https://connect.facebook.net/en_US/all.js";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
$('.fb-share').click(function() {
facebook_share();
});
});
function facebook_share(){
FB.ui({
method: 'share',
mobile_iframe: true,
href: '######',
}, function(response){
if (response && !response.error_message) {
success.style.display = "block";
} else {
error.style.display = "block";
}
});
}
Figured this out myself, simply setting a timeout before making the call to the function caused it to act the same way. Everything must not have been fully loaded upon the original call.
setTimeout(facebook_share, 3000);
I've only started Javascript a few days ago, so this question might seem basic.
I've written some Javascript code to interact with the Facebook API.
The goal is to display all the pages managed by a user when he logs in via a Facebook login button.
The code seems to work as it does what it's supposed to do.
However, the console gives me the error "FB is not defined".
I've read all the other questions about this error and it seems to be linked to the asynchronous loading of the SDK, but i can't seem to figure this out.
How come i still get this error?
******EDIT 07/07/2017*******
Google Chrome's console gives me the "FB is not defined error" at the FB.getLoginStatus line of this portion of code:
function checkLoginStatus() {
FB.getLoginStatus(function (response) {
if (response.status === 'connected') {
getPagesList();
} else {
document.getElementById('pageslist').style.display = 'none'; //Hides the div when people are not connected
document.getElementById('pagestatistics').style.display = 'none'; //Hides the div when people are not connected
}
});
}
It also points to the following part, which seems to be the issue since, when i remove it from the code, the error disappears:
//Here below, _5h0o is the class of the logout button
//This checks the login status AFTER the user clicks on logout thanks to setTimeout
document.getElementsByClassName('_5h0o').onclick = setTimeout(function() {
checkLoginStatus();
}, 100);
Here is the full code:
//Initialize Facebook SDK + Check Login Status
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : 'xxxxxxxx',
xfbml : true,
version : 'v2.9'
});
checkLoginStatus();
};
(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/fr_FR/sdk.js";
fjs.parentNode.insertBefore(js, fjs);
} (document, 'script', 'facebook-jssdk'));
</script>
//Facebook Login Button
<div class="fb-login-button" data-scope="public_profile, read_insights, pages_show_list" data-width="300" data-max-rows="1" data-size="large" data-button-type="login_with" data-show-faces="false" data-auto-logout-link="true" data-use-continue-as="false" onlogin="checkLoginStatusAfterLogin()" onclick="checkLoginStatus()"></div>
<script>
//Checks login status after people click on the Facebook button (useful for logout event)
function checkLoginStatus() {
FB.getLoginStatus(function (response) {
if (response.status === 'connected') {
getPagesList();
} else {
document.getElementById('pageslist').style.display = 'none'; //Hides the div when people are not connected
}
});
}
//Checks login status after people log in via the Facebook button
function checkLoginStatusAfterLogin() {
FB.getLoginStatus(function (response) {
if (response.status === 'connected') {
getPagesList();
document.getElementById('pageslist').style.display = 'inline-block';
} else {
checkLoginStatus();
}
});
}
//Here below, _5h0o is the class of the logout button
//This checks the login status AFTER the user clicks on logout thanks to setTimeout
document.getElementsByClassName('_5h0o').onclick = setTimeout(function() {
checkLoginStatus();
}, 100);
</script>
//Display the pages (in the form of clickable spans) for which the user has reading rights
<div id="pageslist"></div>
<script>
function getPagesList() {
FB.api('/me/accounts', {fields:'id, name'}, function(response){
document.getElementById('pageslist').innerHTML = ''; //Makes sure the div is cleared before populating it with the list of pages
for (i=0; i<response.data.length; i++){
document.getElementById('pageslist').innerHTML += '<span class=\"pageslistspan '+response.data[i].id+'\" onclick="showStatistics(this.classList[1])">'+response.data[i].id+' '+response.data[i].name+'</span>'+'<br>';
}
});
}
</script>
Try encapsulating your getPagesList inside document ready.
$(document).ready(function(){
getPagesList(){
...
}
});
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.
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/
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.