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

Question

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

Answer 1

La méthode que vous utilisez est rendu bouton de connexion de l'Facebook code Javascript. Cependant, vous pouvez écrire votre propre code Javascript de la fonction pour imiter la fonctionnalité. Voici comment le faire -

1) Créer une simple balise d'ancrage lien avec l'image que vous souhaitez afficher. Avoir un onclick méthode sur la balise d'ancrage qui serait effectivement faire 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 va afficher les pop-up et va chercher la complète information de l'utilisateur, si l'utilisateur le permet. Nous nous occupons également de la scénario, si l'utilisateur n'autorise pas notre facebook app.

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 sommes fait.

Veuillez noter que la fonction ci-dessus est entièrement testé et fonctionne. Vous avez juste besoin de mettre votre facebook APP ID et il va fonctionner.

Answer 2

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 l'instant, je peux utiliser le code HTML ou l'image que je souhaite appeler fb_login et tout fonctionne correctement.

Answer 3

Il est effectivement possible qu'à l'aide de CSS, cependant, l'image que vous utilisez pour remplacer doit être de la même taille que l'original facebook bouton "se connecter". Heureusement, Facebook fournit le bouton dans différentes tailles.

De facebook:

la taille de Différentes tailles de boutons: small, medium, large, xlarge - la valeur par défaut est moyenne. https://developers.facebook.com/docs/reference/plugins/login/

Définissez la connexion iframe opacité de 0 et de montrer une image de fond 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 qui est plus grand que l'original facebook bouton, la partie de l'image qui est en dehors de la largeur et de la hauteur de l'original bouton n'est pas cliquable.

Answer 4

Trouvé un site sur google en expliquant certains changements, selon l'auteur de la page fb ne permet pas de boutons personnalisés. Heres le site web.

Malheureusement, c'est contre Facebook de développement de politiques de l'état:

Vous ne devez pas contourner les limitations sur le noyau de Facebook fonctionnalités.

Le Facebook Connect bouton est destiné à être rendus dans le FBML, ce qui signifie que c'est uniquement destinée à examiner la façon dont Facebook permet il.