[HTML] Trang chủ đăng nhập và đăng nhập bằng tài khoản Facebook

  Bài viết hay nhất1
Bài viết Bài viết : 587
Xu Xu : 1348
Thích Thích : 82

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


    <meta charset="UTF-8" />
    <title>Đăng nhập diễn đàn</title>
      .bodymain{width:400px;margin:0 auto;background:#e9eaed;padding:10px}
      .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}
  // This is called with the results from from FB.getLoginStatus().
  function statusChangeCallback(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.
    } 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) {

  window.fbAsyncInit = function() {
    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) {


  // 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 + '!';
    <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 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 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 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 class="rowbox"><span>Chưa có tài khoản? <a href="/register">Đăng ký tài khoản mới</a></span></div>


Thay vào đó bằng id app mà bạn tạo ở Facebook
  Bài viết hay nhất2
Bài viết Bài viết : 8
Xu Xu : 11
Thích Thích : 3
  Bài viết hay nhất3
Bài viết Bài viết : 86
Xu Xu : 245
Thích Thích : 41
view view view
You cannot reply to topics in this forum