Issue opening Facebook Messenger from Facebook's built-in browser - javascript

I'm looking to share a webpage to Facebook Messenger as part of a promotional campaign. Everything seems to be working in usual desktop and mobile browsers however, in Facebook's built in browser, the Facebook Messenger app is not opened and the page just anchors back to the top.
In the Facebook Developer documentation it is suggested to use the following:
window.open('fb-messenger://share?link=' + encodeURIComponent(link) + '&app_id=XXXX');
but I have also tried:
window.location.href = 'fb-messenger://share?link=' + encodeURIComponent(link) + '&app_id=XXXX';
The CTA to share is a simple element with a href="#" (assume that's why the Facebook browser is jumping me back to the top of the page) with a click event to fire the user to Facebook Messenger with the page's share information prepopulated. For example:
$('#facebookShare').on('click', function() {
window.location.href = 'fb-messenger://share?link=' + encodeURIComponent(link) + '&app_id=XXXX';
});
This all works perfectly fine in Chrome and Safari on a mobile device but as soon as it's running in Facebook's built-in browser it simply doesn't do anything.
Any help or guidance on opening Facebook Messenger from within the Facebook app's build-in browser would be greatly appreciated.

I don't think it is possible from the Facebook browser. According to the docs:
The link works on mobile web sites on iOS and Android platforms, with native apps, but deep linking does not work with webviews.
The built in Facebook browser is a webview, so it looks like it is not possible.

Related

How to make a website that Supports Google Chrome Add to Home screen?

I have a question about how to make a website that supports Add to Homescreen in Google chrome.
That's mean some websites like web.whatsapp.com when clicking on the Add to home screen, Website shortcut add to my home screen but when I open it, it has different, It opens in fullscreen mode and hide Google chrome options.
please say how to create a website like that.
I think they are called PWA (Progressive Web App) you can find information online on how to create those apps from scratch.

Open iOS app from a Safari without "Open in <app>" prompt

I'm trying to open the app from an HTML page. It's working well, but I need the app to open without asking the permission from the user.
Currently, Safari will ask the user that "Open this page in myapp". I don't want this message box.
How I can remove this message from Safari? I'm using an URI scheme to open the app. It looks something like myApp://domain.
You can't avoid the dialog you mentioned while using Custom URL schemes. This is iOS feature.
Instead you can use Universal Links to open your iOS App without additional dialog. You need to have control over iOS App to make this happens.
To simplify Universal Links setup, you can use one of the companies that can setup most of it for you. I am working in Firebase/Google https://firebase.google.com/docs/dynamic-links/ . Other answer mentioned company that will do this for you as well.
Try branch.io? It works with Android and iOS.

How to add web app to user home screen?

As the title says, I would like to show a small popup containing a button at the end of my web site to hint users to add my website to their phone's home screen. I found a tutorial here: https://codelabs.developers.google.com/codelabs/add-to-home-screen/#0, which solved my issue on Android but this way just works just only on Android and https method. I would prefer that this popup must work on Android, iOS, http and https. Would anyone here know how to solve this? Thank you very much for your help.
For Android, the Add To Home Screen prompt requires HTTPS (or localhost), so it's not possible to do it on HTTP.
For Safari on iOS, you can configure the home screen icon & launch appearance with meta tags, but a prompt system is not currently available, so users will need to add the app manually.

Is there any "bookmark web icon" function in the android browser?

In Iphone , the web icon function is something like when browsing the website, if I click on add to homescreen, then there will be a shortcut for the website on the homescreen, so the user later click on that icon will open the browser and go to the bookmarked website.
Are there any jquery plugin or something to implement this on android? Thanks
It should be some plugin like this, but for android
https://code.google.com/p/mobile-bookmark-bubble/
In reference to your post i got some links which i got from web as well as other discussions going in stack, here iam pasting the hope they may help you
JQuery Mobile Add the Home Screen Options?
How to add android bookmark on homescreen from web page?
http://cubiq.org/add-to-home-screen
http://blog.linuxacademy.com/mobile/create-an-add-to-home-screen-popup-html5-or-jquery-mobile/
"Add to homescreen" button in Android does not show website as a Web App

Open external page from iPhone web app using JavaScript?

I've built a mobile website - a web site optimized for handheld units. If you are using an iPhone you launch Safari and go to the site URL to use this web app. It can also be run as an iPhone web app by adding it to your home screen. So it's not a native iPhone app - it's a mobile web page.
If you choose to run this mobile web page as an iPhone web app (by adding it to your home screen) you are not in the normal Safari interface. If the user clicks a link to an external site, you leave the web app and the link is opened in Safari. If you on the other hand use JavaScript to change the location, the link is opened in the web app - not in Safari.
Now I'm looking for a way to open a link in Safari from an iPhone web app using JavaScript. I've tried window.location.href but since it's JavaScript you stay in the web app.
Thanks in advance!
I'm also struggling with this. I have defaulted to using basic HTML when opening an external link, instead of Javascript – this appears to force it to open in another browser. I simply write a div with the link inside it, either using Javascript or static in the .html file.
An example of my implementation, check the "about" pages for offsite links written in HTML: http://4drillsbrewery.com/tools
(Please don't judge the code, it was all just a toy written to get used to Dashcode, not as a programming project! thanks). I'll be following this thread, hoping someone has a better way.
I appreciate this isn't going to help in all scenarios BUT PROVIDED the javascript code originates from a user generated click of a hyperlink there is this solution...
$("a.someHyperLink").click(function () {
var url = doJavascriptStuffToGenerateTheDynamicUrl();
$(this).prop("href", url);
return true; // return true so the click propagates and the new href is followed
});
You could extend this further so that it works both when the site is being browsed in Safari normally and as a standalone app.
$("a.someHyperLink").click(function () {
var url = doJavascriptStuffToGenerateTheDynamicUrl();
if (window.navigator.standalone) {
// We are within the context of an iPhone standalone/fullscreen/homescreen app
// Change the href and return true so that we leave the standalone app and the URL is opened in a new window in Safari
$(this).prop("href", url);
return true;
} else {
// Website is open in a browser normally
// Open the URl in a new browser window
window.open(url);
return false; // Return false so the href isn't followed
}
});

Categories

Resources