Attempting to load the Facebook MessengerExtensions appears not to work when using the in-browser experience for Facebook messenger (as opposed to the native apps on iOS or Android). When I interact with my bot's persistent menu to open a webview (that is trying to use MessengerExtensions), I get this error in the browser console of a newly opened tab:
Messenger Extensions are not enabled - could be "messenger_extensions" was not set on a url, the domain was not whitelisted or this is an outdated version of Messenger client
I have the impression that MessengerExtensions is simply not supported for the in-browser experience but have a couple of questions:
Can someone find where in the docs this lack of support is stated (because I've obviously missed it if it's there...)?
If this is supported somehow, suggestions for what I might be doing wrong? (I have confirmed that my persistent menu button has messenger_extensions: true and my web_url is whitelisted...)
Is there some kind of workaround (not using MessengerExtensions) for the webview opened in the browser to get the page-scoped user Id (PSUID) for the user interacting with the bot?
For a button generated with the Send API I could conceivably append the PSUID to the URL being opened as a query param (not sure of security considerations on that)
For the persistent menu the web_url of the button action is NOT dynamic (it's configured ahead of time) so I'm unsure how this URL when opened from the browser-based messenger interface is supposed to figure out what user opened it. Thoughts/Ideas?
I've just tried it on the chrome with facebook api version 2.10, and it works. When I clicked on the button, I got a "lightbox" looking window that opened on top of the messenger, and all the proper callbacks are called in javascript.
this is my button json:
{
type: 'web_url',
title: <title>,
url: <url>,
messenger_extensions: true,
fallback_url: <url>,
webview_height_ratio: 'tall'
}
these are a few things that I did:
the button spec should contain messenger_extensions: true
facebook whitelisted_domains doesn't do subdomains, so make sure you whitelist the entire url before the parameters.
fallback_url should be whitelisted as well.
Related
I have the same problem like asked here: Facebook messenger checkbox plugin is hidden
I tried the implementation of the Facebook Checkbox Plugin according to Facebooks documentation but it won't show on my VM in my Company.
The Facebook SDK Implementation works fine, I tried the "Share" and "Like"-Button, which show up correct.
I have a Facbook Page which has public access and a Messenger APP in DEV-mode. The "Send-API" from Facebook works correct too: I am able to send message to myself as administrator from my Webpage on my development VM.
Following Steps are done: use a random user_ref on every request, set my page on the whitelist, use "https", visit my page FB-loggedIN and FB-loggedOut
But the result ends in Markup and Log-Infos like this screen:
See FF DeveloperTools Markup Screenshot for current state
According to this I visited a page given as origin where the Plugin should work (see first link in my question) - but there the plugins' HTML is the same like mine.
So is there a general problem on Facebooks' site or is there quite more necessary, to get this plugin running? Could it be a problem with self-signed certificate on my VM?
At the moment I don't want to notify or login any user. All I want is that the checkbox is shown.
Pherhaps anyone has an idea or the same experiences :)
Additional Info: the console shows following message
fb:messenger_checkbox failed to resize in 45s
after some fiddling we found out that a registered webhook is required (even if you dont consume the events) to make the messenger checkbox plugin render properly.
I have created my app page on facebook. I have added the required setting like Google Play Package Name, Class name and key hashes but still when try to access that app page it is showing below given error instead of taking us to play store. I have search a lot in web but did not get the relevant post. But I assume this issue can be fixed by facebook settings. I would really appreciate any suggestion.
I've gotten the same error, and as far as I understand, the field "Mobile Site URL" no longer works, as of July 2017. (Apparently there was some abuse of this system.)
In order to redirect to your website, an offical Facebook support encouraged to redirect to the mobile website from within the game itself.
Be advised that according to the Platform Policy, redirecting away from Facebook must be done through a user interaction such as a button click. It should not be done automatically.
A simple solution may be something like this:
if (window.innerWidth < 992 && window !== window.top) {
if (confirm("To get the full mobile experience, we recommend playing the game directly on our website. Would you like to play there?")) {
window.top.location.href = 'https://www.example.com';
}
}
Source:
https://developers.facebook.com/support/bugs/1051463851558493/?disable_redirect=0
I'm developing website with a lot of HTML5 and CSS3 features. I'm also using iframe to embed several content on my website. It works fine if I open it using Chrome/Firefox/Safari mobile browser. However, if I share on facebook (post/page) and I opened it up with Facebook application with Facebook Internal Browser, my website is messed up.
Is there any tools or way to debug on Facebook Browser? Thanks.
This is how you can do the debugging yourself. It's painful, but the only way I've come across so far.
tl;dr Get the Facebook App loading a page on your local server so you can iterate quickly. Then print debug statements directly to the page until you figure out what is going on.
Get a link to a page on your local server that you can access on your mobile device (test in mobile safari that it works). See this to find out your local IP address How do you access a website running on localhost from iPhone browser. It will look something like this
http://192.xxx.1.127:3000/facebook-test
Post that link on your Facebook page (you can make it private so your friends aren't all like WTF?)
Click the posted link in the Facebook mobile App and it will open up in Facebook's mobile browser
Since you don't have a console, you basically need to print debug statements directly to the page so it is visible. Put debug statements all over your code. If your problems are primarily related to CSS, then you can iteratively comment out stuff until you've found the issue(s) or print the relevant CSS attributes using JavaScript. Eg something like (using JQuery)
function debug(str){$('body').append("<br>"+str);}
Quite possibly the most painful part. The Facebook browser caches very aggressively. If you are making changes and nothing has happened, it's because the content is cached. You can sometimes resolve this by updating the URLs, eg /facebook-test-1, /facebook-test-2, or adding dummy parameters eg /facebook-test?dummy=1. But if the changes are in external css or js sheets it sometimes will still cache. To 100% clear the cache, delete the Facebook App from your mobile device and reinstall.
The internal browser the Facebook app uses is essentially a uiWebView. Paul Irish has made a simple iOS app that lets you load any URL into a uiWebView which you then can debug using Safari's Developer Tools.
https://github.com/paulirish/iOS-WebView-App
I found a way how to debug it easier. You will need to install the Ghostlab app (You have a 7-day free trial there, however it's totally worth paying for).
In Ghostlab, add the website address (or a localhost address) you want to debug and start the session.
Ghostlab will generate a link for access.
Copy that link and post it on Facebook (as a private post)
Open the link on mobile and that's it! Ghostlab will identify you once you open that link, and will allow you to debug the page.
For debugging, you will have all the same tools as in the Chrome devtools (how cool is that!). For example, you can tweak CSS and see the changes applied live.
If you want to debug a possible error, you can try to catch it and display it.
Put this at the very top of your code:
window.onerror = function (msg, url, lineNo, columnNo, error) {
var string = msg.toLowerCase();
var substring = "script error";
if (string.indexOf(substring) > -1){
alert('Script Error: See Browser Console for Detail');
} else {
var message = [
'Message: ' + msg,
'URL: ' + url,
'Line: ' + lineNo,
'Column: ' + columnNo,
'Error object: ' + JSON.stringify(error)
].join(' - ');
alert(message);
}
}
(Source: MDN)
This will catch and alert your errors.
Share a link on Facebook (privately), or send yourself a message on Facebook Messenger (easier). To break the cache, create a new URL every time, e.g. by appending a random string to the URL.
Follow the link and see if you can find any errors.
With help of ngrok create temporary http & https adress instead of your ordinary localhost:3000(or other port) and you could run your app on any devices. It is super easy to use.
and as it was written above all other useful information you should write somewhere inside div element (in case of React I recommend to put onClick on that div with force update or other function for getting info, sometimes it helps because JS in FB could be executed erlier than your information appears). Keep in mind that alerts are not reliable, sometimes they are blocked
bonus from ngrok that in console you will see which files was
requested and response code (it will replace lack of network tab)
and about iFrame.If you use it on other domain and you rely on cookies - you should know that facebook in-app browser blocks 3rd party cookies
test on Android and iOS separately because technicaly they use different browsers
Hi I wan't to create a facebook app to use it for the auth in my new site locally installed(my machine),but from yesterday I don't succeed to install it and use it, all time I have this very strange error when I wan't write a domain in the "App Domains" :
This must be derived from Canvas URL, Secure Canvas URL, Site URL, Mobile Site URL, Page Tab URL or Secure Page Tab URL. Check and correct the following domains
the domain of my application is http://localhost/project/app_dev.php/ it dosn't work I change it by a real url such as : http://www.exemple.com/,but I had the same error,and just I notice that I see this error when I create an app with new look of facebook (yesterday)...
In my case the problem was I hadn't completed the "+ Add Platform > Website" section. Once I did that the contents of App Domains became valid and the error went away.
I had this same problem yesterday, the stackoverflow answers that helped me the most were
Make local development work with Facebook/Google APIs and Canvas URL / Secure Canvas URL error message ( Also checkout How to handle OmniAuth callbacks in multiple environments?)
The Facebook developer UI has changed a bit. I'm writing this answer to consolidate all the info that helped me.
1. Make local.host Point to Your Computer
First thing you need to do is (as answered in the first link), facebook won't take localhost as a valid callback site, because it confuses localhost with a top level domain (com org etc.) in other words there is not dot . in your domain name. So change your /etc/hosts to add the entry
127.0.0.1 local.host
Now youcan access your app at http://local.host/... (this will take effect as soon as you save /etc/hosts file, no need to restart anything)
2. Add local.host as the Site URL on the facebook Dev Console
The second thing you need to do is add local.host as the site url on the facebook page
Now don't use your production app. Add a dummy app on your https://developers.facebook.com account Because your production app will have to set the site URL to your production URL and not local.host
Configure the dummy app as shown in the screenshot. But that website section(shown in the screenshot) won't be visible on the Basic settings page from the beginning.
First you will have to click + Add Platform button at the bottom, and select Website.
Notice I added http://local.host:3000/. That's where my ruby server runs in dev mode.
Also, be sure to use App Id and App Secret for the dummy app when running your webapp in dev mode.
HTH.
My problem was that logging in with facebook wasn't working for my app.
It turned out that I just needed to fill in the "Valid OAuth redirect URIs" field on the "Advanced" tab.
e.g. http://example.com/auth/google/callback
I'd a similar problem, Facebook have changed now on left pane file login (After selecting you app from top left corner) -> Valid OAuth redirect URIs
If you work on desktop app like WPF or winforms and use a WebBrowser Control to log in with the Facebook SDK.
You have to set to yes the Embedded Browser OAuth Login in Advance Tab of your facebook apps setting.
hope I help
Chose "Add platform" at the bottom and give your localhost url. "http://localhost:port/".
After this step. Facebook allows you to add localhost:port as your domain url.
After these 2 steps you can test "login with facebook" without any trouble.
Upon install of my app on a Facebook Page, I'd like to send the user to an URL with further instructions. I'm starting the installation with http://facebook.com/add.php?api_key=app_api_key&page=page_id, which installs but redirects the user to the Facebook Page itself. It seems like various forms of redirect were available at some point:
Post-authorize callback URL. I can no longer find that in App settings.
The next parameter for add.php. I can't seem to get this to work
I have seen some apps that do redirect upon install, so I believe this is possible. Maybe it's using an old Post-authorize setting that's no longer visible?
Any help or point would be greatly appreciated! I'm also not attached to using add.php, if there's a Facebook Connect method that does this I'd use that instead (I'm looking at profile.addtab though that doesn't seem to work either).
You can set the redirect URL in the app properties. You can no longer set it from the developer control panel in Facebook, but you can still set it using the REST api.
The list of app properties is here: http://developers.facebook.com/docs/appproperties/
To set the "post_authorize_redirect_url" you would use something like this:
https://api.facebook.com/method/admin.setAppProperties?
access_token=CURRENTTOKEN&
properties={'post_authorize_redirect_url':'http://mydomain.com/post_authorize_folder/'}
I am not completely clear on this, but I believe the url needs to point to a folder, terminated with "/" rather than a specific file.
The callback gets two parameters:
installed = 1 (true)
fb_page_id = the page id when your app was installed
First page that Canvas is point to should have
< script type='text/javascript'>top.location.href = 'REDIRECT-URL';< /script>
So when your app is opened it will automaticaly redirect to REDIRECT-URL
I'm not sure that you can avoid opening of application canvas page after installing application.