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.
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 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.
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(){
...
}
});
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 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.