6

うまくいけば、あなたはこの問題で私を助けることができます。

FB開発者サイトから基本的なログインボタンコードを取得し、そのまま書き留めています。

<div id="fb-root"></div>

<script>(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_GB/all.js#xfbml=1&appId=345451695525893";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>



<div class="fb-login-button" data-show-faces="false" data-width="200" data-max-  rows="1">Test text</div>

私が行っている唯一のカスタマイズは、デフォルトの「ログイン」テキストを自分のテキスト（この場合は「テストテキスト」）でオーバーライドすることです。これは、Facebookからログアウトしているときは正常に機能しますが、興味深いことに、（別のタブのFacebookサイトを介して）Facebookにログインし、戻って自分のページにアクセスすると、カスタムテキストが点滅し、ボタンがレンダリングされます。デフォルトの「ログイン」テキストで2回目。

何かアイデアはありますか、それともこれはFacebookの設計による機能ですか？

4

4 に答える 4

21

カスタムテキストを使用するには、以下を使用してください

<div class="fb-login-button" data-show-faces="false"  data-width="200" data-onlogin="afterLoginCallback()" login_text="Your Text" ></div>

login_textログインボタンのテキストを設定するためのプロパティが提供されていることに注意してください。設定しないと、Facebookが提供するデフォルトのテキストでテキストが上書きされます。

于 2012-11-01T07:28:10.193 に答える
8

fb-login-buttonコンポーネントへの最近の変更（1週間ほど前には、常にカスタムテキストを「ログイン」に書き換えているようです）を考えると、FacebookボタンとトリガーのカスタムCSSクラスを作成するのが最善の策です。 Javascriptを介したFB.Login。それは私がしたことであり、それはうまく機能しています。

標準のFacebookボタンとまったく同じように見え、カスタムテキストを簡単にサポートするFacebookボタンのCSSを次に示します。

a.fb-button {
    color: #FFF;
    display: inline-block;
    text-decoration: none;
}

.fb-button {
    background: #5F78AB;
    background-image: url('http://static.ak.fbcdn.net/rsrc.php/v2/yf/r/S-DbSHszr4D.png');  /*COPY TO YOUR OWN IMAGE STORE*/
    background-repeat: no-repeat;
    background-position: -1px -81px;
    border-top: 1px solid #29447E;
    border-right: 1px solid #29447E;
    border-bottom: 1px solid #1A356E;
    border-left: 1px solid #29447E;
    -webkit-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1), inset 0 1px 0 #8A9CC2;
    -moz-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1), inset 0 1px 0 #8a9cc2;
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1), inset 0 1px 0 #8A9CC2;
    cursor: pointer;
    font-family: 'lucida grande', tahoma, verdana, arial, sans-serif;
    font-size: 13px;
    font-weight: bold;
    height: 23px;
    line-height: 23px;
    padding: 0px 5px 0px 30px;
    text-align: left;
}

ページの要素は次のようになります

<a class="fb-button" onClick="fblogin();">Custom Text</a>

そして、JSはそのように機能します

var fblogin = function() {
    FB.login(function(response) {
        if (response) {
            if (response.authResponse) {
                //successful auth
                //do things like create account, redirect etc.
            } else {
                //unsuccessful auth
                //do things like notify user etc.
            }
        },{scope:'email,publish_stream'}); //whatever perms your app needs
};

もちろん、ページにfb root divを含め、この前にFacebookJSSDKを初期化する必要があります。

外観は次のとおりです。

カスタムテキスト付きのFacebookボタン

CSSの優れた点は、CSSを使用して、サポートされていないもの（Shareなど）用にサイト上に他のFacebookボタンを作成し、使い慣れたルックアンドフィールを使用できることです。さまざまなサイズのボタンを使用できるように、いくつかの追加のcssを作成することもできます。背景画像の背景位置とフォントサイズ、高さなどを変える必要があります。

于 2012-07-15T19:29:41.370 に答える
3

または、次を使用することもできます。

<div class="fb-login-button" data-login_text="Connect with FaceBook"></div>

また

<fb:login-button show-faces="true" width="200" max-rows="1" login_text="Connect with FaceBook"></fb:login-button>

1,2,3のように簡単:)

于 2013-11-21T13:51:55.463 に答える
0

これを試して、このようなdata-login-textを追加してください。

<div class="fb-login-button"
    data-login-text="Sign in with Facebook"
    data-max-rows="1"
    onlogin="window.location.reload()"
    data-size="large"
    data-show-faces="false"
    data-auto-logout-link="false">
</div>
于 2017-01-16T09:32:05.223 に答える