We Keep Coding

Facebook Share Dialog Opening in iFrame inconsistent

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);

FB is not defined, yet Javascript code runs smoothly

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

MessengerExtensions.requestCloseBrowser doesn't seem to work

I'm using a webview in my Facebook Messenger chatbot for payment and MessengerExtensions.requestCloseBrowser is supposed to close the webview window and return the user back to the chat flow - but it doesn't work. The docs say it works and I tried to do exactly what they said; apparently I am missing something. Does anyone see what I'm missing here?
I am hosting the webview in a rails 4.2 app, so the js is in a separate file. I'm using jquery to handle the event. Here is the code:
the button in the view that should trigger the action (using slim):
button type="button" class="chat-button" id="closeButton" Done!
the .js file:
$(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/messenger.Extensions.js";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'Messenger'));
$(function() {
$("#closeButton").click(function() {
alert("hit me");
MessengerExtensions.requestCloseBrowser(
function success() {},
function error(err) {
alert(err)
}
);
return false;
});
});
window.extAsyncInit = function() {
alert("js sdk finished loading");
};
Note that both alerts do fire, one when the sdk is loaded, and one when the button is clicked. But the webview does not close as advertised. BTW - the error returned is 2071010. What am I missing?

messenger_extensions needs to be set to true.
"attachment": {
"type": "template",
"payload": {
"template_type": "button",
"text": "Check this out!",
"buttons": [
{
"type": "web_url",
"url": "https://yourpage.com",
"title": "Some Title",
"webview_height_ratio": "compact",
"messenger_extensions": true
}
]
}
}

I filed an issue with Facebook and they had just resolved another issue that resolved this one also. A new release of Messenger on IOS and my code suddenly worked as advertised. Thanks to all for your interest.

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/

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.