fb- 로그인 버튼 및 위치 지정

Question

내 웹 사이트에 대한 내 자신의 사용자 정의 로그인 시스템을 사용하지 않는 대신, 사용자가 로그인 할 수있는 옵션으로 Facebook 및 Twitter를 사용하려고합니다. 내 사이트. 몇 시간 동안 탐색 한 후, 나는 페이스 북을 내 웹 사이트에 통합하는 것이 당신의 이빨만을 사용하여 신발을 묶는 것처럼 쉽다는 것을 발견했습니다.

나는 적절한 div 안에 표시되는 버튼을 얻을 수있었습니다. 그러나 버튼이 살고있는 태그의 가운데에 위치하도록 할 수는 없습니다.

이 여행에서 내 첫 번째 질문은 아마도 버튼 중심에 위치 할 수 있다는 것입니다. div에 스타일 태그를 추가하려고 시도했지만 Facebook이 실제로 내 div를 대체 한 이후로 작동하지 않았습니다. 제공 할 수있는 도움에 감사드립니다.

편집 : 관련 코드를 추가하십시오. 로그인 버튼을 설정 유사한 예를 들어, 경우 그것은 당신의 사업부를 대체하지해야 :

Index.php: 
    <!--User System Start --> 
    <script> 
     window.fbAsyncInit = function() { 
     FB.init({ 
     appId  : '[MASKED]', // App ID 
     channelUrl : '[MASKED]', // Channel File 
     status  : true, // check login status 
     cookie  : true, // enable cookies to allow the server to access the session 
     xfbml  : true // parse XFBML 
     }); 

    // Additional initialization code here 
     }; 

    // Load the SDK Asynchronously 
     (function(d){ 
      var js, id = 'facebook-jssdk', ref = d.getElementsByTagName('script')[0]; 
      if (d.getElementById(id)) { return; } 
      js = d.createElement('script'); js.id = id; js.async = true; 
      js.src = "//connect.facebook.net/en_US/all.js"; 
      ref.parentNode.insertBefore(js, ref); 
     }(document)); 
    </script> 
    <div id="loginWrapper"> 
     <div id="loginBar"> 
     <section id="loginBarLeft"> 
     <h1>Step One: Login</h1> 
     <div id="fb-root"></div> 
     <div class="centered"><fb:login-button>Login With Facebook</fb:login-button></div> 
    </section> 
    <section id="loginBarCenter">Login Bar Center</section> 
    <section id="loginBarRight">Login Bar Right</section> 
</div> 
<div id="showHide"><a href="#" id="showHideButton">Login or Register</a></div> 
    </div> 
    <!--User System End --> 

    userSystem.css 
    @charset "utf-8"; 
    /* CSS Document */ 
    body { 
     margin-top: 0; 
     padding-top: 0; 
    } 
    div#loginWrapper { 
     width: 1024px; 
     height: auto; 
     margin: 0 auto; 
     position: fixed; 
     z-index: 2; 
     left: 50%; 
     left: 120px; 
     top: 0 
    } 
    div#loginBar { 
     width: 1024px; 
     height: 300px; 
     background: url(images/loginBar_background.png) repeat-x; 
     color: #006; 
     border-bottom-left-radius: 25px; 
     box-shadow: 5px 5px 5px #000; 
    } 
    div#loginBar section#loginBarLeft { 
     float: left; 
     width: 33%; 
     height: 300px; 
    } 
    div#loginBar section#loginBarLeft h1 { 
     text-align: center; 
     margin-top: 5px; 
    } 

     div#loginBar section#loginBarLeft .centered { 
     height: 100px; 
     width: 341px; 
     margin: 0 auto; 
     } 
     div#loginBar section#loginBarCenter { 
     float: left; 
     width: 33%; 
     height: 300px; 
     border-right: 1px solid #FFF; 
     border-left: 1px solid #FFF; 
    } 
     div#loginBar section#loginBarRight { 
     float: left; 
     width: 33%; 
     height: 300px; 
    } 
    div#showHide { 
     width: 200px; 
     height: 25px; 
     position: relative; 
     left: 824px; 
     background: #333; 
     color: #FFF; 
     text-align: center; 
     border-bottom-left-radius: 15px; 
     border-bottom-right-radius: 15px; 
     box-shadow: 5px 5px 5px #000; 
     z-index: 2; 
    } 
    div#showHide a { 
     color: #CCC; 
     text-decoration: none; 
     font-weight: bold; 
    } 
    div#showHide a:hover { 
     color: #FFF; 
    } 

Answer 1

나는 전에 버튼과 같은 FB의 위치를 ​​관리했습니다 XFBML을 사용하십시오.

HTML

<p>Click on <span class="fb-like"><fb:like href="http://www.facebook.com/somepage" send="false" width="49" show_faces="false" font="arial"></fb:like></span> to become fan and enter lalalalala some form.</p> 

이 같은 시도 할 수 있습니다 특정 문제에 대한 CSS

.fb-like { display: inline-block; height: 28px; overflow: hidden; position: relative; top: 6px; width: 48px; } 

:

HTML을

<div class="table"> 
    <div class="centered"><fb:login-button show-faces="false" width="200" max-rows="1"></fb:login-button></div> 
</div> 

CSS

.centered { display: table-cell; vertical-align: middle; } 
.table { display: table; height: 400px; }