Skip to content

Instantly share code, notes, and snippets.

@hoalongntc

hoalongntc/OpenFacebook.html

Created November 17, 2018 14:47
Show Gist options
  • Save hoalongntc/f9ce84d198470925a09cb33d01bf6e21 to your computer and use it in GitHub Desktop.
Save hoalongntc/f9ce84d198470925a09cb33d01bf6e21 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
OpenFacebook.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"
/>
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Open Facebook</title>
<style type="text/css">
body {
padding: 0;
}
body { padding: 2em; }
/* Shared */
.loginBtn {
box-sizing: border-box;
position: relative;
/* width: 13em; - apply for fixed size */
margin: 0.2em;
padding: 7px 15px 10px 46px;
border: none;
text-align: left;
line-height: 34px;
white-space: nowrap;
border-radius: 0.2em;
font-size: 16px;
color: #FFF;
}
.loginBtn:before {
content: "";
box-sizing: border-box;
position: absolute;
top: 0;
left: 0;
width: 34px;
height: 100%;
}
.loginBtn:focus {
outline: none;
}
.loginBtn:active {
box-shadow: inset 0 0 0 32px rgba(0,0,0,0.1);
}
/* Facebook */
.loginBtn--facebook {
background-color: #4C69BA;
background-image: linear-gradient(#4C69BA, #3B55A0);
/*font-family: "Helvetica neue", Helvetica Neue, Helvetica, Arial, sans-serif;*/
text-shadow: 0 -1px 0 #354C8C;
}
.loginBtn--facebook:before {
border-right: #364e92 1px solid;
background: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/14082/icon_facebook.png') 6px 6px no-repeat;
}
.loginBtn--facebook:hover,
.loginBtn--facebook:focus {
background-color: #5B7BD5;
background-image: linear-gradient(#5B7BD5, #4864B1);
}
</style>
</head>
<body>
<a id='fbBtn' class="loginBtn loginBtn--facebook" href="https://www.facebook.com/hoalong.ntc/" data-id="100003198360071" >Open Facebook App</a>
<script type="text/javascript">
var useragent = navigator.userAgent; // cache the userAgent info
var iPhone = (useragent.match(/(iPad|iPhone|iPod)/g));
document.querySelector('#fbBtn').addEventListener('click', function (event) {
var scheme;
if (iPhone) {
scheme = "fb://profile/?id=" + event.target.dataset.id;
} else {
scheme = "fb://profile/" + event.target.dataset.id;
}
uriSchemeWithHyperlinkFallback(scheme, event.target.href);
event.preventDefault();
});
// Open page in app, else open page in browser
function uriSchemeWithHyperlinkFallback(uri, href) {
if (!window.open(uri)) {
window.location = href;
}
}
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment