0

フェイスブックのチュートリアルはいたるところにあります。ログインボックスを作成するためのチュートリアルを見つけることができる場所を知っている人はいますか。

Facebookのソーシャルプラグインページから取得したログインボタンがありますが、カスタマイズする方法がわかりません。

しかし、今のところ知りたいのは、ログインボックスを作成する方法です。ユーザーがFacebookのログインボタンをクリックすると、ボタンが消えて、プロフィール写真の名前と私のアクティビティが記載されたボックスが表示されます。

たとえば、WETPAINT.COMを見ると、私が話していることがわかります。

4

1 に答える 1

0

次のコードは、ログインボタンを提供します。このボタンは、ドキュメントに記載されているとおりに動作します。

「ユーザーがFacebookからログアウトしたサイトにアクセスすると、ボタンに「ログイン」と表示されます。ユーザーがクリックすると、Facebookのユーザー名とパスワードを入力するように求められます。

彼女があなたのサイトに登録していない場合、彼女はregistration-urlパラメーターで指定したURLにリダイレクトされます。

彼女がすでにあなたのサイトに登録している場合、ボタンはonlogin（）Javascriptイベントを発生させます。このイベントが発生したら、ユーザーをサイトにログインさせる必要があります。

ユーザーがFacebookにログインして到着したが、サイトに登録していない場合、ボタンには「登録」と表示され、クリックするとユーザーは登録URLに移動します。

このドキュメントページは一見の価値があります。

<?php

<!DOCTYPE html>

<html lang="en-US">
 <head>
 </head>
 <body>
    <div id="fb-root"></div>
        <script type="text/javascript">
            (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/all.js#xfbml=1";
              fjs.parentNode.insertBefore(js, fjs);
            }(document, 'script', 'facebook-jssdk'));

            window.fbAsyncInit = function() {
                FB.init({
                  appId      : 'YOUR APP ID', 
                  channelUrl : 'YOUR CHANNEL URL', 
                  status     : true, 
                  cookie     : true, 
                  oauth      : true, 
                  xfbml      : true  
                });
                FB.Event.subscribe('auth.login', function(response) {
                    window.location.reload();
                });
                FB.Event.subscribe('auth.logout',    function(response) {
                  window.location.reload();
                });
              };
            </script>

        <fb:login-button
           registration-url="...PATH/TO/THE/PAGE/FOR/REGISTERED/USERS.php" 
           on-login="console.log(arguments)"
        />
</body>

于 2013-01-20T16:56:07.383 に答える