Demo: 4rdinhcao.forumvi.com/h40-login
Chức năng: Đăng nhập và nút đăng nhập bằng tài khoản FaceBook
Code:
- Code:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8" />
<title>Đăng nhập diễn đàn</title>
<style>
.bodymain{width:400px;margin:0 auto;background:#e9eaed;padding:10px}
.main{text-align:center}
.rowbox input{padding:7px 28px;outline:none;border:1px solid #ccc;border-radius:3px;margin-bottom:10px}
input[type="submit"]{color:#fff;background-color:#4e69a2;border:1px solid #385490;cursor:pointer;width:230px}
.rowbox p{width:170px;display:inline-block}
a.toplogo{background-image:url(http://i19.servimg.com/u/f19/18/38/47/60/logov210.png);background-repeat:no-repeat;background-position:center center;display:inline-block;height:100px;width:100px;background-size:100px 100px;padding:3px}
input#username{background:#FFF url(http://i48.servimg.com/u/f48/16/18/15/10/login_11.jpg) no-repeat 2px center}
#password{background:#FFF url(http://i48.servimg.com/u/f48/16/18/15/10/login_12.jpg) no-repeat 2px center}
.rowbox span{margin:10px 0}
</style>
<script>
// This is called with the results from from FB.getLoginStatus().
function statusChangeCallback(response) {
console.log('statusChangeCallback');
console.log(response);
// The response object is returned with a status field that lets the
// app know the current login status of the person.
// Full docs on the response object can be found in the documentation
// for FB.getLoginStatus().
if (response.status === 'connected') {
// Logged into your app and Facebook.
testAPI();
} else if (response.status === 'not_authorized') {
// The person is logged into Facebook, but not your app.
document.getElementById('status').innerHTML = 'Please log ' +
'into this app.';
} else {
// The person is not logged into Facebook, so we're not sure if
// they are logged into this app or not.
document.getElementById('status').innerHTML = 'Please log ' +
'into Facebook.';
}
}
// This function is called when someone finishes with the Login
// Button. See the onlogin handler attached to it in the sample
// code below.
function checkLoginState() {
FB.getLoginStatus(function(response) {
statusChangeCallback(response);
});
}
window.fbAsyncInit = function() {
FB.init({
appId : '<YOUR APP ID>',
cookie : true, // enable cookies to allow the server to access
// the session
xfbml : true, // parse social plugins on this page
version : 'v2.1' // use version 2.1
});
// Now that we've initialized the JavaScript SDK, we call
// FB.getLoginStatus(). This function gets the state of the
// person visiting this page and can return one of three states to
// the callback you provide. They can be:
//
// 1. Logged into your app ('connected')
// 2. Logged into Facebook, but not your app ('not_authorized')
// 3. Not logged into Facebook and can't tell if they are logged into
// your app or not.
//
// These three cases are handled in the callback function.
FB.getLoginStatus(function(response) {
statusChangeCallback(response);
});
};
// Load the SDK asynchronously
(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/sdk.js";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
// Here we run a very simple test of the Graph API after login is
// successful. See statusChangeCallback() for when this call is made.
function testAPI() {
console.log('Welcome! Fetching your information.... ');
FB.api('/me', function(response) {
console.log('Successful login for: ' + response.name);
document.getElementById('status').innerHTML =
'Chào mừng: ' + response.name + '!';
});
}
</script>
</head>
<body>
<div class="bodymain">
<div class="main">
<a class="toplogo avatarsubforum" href="http://4rdinhcao.forumvi.com/"></a>
<h1>Đăng nhập vào diễn đàn</h1>
<form action="/login" method="post" name="form_login" class="toplogin">
<div class="box-content">
<div class="rowbox">
<label class="iconlog u"></label>
<input type="text" tabindex="1" name="username" id="username" size="30" maxlength="40" onblur="if (this.value == '') this.value = 'Tên truy cập';" onfocus="if (this.value == 'Tên truy cập') this.value = '';" value="Tên truy cập" placeholder="Tên truy cập" class="inputfield" />
</div>
<div class="rowbox">
<label class="iconlog p"></label>
<input type="password" tabindex="2" id="password" name="password" size="30" maxlength="25" onblur="if (this.value == '') this.value = 'Mật khẩu';" onfocus="if (this.value == 'Mật khẩu') this.value = '';" value="Mật khẩu" placeholder="Mật khẩu" class="inputfield" />
</div>
<div class="rowbox">
<p><input type="checkbox" name="autologin" checked="true" /> Tự động đăng nhập</p>
<p class="right"><a href="/profile?mode=sendpassword">Quên mật khẩu?</a></p>
</div>
<div class="rowbox"><input type="submit" name="login" tabindex="6" value="Đăng Nhập" /></div>
<div class="rowbox">
<fb:login-button size="large" onlogin="window.location='/facebook_connect.forum'" v="2" scope="" login_text="Đăng nhập bằng tài khoản FaceBook" class=" fb_iframe_widget" fb-xfbml-state="rendered" fb-iframe-plugin-query="app_id=211528632390947&container_width=0&locale=vi_VN&login_text=%C4%90%C4%83ng%20nh%E1%BA%ADp%20b%E1%BA%B1ng%20t%C3%A0i%20kho%E1%BA%A3n%20FaceBook&sdk=joey&size=large"></fb:login-button>
</div>
<div class="rowbox"><span>Chưa có tài khoản? <a href="/register">Đăng ký tài khoản mới</a></span></div>
</div>
</form>
</div>
</div>
</body>
</html>
Tìm <YOUR APP ID>
Thay vào đó bằng id app mà bạn tạo ở Facebook