I have jQuery Mobile app, wherein I have a link to an associated facebook page. What I want to do is open the page in the facebook app if it's installed, otherwise open in the default browser. I have code that opens the facebook app, but no more than that - the desired page is not loaded. Here's the code that I'm using to open the app (derived from How to launch apps (facebook/twitter/etc) from mobile browser but fall back to hyperlink if the app isn't installed )
$(document).on("pageinit", "#home", function (e, data) {
$('a.openapp').on('click', function (event) {
uriSchemeWithHyperlinkFallback($(this).data('scheme'), $(this).attr('href'));
event.preventDefault();
});
function uriSchemeWithHyperlinkFallback(uri, href) {
if(!window.open(uri)){
window.location = href;
}
}
});
And, here's variations on the links that I've tried:
<a class="openapp" href="https://www.facebook.com/Raven-Rock-Ramble-233457512435/" data-scheme="fb://page/Raven-Rock-Ramble-233457512435/" ><img class="social_logo" src="./img/fb.png" alt="facebook"></a>
<a class="openapp" href="https://www.facebook.com/Raven-Rock-Ramble-233457512435/" data-scheme="fb://page/233457512435/" ><img class="social_logo" src="./img/fb.png" alt="facebook"></a>
<a class="openapp" href="https://www.facebook.com/Raven-Rock-Ramble-233457512435/" data-scheme="fb://facewebmodal/f?href=https://www.facebook.com/Raven-Rock-Ramble-233457512435/" ><img class="social_logo" src="./img/fb.png" alt="facebook"></a>
<a class="openapp" href="https://www.facebook.com/Raven-Rock-Ramble-233457512435/" data-scheme="fb://profile/233457512435/" ><img class="social_logo" src="./img/fb.png" alt="facebook"></a>
I've done a lot of searching (see links below). I gather that I need a special page ID that can be found through graph.facebook.com, but that appears to be no longer available. It also appears that facebook is changing so quickly that any posts over 6 months old are out of date. I did view the page's source code and found a uid value (as per one of the links), but alas, no joy. I welcome any insights here, as I'm stuck!
Related links:
HTML link to launch an app if installed or go to a website if not
Open Facebook Page in Facebook App (if installed) on Android
Open Facebook page in Native Facebook IOS App via simple URL Sheme issue
How to open facebook page in facebook app in iphone?
Update:
After further investigation and much trial and error, I finally got this working. Here's the significant link: Open link to Facebook page from iOS app
To summarize, open the desired facebook page in a browser, view the source (Ctrl+U in most browsers), then search for al:ios:url. You should be able to find the line:
<meta property="al:ios:url" content="fb://page/?id='your_page_numeric_id'">
There's the URL you need. So, in my code (see above), this link now works as desired:
<a class="openapp" href="https://www.facebook.com/Raven-Rock-Ramble-233457512435/" data-scheme="fb://page/?id=233457512435" ><img class="social_logo" src="./img/fb.png" alt="facebook"></a>
The main takeaway here is that the URL syntax for the facebook app is fb://page/?id=
Update September 15, 2017:
I'm re-visiting this code. It seems to work well enough on IOS, but not on Android, where it just opens the facebook app but does not load the page :-(
Update September 19, 2017:
OK, I got it working on both iOS and Android now. The two have a slightly different syntax. Here's the current, working js code:
$(document).on("pageinit", "#home", function (e, data) {
$('a.openapp').on('click', function (event) {
var scheme;
if (iPhone)
scheme = "fb://page/?id=" + $(this).data('id');
else
scheme = "fb://page/" + $(this).data('id');
uriSchemeWithHyperlinkFallback(scheme, $(this).attr('href'));
event.preventDefault();
});
// Open page in app, else open page in browser
function uriSchemeWithHyperlinkFallback(uri, href) {
if (!window.open(uri)) {
window.location = href;
}
}
});
and here's the associated html:
<a class="openapp" href="https://www.facebook.com/CFFCarolinasRaleigh/" data-id="134656996545475" ><img class="social_logo" src="./img/fb.png" alt="facebook"></a>
Notice that iOS seems to require ?id= and Android does not. "iPhone" is a global variable I set elsewhere,
var useragent = navigator.userAgent; // cache the userAgent info
var iPhone = (useragent.match(/(iPad|iPhone|iPod)/g));
Update July 15, 2020:
The page source technique described above no longer seems to work. However, there are web sites that will return the numeric page id. See https://fb-search.com/find-my-facebook-id.
For the particular page I was referencing, the urls were somewhat different on iOS and android:
iOS: fb://profile/?id=<numeric page id>
android: fb:///page/<numeric page id>
That makes no sense to me, but it worked.
