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