Topic-icon FB Login error in Firefox & Messenger never appears

Hi Alex,

Further to my messages via messenger, I thought I'd post some further details here. As you're aware, I'm receiving an error in Firefox, "Uncaught Reference Error: FB is not defined", when clicking the facebook login button. Now, I'm not sure if there's a link between this, and the fact that messenger never loads, but regarding this, in the backend configuration, changing the dialog display type to anything other than show, and saving fails to save the changed value, and always reloads with the original show value.

Bizarrely, the login with FB works just fine in chrome.

I really need to fix this fast as it is integral to a campaign that I should have started running today. Therefore, I'd really appreciate you taking a look at this at your earliest convenience. As per my message, I have added the account that you created to Super Admin group so that you can access the administrator site.

I'll post a reply to you on messenger now, linking to this thread, so you know which site I'm referring to, as I'd prefer not to have any links to the site prior to it going truly live.

Thanks in advance, and I hope that you and your family are well at this difficult time.

In anticipation of your response.

Kind Regards,

Geraint
The topic has been locked.
Support Specialist
3 years 9 months ago #66527 by mel
Please check out Alex's response on Facebook messenger.

-Melissa
The topic has been locked.
Thanks Melissa,

much appreciated. I've carried out the steps outlined in Alex's message, and managed to get Messenger to display correctly within Firefox.

However, unfortunately, I am still experiencing the JS errors in Firefox, that still prevent me from signing in with Facebook, and displaying the messenger widget. Any ideas? I've replied to Alex's message too btw.

Thanks,

Gez
The topic has been locked.
Also,

Regarding the positioning of the messenger widget, how can I position it on the left side of the page? Can I override this in a template/layout, and if so, please advise where I can find the source to override in my template, or ideally, the CSS rule I can add.

Thanks,

Gez
The topic has been locked.
I see that there are 2 identical calls made on the document's body tag, when I view the home page:
jQuery(document).off("click.fb-start", "[data-trigger]");
jQuery(document).off("click.fb-start", "[data-trigger]");
The topic has been locked.
Support Specialist
3 years 9 months ago #66531 by mel

Regarding the positioning of the messenger widget, how can I position it on the left side of the page? Can I override this in a template/layout, and if so, please advise where I can find the source to override in my template, or ideally, the CSS rule I can add.

Yes, you should be able to target the bubble with CSS. You can put it in your template. The existing position is coming from Facebook, but you can use the following as a starting point.
.fb_dialog.fb_dialog_advanced.fb_customer_chat_bubble_animated_no_badge.fb_customer_chat_bubble_pop_in {
position: relative;
left: 0;
}

However, unfortunately, I am still experiencing the JS errors in Firefox, that still prevent me from signing in with Facebook, and displaying the messenger widget.

I was just able to log in via Alex's FB credentials onto your site with Firefox. Looking at your video, it appears that you may be running an ad blocker in Firefox. Can you turn off any tracking or privacy extensions in Firefox? Another thing to try is to set our 'Show Login Credentials in Popup' to No.

When we attempt to view the messenger widget, we get the following error: "Refused to frame 'www.facebook.com/' because an ancestor violates the following Content Security Policy directive: "frame-ancestors www.facebook.com"." It seems that the whitelist might not be set up properly still. Can you message us what you have set up for your whitelist settings?

In addition to above, can I also just clarify that, despite no having submitted my app for approval, users can still log in with their Facebook credentials all the same?

Regarding users logging in without the FB app review - If you're requesting additional extended permissions, you'll need to go through the review before users log in properly. If you go into the JFBConnect backend > Scope Review section, it'll show what permissions JFBConnect is configured to use with an explanation of whether you need to go through the review.

[Edited to Add] I'm only seeing the jQuery(document).off("click.fb-start", "[data-trigger]"); call once in the Page Source now.

-Melissa
The topic has been locked.
Hi Melissa,

Thanks for your reply. I managed to fix the position of the messenger button with the CSS above, and for anyone else who might want to also place the opened messenger window on the left too, you can do so with:
.fb-customerchat.fb_invisible_flow.fb_iframe_widget iframe{
	position: fixed;
	left: 0 !important;
}

I do have a couple of privacy browser extensions running typically, but I'd already turned them off. The one that you probably noticed in the video, was SEOQuake. Although this has nothing to do with privacy per se, I did disable it, and all other browser plugins/extensions, just in case. Sadly, I'm still finding the same issue. Where should the FB object become available - I mean, in terms of the scope of the document? Presumably the head? I note that the login script in which the FB variable is called, is on the body (one of the first things in fact). Is it possible that the FB var is not globally available to the document, because of where it is loaded in the head, if indeed, that is where it is loaded?

I presume it must be loaded in one of the loaded js files, as I see no FB variable present in any of the source code. Starting to struggle with this!
Any advice as to why this isn't getting loaded correctly would be much appreciated.

RE: facebook user login without additional permissions:
So, reading between the lines of your message, am I correct to assume that additional user permissions that I need as an admin of the site, DO NOT need to be entered into the additional user permissions field in JFBC's configuration, in order to achieve the messenger and other facebook functions, and that they are 'special' in the sense that I'm obviously an admin of the FB App too?

Also, and if that is the case, do I need to switch my app into development mode, in order to continue to allow users to login/register on the site with facebook credentials, until such a time that I'm ready to progress through app review for any additional user permissions, I might wish to request?

Sorry for all of the questions! Currently (in the UK at least), FB aren't reviewing any individuals' apps, only businesses. So, I'm trying to determine whether or not, I can proceed without the need of app review, and still offer facebook login to customers in the meantime, whilst offering messenger integration.

Many thanks,

Gez
The topic has been locked.
Support Specialist
3 years 9 months ago #66534 by alzander
Gez,
We're talking in both FB Messenger and this thread about issues. We'd like to condense things here since the on FB Messenger, we're talking about other Messenger issues as well, which gets confusing.

Hopefully, the authentication issue you're having is cleared up by switching your Application to Live. That may impact messenger too, we'll just have to see. Right now, neither Melissa or I can see the messenger popup on your site.

As to your other questions:

So, reading between the lines of your message, am I correct to assume that additional user permissions that I need as an admin of the site, DO NOT need to be entered into the additional user permissions field in JFBC's configuration, in order to achieve the messenger and other facebook functions, and that they are 'special' in the sense that I'm obviously an admin of the FB App too?

Correct. JFBConnect will generate additional required permissions automatically. You don't need to manually add permissions unless you intend to write code or have some other need for them.

Also, and if that is the case, do I need to switch my app into development mode, in order to continue to allow users to login/register on the site with facebook credentials, until such a time that I'm ready to progress through app review for any additional user permissions, I might wish to request?

Switching to development mode used to work to allow you, the admin, to request permissions from yourself. Facebook has been slowly disabling this ability.. but generally still seems to work for most users. Test authentication while in dev to see if additional permissions are requested (only if they haven't been already granted) and then go back to live mode. If you can't get them in dev, then you have to go through the Approval process.

Sorry for all of the questions! Currently (in the UK at least), FB aren't reviewing any individuals' apps, only businesses. So, I'm trying to determine whether or not, I can proceed without the need of app review, and still offer facebook login to customers in the meantime, whilst offering messenger integration.

You shouldn't need to go through approval for your general users if you simply want them to authenticate, grab their name and email address.

Thanks!
The topic has been locked.