Come cambiare il pulsante di login facebook mia immagine personalizzata con

Question

Il mio script ha il codice come predefinito questo

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

Il suo utilizzo di facebook login button plugin. Ma mi piacerebbe usare la mia immagine Facebook Connect personalizzata. Qualcuno può aiutarmi?

Answer 1

Il metodo che si sta utilizzando è il pulsante di login del codice Javascript di Facebook. Tuttavia, è possibile scrivere la propria funzione di codice Javascript per simulare la funzionalità. Ecco come farlo -

1) Creare un collegamento di tag di ancoraggio semplice con l'immagine che si desidera mostrare. Avere un metodo onclick sul tag di ancoraggio che in realtà farebbe il vero lavoro.

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

2) Successivamente, creare la funzione JavaScript che mostrerà il popup reale e recupererà le informazioni per l'uso completa, se l'utente lo consente. Gestiamo anche lo scenario se l'utente disattiva la nostra app di 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) Ci sono fatto.

Si prega di notare che la funzione sopra è completamente testata e funziona. Hai solo bisogno di inserire il tuo ID APP per Facebook e funzionerà.

Answer 2

Trovato un sito su google che spiega alcune modifiche, secondo l'autore della pagina fb non consente pulsanti personalizzati. Heres the website.

Purtroppo, è contro le politiche di sviluppo di Facebook, in cui si afferma:

Non si deve aggirare i nostri limiti previsti sul core funzionalità di Facebook.

Il pulsante Connetti di Facebook è progettato per essere reso in FBML, il che significa che è pensato solo per guardare come Facebook lo consente.

Answer 3

In realtà è possibile utilizzare solo i CSS, tuttavia l'immagine che si utilizza per sostituire deve avere le stesse dimensioni del pulsante di accesso a Facebook originale. Fortunatamente Facebook consegna il pulsante in diverse dimensioni.

da Facebook:

dimensioni - Diverse pulsanti di dimensioni: piccolo, medio, grande, extra - il di default è di media. https://developers.facebook.com/docs/reference/plugins/login/

Impostare l'opacità di accesso iframe a 0 e mostrare un'immagine di sfondo nel div genitore

.fb_iframe_widget iframe { 
    opacity: 0; 
} 

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

Se si utilizza un'immagine che è più grande di quanto il pulsante originale facebook, la parte dell'immagine che è al di fuori della larghezza e dell'altezza del pulsante originale non sarà cliccabile.

Answer 4

ho ottenuto che funziona con una chiamata a qualcosa di semplice come

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

Non so se Facebook sarà mai in grado di bloccare questa elusione, ma per ora posso usare qualunque HTML o immagine che ho voglio chiamare fb_login e funziona bene.

Riferimento: Facebook API Docs

Answer 5

Se non si desidera utilizzare la codifica allora ecco un'estensione per Google Chrome chiamata FB Refresh in grado di aggiungere qualsiasi immagine personalizzata alla tua home page Facebook login. Puoi utilizzare temi pre-creati o caricare il tuo sfondo personale. Puoi leggere di più qui.

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