web-dev-qa-db-ja.com

カスタム画像でFacebookのログインボタンを変更する方法

私のスクリプトにはこのようなコードがあります

echo '<p class="wdfb_login_button"><fb:login-button scope="' .
     Wdfb_Permissions::get_permissions() . '" redirect-url="' .
     wdfb_get_login_redirect() . '">' .
     __("Login with Facebook", 'wdfb') . '</fb:login-button></p>';

Facebookのデフォルトの ログインボタンプラグイン を使用します。しかし、カスタムFacebook接続イメージを使用したいと思います。誰も私を助けることができますか？

facebookfacebook-login
52
Giri

使用しているメソッドは、Facebook Javascriptコードからのログインボタンのレンダリングです。ただし、独自のJavascriptコード関数を記述して、機能を模倣することができます。方法は次のとおりです-

1）表示したい画像で簡単なアンカータグリンクを作成します。実際に実際の作業を行うアンカータグにonclickメソッドがあります。

<a href="#" onclick="fb_login();"><img src="images/fb_login_awesome.jpg" border="0" alt=""></a>

2）次に、実際のポップアップを表示し、ユーザーが許可する場合は完全なユーザー情報を取得するJavascript関数を作成します。ユーザーがFacebookアプリを許可しない場合もシナリオを処理します。

window.fbAsyncInit = function() {
    FB.init({
        appId   : 'YOUR_APP_ID',
        oauth   : true,
        status  : true, // check login status
        cookie  : true, // enable cookies to allow the server to access the session
        xfbml   : true // parse XFBML
    });

  };

function fb_login(){
    FB.login(function(response) {

        if (response.authResponse) {
            console.log('Welcome!  Fetching your information.... ');
            //console.log(response); // dump complete info
            access_token = response.authResponse.accessToken; //get access token
            user_id = response.authResponse.userID; //get FB UID

            FB.api('/me', function(response) {
                user_email = response.email; //get user email
          // you can store this data into your database             
            });

        } else {
            //user hit cancel button
            console.log('User cancelled login or did not fully authorize.');

        }
    }, {
        scope: 'publish_stream,email'
    });
}
(function() {
    var e = document.createElement('script');
    e.src = document.location.protocol + '//connect.facebook.net/en_US/all.js';
    e.async = true;
    document.getElementById('fb-root').appendChild(e);
}());

3）完了です。

上記の機能は完全にテストされ、機能することに注意してください。あなたはあなたのfacebook APP IDを入れるだけで、それは機能します。

130
Sachin Khosla

私はそれを次のような単純なものへの呼び出しで動作させました

function fb_login() {
  FB.login( function() {}, { scope: 'email,public_profile' } );
}

Facebookがこの回避策をブロックできるかどうかはわかりませんが、今のところ、fb_loginそしてそれは正常に動作します。

参照： Facebook APIドキュメント

12
Christian Dechery

実際にはCSSを使用することだけが可能ですが、置き換えるために使用する画像は元のFacebookのログインボタンと同じサイズでなければなりません。幸いなことに、Facebookはさまざまなサイズのボタンを提供しています。

Facebookから：

size-サイズの異なるボタン：小、中、大、xlarge-デフォルトは中です。 https://developers.facebook.com/docs/reference/plugins/login/

ログインiframeの不透明度を0に設定し、親divに背景画像を表示します

.fb_iframe_widget iframe {
    opacity: 0;
}

.fb_iframe_widget {
  background-image: url(another-button.png);
  background-repeat: no-repeat; 
}

元のFacebookボタンよりも大きい画像を使用する場合、元のボタンの幅と高さの外側にある画像の部分はクリックできません。

6
CFE

Googleのサイトで、一部の変更を説明するサイトが見つかりました。ページの著者によると、fbはカスタムボタンを許可していません。 ウェブサイトはこちら

残念ながら、Facebookのデベロッパーポリシーに違反しています。

Facebookのコア機能に対する意図した制限を回避してはなりません。

Facebook ConnectボタンはFBMLでレンダリングすることを目的としています。つまり、Facebookで許可されている方法で表示することだけを目的としています。

4
justanotherhobbyist

コーディングを使用したくない場合は、ここにGoogleの拡張機能があります。Chrome FB Refreshと呼ばれ、Facebookホームページのログインに任意のカスタム画像を追加できます。独自の背景をアップロードしてください。詳細については、こちらをご覧ください。

http://www.crunchytricks.com/2015/02/how-to-change-refresh-facebook-homepage-login-screen.html

0
Rahul Gupta