web-dev-qa-db-fra.com

Comment changer le bouton de connexion à Facebook avec mon image personnalisée

Mon script a un code comme celui-ci

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 utilise le plugin de bouton de connexion login par défaut de Facebook . Mais je voudrais utiliser mon image facebook connect personnalisée. Quelqu'un peut-il m'aider?

facebookfacebook-login
50
user1091558

La méthode que vous utilisez consiste à rendre le bouton de connexion à partir du code Javascript de Facebook. Cependant, vous pouvez écrire votre propre fonction de code Javascript pour imiter la fonctionnalité. Voici comment faire - 

1) Créez un simple lien de balise d'ancrage avec l'image que vous souhaitez afficher. Avoir une méthode onclick sur la balise anchor qui ferait le vrai travail. 

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

2) Ensuite, nous créons la fonction Javascript qui affichera le popup actuel et récupérera les informations complètes de l'utilisateur, si l'utilisateur le permet Nous gérons également le scénario si l'utilisateur refuse notre application 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) Nous avons terminé.

Veuillez noter que la fonction ci-dessus est entièrement testée et fonctionne. Il vous suffit de mettre votre identifiant d'application facebook et cela fonctionnera.

127
Sachin Khosla

Je l'ai eu avec un appel à quelque chose d'aussi simple que

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

Je ne sais pas si Facebook pourra jamais empêcher ce contournement, mais pour le moment, je peux utiliser le code HTML ou l'image que je souhaite appeler fb_login et tout fonctionne correctement.

Référence: Documents API Facebook

12
Christian Dechery

En réalité, il est uniquement possible d'utiliser CSS, mais l'image que vous utilisez pour remplacer doit avoir la même taille que le bouton de connexion à Facebook d'origine. Heureusement, Facebook propose le bouton dans différentes tailles.

De Facebook:

taille - Boutons de tailles différentes: petit, moyen, grand, xlarge - le défaut est moyen . https://developers.facebook.com/docs/reference/plugins/login/

Définissez l'opacité de connexion iframe sur 0 et affichez une image d'arrière-plan dans le div parent

.fb_iframe_widget iframe {
    opacity: 0;
}

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

Si vous utilisez une image plus grande que le bouton Facebook d'origine, la partie de l'image située en dehors de la largeur et de la hauteur du bouton d'origine ne sera pas cliquable.

6
CFE

Trouvé un site sur Google expliquant quelques modifications, selon l'auteur de la page fb n'autorise pas les boutons personnalisés . Voici le site.

Malheureusement, cela va à l’encontre des politiques des développeurs de Facebook, qui stipulent:

Vous ne devez pas contourner nos limitations prévues sur les fonctionnalités de base de Facebook.

Le bouton Facebook Connect est conçu pour être rendu au format FBML, ce qui signifie qu’il est uniquement conçu pour ressembler à la façon dont Facebook le permet.

4
justanotherhobbyist

Si vous ne souhaitez pas utiliser le codage, voici une extension pour Google Chrome appelée FB Refresh qui permet d'ajouter une image personnalisée à la connexion à votre page d'accueil Facebook. Vous pouvez utiliser des thèmes prédéfinis ou télécharger votre propre arrière-plan. Vous pouvez en lire plus ici.

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

0
Rahul Gupta