I am developing a WordPress theme where a hyperlink (Facebook page) should take the user to Facebook app if installed or open a new tab if not installed.
here is the anchor/hyperlink:
<a id="facebook" class="social-btn facebook" title="Our Facebook Page" target="_blank" href="<?php echo esc_url( __( 'https://www.facebook.com/rainbowparentinguae' ) ); ?>">
</a>
and this is the JavaScript:
class FaceBook {
constructor() {
this.FacebookBtn = document.getElementById("facebook");
this.events();
}
events() {
if (this.FacebookBtn) {
this.FacebookBtn.addEventListener("click", this.openFacebook.bind(this));
}
}
openFacebook(e) {
const IS_IOS = (navigator.userAgent.match(/iPad/i) != null) || (navigator.userAgent.match(/iPhone/i) != null) || (navigator.userAgent.match(/iPod/i) != null);
const IS_ANDROID = (navigator.userAgent.match(/android/i) != null) || (navigator.userAgent.match(/Android/i) != null);
if(IS_IOS) {
setTimeout( function () { getURL(); }, 25);
this.FacebookBtn.href = "fb://profile/1692101410811137";
}
else if (IS_ANDROID) {
setTimeout( function () { getURL(); }, 25);
this.FacebookBtn.href = "fb://page/1692101410811137";
}
e.stopPropagation();
};
getURL() {
location.href("https://www.facebook.com/rainbowparentinguae", '_blank' );
};
}
export default FaceBook;
I expect that if the user is using a computer (desktop/laptop) the Facebook page will open in new (windows/tab).
if the user is using iOS the page will open in Facebook App (if it is installed), in case the App is not there the Facebook page will be opened in a new (windows/tab).
if the user is using Android the page will open in Facebook App (if it is installed), in case the App is not there the Facebook page will be opened in a new (windows/tab).
What I have tried:
I have done some searches and developed a short code where everything is quite done except the scenario if Facebook App is not installed.