Améliorer ses commentaires avec FaceBook Connect

Si vous n’aimez pas Google Friend Connect pour vos commentaires, alors peut-être que vous préférerez Facebook Connect ? Ici même principe, utiliser l’API de Facebook afin que vos visiteurs n’aient pas à renseigner encore son Pseudo, son site et son email, il a juste a écrire son commentaire et à envoyer =)

Etape 1 : Télécharger et installer le plugin Facebook Connect pour WordPress.

Etape 2 : Créer une nouvelle clé API Facebook Developper. Pour cela cliquez sur Ajouter une application, puis complétez au fur et à mesure le profil de la nouvelle application. Vous aurez ainsi une clé d’API. (Pas besoin d’être développeur pour en acquérir une )

Etape 3 : Editez votre fichier « comments.php » de votre thème WordPress, ajoutez

Après votre formulaire de commentaire. Ensuite vous devez vérifier que

Se trouve dans votre fichier comment.php

Etape 4 : Activez le plugin Facebook Connect et entrez votre clé API secrète.

Etape 5 : Personnaliser les styles CSS.

Voici quelques styles modifiés pour le plugin par défaut. C’est le style de l’auteur, je ne vais pas en refaire un autre ^^

/* Facebook Connect Styles */
.facebook-connect{ /* I added this div wrapper myself, was not part of the plugin */
  position: relative;
  float: right;
  width: 300px;
  margin-top: -65px;
  text-align: right
}
 
.facebook-connect a,  /* you probably won't need this css */
.facebook-connect a:hover,
.facebook-connect a img,
.facebook-connect a:hover img{
  border: 0
}
 
.facebook-connect .fbc_connect_button_area { /* This is the button container for your comment form */
  border: 0;
  float:none;
  margin:0;
  padding:0
}
 
body .fbc_profile_header { /* I added body to override the CSS from Facebook Connect's default CSS */
  background:#000000 url("images/quote-bg-repeat5.jpg") repeat-x;
  border:1px solid #3d3e3d;
  border-right: 0;
  padding:10px 5px 5px 10px;
  position:fixed; top: 45%; right:0;
  text-align:left;
  width:220px
}
 
body .fbc_profile_header a.logout{ /* this is a custom class I added to the HTML in fbconnect.php */
  font-size: .9em;
  color: #999
}

Voir l’article original