Very strange thing, the messenger checkbox plugin worked as a charm and then stopped from showing.
I'm getting the "Rendered" event fired but the checkbox's iFrame has height and width equal to 0.
If i manually change that, the plugin will become visible.
We also not getting the webhook response.
Any one has an idea where to start?
Here is the relevant code:
Checkbox element:
<div class="fb-messenger-checkbox"
origin="domain"
page_id="Our page id"
messenger_app_id="our app id"
user_ref="UniqueId"
allow_login="true"
size="small"
>
</div>
Events:
window.fbAsyncInit = function() {
FB.init({
appId : 'our app id',
xfbml : true,
version : 'v2.6'//our webhooks version
});
FB.Event.subscribe('messenger_checkbox', function(e) {
if (e.event == 'rendered') {
console.log("Plugin was rendered");//FIRED EACH TIME!
} else if (e.event == 'checkbox') {
if(e.state === "checked") {
chkbxplgnSelected = true;
}
else
chkbxplgnSelected = false;
console.log("Checkbox state: " + e.state);
} else if (e.event == 'not_you') {
console.log("User clicked 'not you'");
} else if (e.event == 'hidden') {
console.log("Plugin was hidden");
}
});
};
Things to note:
Plugin parent.parent.parent container has a position: fixed on it.
When loading the page in developer mode set to Mobile Devices, the following error is showed in the console:
(Only on mobile inspection)
Invalid 'X-Frame-Options' header encountered when loading 'https://www.facebook.com/v2.6/plugins/messenger_checkbox.php?allow_login=true&app_id=446487378882911&channel=https%3A%2F%2Fstaticxx.facebook.com%2Fconnect%2Fxd_arbiter%2Fr%2FFdM1l_dpErI.js%3Fversion%3D42%23cb%3Df2172ca0fd08e74%26domain%3Dcdn.tictuk.com%26origin%3Dhttps%253A%252F%252Fcdn.tictuk.com%252Ffea4c513e273dc%26relation%3Dparent.parent&container_width=0&locale=en_US&messenger_app_id=446487378882911&origin=https%3A%2F%2Fcdn.tictuk.com&sdk=joey&size=small': 'ALLOW-FROM https://www.facebook.com' is not a recognized directive. The header will be ignored.
Related
We've created a new Facebook App (not reviewed) and added the Messenger Product. We've connected our Facebook Page (Visible: Public) with our App and added a Webhook to the App. As described in the documentation we also have whitelisted our domain in the page settings. But still the plugin does not get rendered. Console output: 'Plugin was hidden'
When testing we're logged in as a Facebook user which has an admin role in the app as well as on the page.
Below you can see how we've integrated the messenger checkbox plugin. As origin we use our domain where the plugin is integrated.
<script>
window.fbAsyncInit = function() {
FB.init({
appId: '766805437589568',
autoLogAppEvents: true,
xfbml: true,
version: 'v9.0'
});
FB.Event.subscribe('messenger_checkbox', function(e) {
console.log("messenger_checkbox event");
console.log(e);
if (e.event == 'rendered') {
console.log("Plugin was rendered");
} else if (e.event == 'checkbox') {
var checkboxState = e.state;
console.log("Checkbox state: " + checkboxState);
} else if (e.event == 'not_you') {
console.log("User clicked 'not you'");
} else if (e.event == 'hidden') {
console.log("Plugin was hidden");
}
});
};
</script>
<script async defer crossorigin="anonymous" src="https://connect.facebook.net/en_US/sdk.js"></script>
<div class="fb-messenger-checkbox"
origin='https://example.com'
page_id=100378165398818
messenger_app_id=766805437589568
user_ref="%%uniqueIdForEveryRender%%"
allow_login="false"
size="large"
skin="dark"
center_align="true">
</div>
In the printscreen you can see the output from the dev console.
console output
We've already checked the following post Facebook messenger checkbox plugin is hidden.
Looks like it is a GDPR related issue:
https://developers.facebook.com/docs/messenger-platform/europe-updates#nov-30th-2020
In the table Affected features and APIs with mitigations there is an entry for the checkbox plugin:
So we have no choice but to wait until facebook switches the service back on.
Last year i build a form for one of our costumers, when visitors submitted the form they
got a message on the same page. But now he asks me if it is possible to
make a succes page if the form is filled in correctly.
I can't make it work. It's a bit out of my league.
So i hope anyone of you can help me out!
$(document).ready(function() {
$("#ajax-contact-form").submit(function() {
$('#load').append('<center><img src="ajax-loader.gif" alt="Currently Loading" id="loading" /></center>');
var fem = $(this).serialize(),
note = $('#note');
$.ajax({
type: "POST",
url: "contact/contact2.php",
data: fem,
success: function(msg) {
if ( note.height() ) {
note.slideUp(500, function() { $(this).hide(); });
}
else note.hide();
$('#loading').fadeOut(300, function() {
$(this).remove();
// Message Sent? Show the 'Thank You' message and hide the form
result = (msg === 'OK') ? '<div class="success">Uw bericht is verzonden, we nemen z.s.m. contact met u op!</div>' : msg;
var i = setInterval(function() {
if ( !note.is(':visible') ) {
note.html(result).slideDown(500);
clearInterval(i);
}
}, 40);
}); // end loading image fadeOut
}
});
return false;
});
<form id="ajax-contact-form" target="_blank" method="post" action="javascript:alert('success!');" >
Instead of displaying the "success" message, redirect to a new page:
window.location = successPageUrl;
Just redirect to success page after ajax success.
I've put together a test site to try and get facebook login working with the following code, but I get two errors showing up in FireBug which doesn't seem to effect the functionality of the web page when I just ignore them and carry on.
HTML:
<div class="fb-login-button" show-faces="true" autologoutlink="true" width="200" max-rows="1"></div>
<div id="FBLogin"><a id="FBLoginLnk" href="#" title="Login with Facebook"><img src="./login-button.png" /></a></div>
Javascript:
$(document).ready(function(){
$.ajaxSetup({ cache: true });
$.getScript('//connect.facebook.net/en_UK/all.js', function(){
FB.init({
appId: "012345678901234",
status: true, // check login status
channelUrl : '//website.co.uk/bla/channel.php', // Channel File
cookie: true,
xfbml: true, // parse XFBML
oauth: true
});
FB.Event.subscribe('auth.statusChange', function() {
console.timeStamp("Login even")
FB.getLoginStatus(function (response) {
if (response.status === 'connected') {
console.log("Connected Event");
// Good to go
} else if (response.status === 'not_authorized') {
console.log("Not Authorized Event");
NotLoggedIn();
}else{
console.log("Not Logged In Event");
NotLoggedIn();
}
});
});
FB.getLoginStatus(function (response) {
console.timeStamp("getLoginStatus")
if (response.status === 'connected') {
console.log("Connected");
} else if (response.status === 'not_authorized') {
console.log("Not authorised");
NotLoggedIn();
window.location = 'https://graph.facebook.com/oauth/authorize?client_id=012345678901234&scope=publish_stream&redirect_uri=http://www.website.co.uk/bla';
} else {
console.log("User not logged in status unknown");
NotLoggedIn();
window.location = 'https://graph.facebook.com/oauth/authorize?client_id=012345678901234&scope=publish_stream&redirect_uri=http://www.website.co.uk/bla';
}
});
});
$('div#FBLogin').click(function(){
window.location = 'https://graph.facebook.com/oauth/authorize?client_id=012345678901234&scope=publish_stream&redirect_uri=http://www.danthegeek.co.uk/bla';
});
});
function NotLoggedIn(){
console.timeStamp("notLoggedIn Called");
// Reset Website
}
The two errors I'm getting are with xd_arbiter.php?version=27 which seems to get called.
JSON.parse: bad control character in string literal
Line 13
JSON.parse: unexpected non-whitespace character after JSON data
Line 13
As a overview, The intention is to have the page auto-redirect to Facebooks login page (not a pop-up window as this doesn't display correctly on mobile devices). If logged in already, no re-direction happens but user can Log Out which will cause a Login button to be displayed which when clicked goes to the Facebook login page, again no pop-up. This all seems to work fine, but I'm not sure if the code structure is exactly how it should be. I don't believe this to be part of the fault. I really wanted to use the facebook social button to login but couldn't get this to work redirecting to the facebook login page, it only seems to cause a pop-up window which is why I show my own Login with Facebook button.
If it wasn't for firebug halting the code all the time saying there was a error I wouldn't even know there was a problem.
The javascript on my test page is quite complicated but even with everything stripped out and running as above I get this problem.
Any help greatly appreciated.
I am attempting to implement an asynchronous loading Facebook log in button, but the button disappears after 45 seconds (in Google Chrome only) and this error message is logged in the error console: "FB:login_button failed to re-size in 45s". How do I solve this problem?
Here are the errors that are logged in the error console:
Uncaught TypeError: Cannot read property 'style' of undefined connect.facebook.net.js:123
v connect.facebook.net.js:123
o.extend.constructor.ha connect.facebook.net.js:123
g.inform connect.facebook.net.js:40
(anonymous function) connect.facebook.net.js:123
ka connect.facebook.net.js:67
h.setWrapper.j connect.facebook.net.js:62
r.register.init.s connect.facebook.net.js:66
h.setWrapper.j connect.facebook.net.js:62
fb:login_button failed to resize in 45s
Here is the HTML:
<div class="fb-login-button" data-show-faces="false" size="xlarge" data-width="300" data-max-rows="1"></div>
Here is the Javascript:
ADS.addEvent(window, "load", function(){
if(!ADS.$('fb_root')){
var div = document.createElement('div');
div.id = "fb-root";
document.body.appendChild(div);
var script = document.createElement("script");
script.src = "dom/connect.facebook.net.js";
var script2 = document.createElement("script");
var head = document.getElementsByTagName("head")[0];
head.appendChild(script);
window.fbAsyncInit = function () {
FB.init({
appId: "HIDDEN",
channelUrl: "http://mywebsite.com/channel.php",
status: true,
cookie: true,
xfbml: true
});
// Gets status when the user first lands
// on site
FB.getLoginStatus(function(response) {
if (response.status === 'connected') {
//window.location="http://mywebsite.com";
} else if (response.status === 'not_authorized') {
// Do nothing, let the user view the welcome page
//FB.login();
} else {
// this causes a login dialog to
// pop up automagically once the user
// lands on the site and is not logged in
// or authorized
//FB.login();
}
});
function login() {
FB.login(function(response) {
if (response.authResponse) {
// connected
// using event subscribe to send user to right page, instead of this
// which does not redirect the user once the login is complete
//window.location="http://mywebsite.com/home.php?show=follow";
} else {
// cancelled
//alert(response.authResponse);
}
});
}
FB.Event.subscribe("auth.login", function () {
// Redirect's the user once the login is complete
window.location="http://mywebsite.com";
})
}
}
});
I am working on a android phonegap application with facebook integration.
FB.login(function(response) function has a response handler it is being called when
user click on fb button, but its not getting into the function response
or alert('test') every time. it gets into this script only when i hit
around 5 or 6 times. wat i need is to fetch the access token the very first time i logged into facebook. i have gone through a lot of links regarding this but
cant find an exact solution for this...
FB login callback function not responding if user is already logged in facebook
Even this question seems to be same but i cant figure it out my solution.
this is the code am working :
<div id="data">Hello Facebooktesters, loading ...</div>
<button onclick="login()">Login</button>
<button onclick="me()">Me</button>
<button onclick="logout()">Logout</button>
<button onclick="Post()">facebookWallPost</button>
<script type="text/javascript">
document.addEventListener('deviceready', function() {
try {
alert('Device is ready! Make sure you set your app_id below this alert.');
FB.init({
appId : "xxxxxxxxxxxxxxx",
nativeInterface : CDV.FB,
useCachedDialogs : false
});
document.getElementById('data').innerHTML = "FB init executed";
} catch (e) {
alert(e);
}
}, false);
function me() {
FB.api('/me/friends', {
fields : 'id, name, picture'
}, function(response) {
if (response.error) {
alert(JSON.stringify(response.error));
} else {
var data = document.getElementById('data');
fdata = response.data;
console.log("fdata: " + fdata);
response.data.forEach(function(item) {
var d = document.createElement('div');
d.innerHTML = "<img src="+item.picture+"/>" + item.name;
data.appendChild(d);
});
}
var friends = response.data;
console.log(friends.length);
for ( var k = 0; k < friends.length && k < 200; k++) {
var friend = friends[k];
var index = 1;
friendIDs[k] = friend.id;
//friendsInfo[k] = friend;
}
console.log("friendId's: " + friendIDs);
});
}
function login() {
FB.login(function(response) {
alert('test');
if (response.authResponse) {
alert('logged in');
var access_token = FB.getAuthResponse()['accessToken'];
alert(access_token);
window.location = "test.html"
} else {
alert('not logged in');
}
}, {
scope : "email"
});
}
function logout() {
alert('test');
FB.logout(function(response) {
alert('logged out');
//window.location.reload();
});
}
function Post(ele) {
var domain = 'http://192.168.0.46:8082/';
console.log('Debug 1');
var params = {
method: 'feed',
name: 'test - test',
link: domain+'test/test/showproddetails.action?product.productId=1',
picture: 'http://www.careersolutions.com/test.png',
caption: 'test',
description: 'test'
};
console.log(params);
FB.ui(params, function(obj) { console.log(obj);});
}
</script>
Thank you,
raj
You are missing semicolon in this line :
window.location = "test.html"
This question was posted a while ago but I would like to point out something. FB.login function opens a popup dialog asking if the user would like to log in to your app using Facebook. It is generally recommended that it be run after clicking a button as most browsers would block popup dialogs when a page loads. If the user had previously authorized your app then the popup dialog redirects back to your app and closes the dialog box (assuming your app is a website).
If what you intended to do was to check whether a user is logged in to your app upon page load, then it's recommended that you instead use FB.getLoginStatus method like so
function checkLoginState() {
FB.getLoginStatus(function(response) {
// Check response.status to see if user is logged in
alert(response.status);
});
}
Refer to this extensive documentation on facebook