it-swarm.com.de

So ändern Sie den Facebook-Login-Button mit meinem benutzerdefinierten Bild

Mein Skript hat einen solchen Code

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>';

Es verwendet das standardmäßige login button plugin von facebook . Aber ich würde gerne mein eigenes Facebook Connect Image verwenden. Kann mir jemand helfen?

50
user1091558

Die von Ihnen verwendete Methode ist das Rendern der Anmeldeschaltfläche aus dem Facebook-Javascript-Code. Sie können jedoch Ihre eigene Javascript-Code-Funktion schreiben, um die Funktionalität nachzubilden. So geht's - 

1) Erstellen Sie einen einfachen Ankertag-Link mit dem Bild, das Sie anzeigen möchten. Verwenden Sie eine onclick-Methode für den Anchor-Tag, die tatsächlich die eigentliche Aufgabe erfüllen würde. 

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

2) Als Nächstes erstellen wir die Javascript-Funktion, die das aktuelle Popup anzeigt und die vollständigen Benutzerinformationen abruft, wenn der Benutzer dies zulässt. Wir behandeln auch das Szenario, wenn der Nutzer unsere Facebook-App nicht zulässt.

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) Wir sind fertig.

Bitte beachten Sie, dass die obige Funktion vollständig getestet wurde und funktioniert. Sie müssen nur Ihre Facebook-APP-ID eingeben und es wird funktionieren.

127
Sachin Khosla

Ich bekam es mit einem Anruf zu etwas so einfachem wie

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

Ich weiß nicht, ob Facebook diese Umgehung jemals blockieren kann, aber jetzt kann ich alles HTML oder Bild verwenden, das ich fb_login nennen möchte.

Referenz: Facebook-API-Dokumente

12

Es ist eigentlich nur mit CSS möglich, das zu ersetzende Bild muss jedoch die gleiche Größe haben wie der ursprüngliche Facebook-Login-Button. Zum Glück liefert Facebook den Button in verschiedenen Größen.

Von Facebook:

größe - Verschiedene Tasten: klein, mittel, groß, xlarge - die Die Standardeinstellung ist medium . https://developers.facebook.com/docs/reference/plugins/login/

Legen Sie die Deckkraft für die iframe-Anmeldung auf 0 fest und zeigen Sie ein Hintergrundbild im übergeordneten Div an

.fb_iframe_widget iframe {
    opacity: 0;
}

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

Wenn Sie ein Bild verwenden, das größer als die ursprüngliche Facebook-Schaltfläche ist, kann der Teil des Bildes, der sich außerhalb der Breite und Höhe der ursprünglichen Schaltfläche befindet, nicht angeklickt werden.

6
CFE

Bei google wurde eine Website gefunden, in der einige Änderungen erläutert werden. Laut dem Autor der Seite erlaubt fb keine benutzerdefinierten Schaltflächen . Hier ist die Website.

Leider ist es gegen die Entwicklerrichtlinien von Facebook, die besagen:

Sie dürfen unsere beabsichtigten Einschränkungen bei den Kernfunktionen von Facebook nicht umgehen.

Die Facebook Connect-Schaltfläche soll in FBML gerendert werden, dh sie soll nur so aussehen, wie Facebook es zulässt.

4

Wenn Sie kein Coding verwenden möchten, finden Sie hier eine Erweiterung für Google Chrome namens FB Refresh, mit der Sie Ihrem Facebook-Homepage-Login jedes benutzerdefinierte Bild hinzufügen können. Sie können vorgefertigte Motive verwenden oder Ihren eigenen Hintergrund hochladen. Mehr darüber erfahren Sie hier.

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

0
Rahul Gupta