le style css de l'facebook Bouton de Connexion, les meilleures pratiques

Je suis en utilisant le Facebook Bouton De Connexion pour la connexion Unique dans ma webapp (code ci-dessous). Mais je ne peux pas comprendre comment le contrôle du bouton de styles css. Je vois le Facebook plugin insère un iframe dans ma page...

<div id="fb-root"></div>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/fr_CA/all.js#xfbml=1&appId=myid";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<div class="fb-login-button" data-max-rows="1" data-size="large" data-show-faces="false" data-auto-logout-link="true"></div>

Mais cela ne rend pas :

.fb-login-button {
    width: 300px !important;
    font-size: 16px !important;
    line-height: 30px !important;
    padding: 3px 8px !important;
}

JSfiddle : http://jsfiddle.net/4SqGn/

Savez-vous comment faire pour contrôler les styles de bouton s'il vous plaît ?

Créer le travail de violon pour le code, afin que nous puissions examiner votre problème et de la solution. Merci.
désolé, j'ai ajouté le jsfiddle

OriginalL'auteur Louis | 2014-03-07

  1. 2

    Comme vous pouvez le voir dans le fb docu, la div.fb-login-button est remplacé par un iframe par le script vous chargez de l'extérieur. Le style de ce bouton, vous-même, vous pouvez simplement créer un bouton qui est de style en fonction de vos souhaits et de déclencher le mécanisme de connexion vous-même.

    Pour plus d'informations, lisez ici.

    merci, j'ai pris le démarrage rapide code à partir de votre lien, mais le bouton est qu'ils utilisent <fb:login-button show-faces="true" size="xlarge" max-rows="1" onlogin="Log.info('onlogin_callback')">Facebook</fb:login-button> est toujours le FB de Connexion "bouton". Pouvez-vous fournir un replacenet code pour un bouton personnalisable qui fonctionne avec l'api ? ...c'est à dire <div id="customFbBtn" type="button" class="customFbSignIn" onclick='FB.login(function(response){});'> <span class="FBicon"></span> <span class="FBbuttonText">Sign in with Facebook</span> </div> ne pas déclencher le login

    OriginalL'auteur DonJuwe

  2. 1

    Bien qu'assez ancien, mais voici un exemple de code que j'utilise.

    <!--HTML-->
<button id="customBtn" (click)='checkLoginState();'>
  <span class="icon"></span>
  <span class="buttonText">Facebook</span>
</button>
<div id='fb-status-login'></div>

    Ci-dessous est le CSS(Inspiré par bouton google), vous pouvez utiliser. Pour le logo, vous pouvez télécharger n'importe quel 32px*32px png.

    //CSS
#customBtn {
    display: inline-block;
    background: white;
    color: #444;
    width: 190px;
    border-radius: 5px;
    border: thin solid #888;
    box-shadow: 1px 1px 1px grey;
    white-space: nowrap;
  }
  #customBtn:hover {
    cursor: pointer;
  }
  span.label {
    font-family: serif;
    font-weight: normal;
  }
  span.icon {
    background: url('/assets/images/f-normal.png') transparent 5px 50% no-repeat;
    display: inline-block;
    vertical-align: middle;
    width: 42px;
    height: 42px;
  }
  span.buttonText {
    display: inline-block;
    vertical-align: middle;
    padding-left: 42px;
    padding-right: 42px;
    font-size: 14px;
    font-weight: bold;
    /* Use the Roboto font that is loaded in the <head> */
    font-family: 'Roboto', sans-serif;
  }

    À l'intérieur de votre composante (je suis en utilisant Angulaire 4), vous pouvez définir la fonction comme ceci.

    public checkLoginState() {
   console.log('checking login status');
    FB.getLoginStatus((response)=> {
      this.statusChangeCallback(response);
    });
  }
  public statusChangeCallback(response) {
    console.log('statusChangeCallback');
    console.log(response);
    if (response.status === 'connected') {
      console.log('status was already connected. will test api.');
     this.testAPI();
    } else if(response.status ==='not_authorized'){
      console.log('status was not authorised. will call login');

      FB.login((response)=> {
        if (response.status === 'connected') {
          console.log('status is now connected. will test api.');

          this.testAPI();
        } else {
          console.log('fatal.');

          document.getElementById('fb-status-login').innerHTML = 'some serious shit happened'; 
        }
      });

    } else{
      document.getElementById('fb-status-login').innerHTML = 'Please log ' +
        'into this app.';
    }
  }
  public  testAPI() {
    console.log('Welcome!  Fetching your information.... ');
    FB.api('/me', function(response) {
      console.log('Successful login for: ' + response.name);
      document.getElementById('fb-status-login').innerHTML =
        'Thanks for logging in, ' + response.name + '!';
    });
  }
    Vous signifiait click au lieu de (click) pour l'attribut HTML nom, n'est-ce pas?
    Comme je l'ai mentionné, je suis en utilisant angulaire (clic) est une syntaxe valide. Mais vous pouvez utiliser onclick pour html normal.

    OriginalL'auteur Manish Bansal

  3. 0

    J'ai compris, vous pouvez utiliser l' (sans-papiers) colorscheme attribut ("lumière" ou "noire") avec le Bouton de Connexion, qui est pour l'utiliser avec d'autres Facebook Social Plugins - bouton Like etc.

    Cela donne une alternative à la couleur du texte, et adapté à mes exigences que j'avais un fond noir et le défaut de la "lumière" modèle utilise des textes en noir, ce qui signifie pas de texte dans le FB iframe était visible avec les paramètres par défaut.

    E. g.

    Si vous avez besoin de plus de contrôle sur l'apparence, vous seriez mieux de créer votre propre bouton et utilisez le SDK Javascript pour construire quelque chose de personnalisé:
    https://developers.facebook.com/docs/facebook-login/manually-build-a-login-flow/v2.3

    OriginalL'auteur NeilB