Cela fait quelques semaines que j’ai décidé de mettre le widget “fans page” de Facebook dans ma sidebar, mais il faut dire que la version qui est proposée est beaucoup trop bleu à mon goût. Le problème c’est surtout que ce widget ne s’accorde pas du tout avec les couleurs de votre thème, comme pour moi. Alors une solution existe, c’est de modifier le CSS de celui-ci afin de le rendre plus funny.

Dans un premier temps il faut choisir l’emplacement du widget. Une fois celui-ci trouvé, il faut insérer ce code :

    <script src="http://static.ak.connect.facebook.com/js/api_lib/v0.4/FeatureLoader.js.php/fr_FR" type="text/javascript"></script> 	                                                                                                            
    <script type="text/javascript">FB.init("000000000000000000000000");</script>
    <fb:fan profile_id="0000000000000000" stream="0" connections="3" css="http://www.mon-domaine.com/facebook.css" logobar="0" height="140px" width="210px"></fb:fan>

Ensuite, il faut vous rendre à cette page afin de récupérer des infos.
Maintenant, regardons ce code afin de voir ce qu’il y a à modifier et à quoi correspondent les éléments.
1 – il faut modifier le FB.init(“000000000000000000000000″) par la suite de chiffres et de lettres que vous allez trouver dans la page que vous venez d’ouvrir.
2 – il faut modifier le profile_id=”0000000000000000″ que vous allez trouver au même endroit.
3 – stream=”0″ c’est le fil d’actualité, 0 pour non et 1 pour oui.
4 – connections=”3″ c’est le nombre de vignettes que vous voulez voir apparaître.
5 – css=”http://www.mon-domaine.com/facebook.css” le chemin qui correspond à l’endroit ou vous avez mis le css.
6 – logobar=”0″ c’est pour le logo Facebook, 0 pour non, et 1 pour oui.

Maintenant que vous avez inséré et modifié ce code, il ne reste plus que le CSS que voici :

    .fan_box .full_widget {
 
  border:0px solid #000000;
	display:block;
	height:260px; 
	width:210px;
 
	padding:0px;
	margin:0 5px 0 0px;
	background:transparent;
	color:#000000;
	text-align:left;
 
}
.fan_box div  { background:transparent; }
.fan_box .connections {
  border-top:0px dashed #FFFFFF;
  width:210px;
  text-align:left;
  padding:10px 0 10px 0px;
  color:#454545;
  font-size:12px;
  position:absolute;
  margin:70px 0 0 0px;
}
 
.fan_box .connections_grid {
   padding:10px 0 0px 0px;
   clear:both;
   position:absolute;
   margin:-108px 0 0 0;
   width:210px;
 
}
.fan_box .grid_item {
  padding:0;  
  margin:0 0 6px 10px;
  width:58px;
  height:70px;
float:left;
}
.fan_box .grid_item img {
  border-right:1px solid #ccc;
  border-bottom:1px solid #ccc;
  padding:2px;
  background:#fff;
  margin:10px 0 10px 0;
}
.fan_box .connect_button  {
      padding:8px 0 0 0px;
      z-index:1000;
}
 
.fan_box .connect_top,.fan_box .connect_top a {
    color:#454545;
  font-size:12px;
}
.fan_box .connect_top {
  display:block; 
  padding:0 0 0 0;
   position:absolute;
   margin:100px 0 0 0;
   width:210px; 
   text-align:left;
   z-index:1000;
}
.fan_box .connect_top img {
  display:none;
}
 
.name_block a { display:none; }
.name_block { display:block;   }
.connect_span { padding:0 0 0 0;  }

Il ne vous reste plus qu’à copier/coller ce code dans votre notepad++ et d’enregistrer le fichier en .css sous le nom que vous voulez, et de l’uploader sur votre serveur FTP.
Une fois cette dernière opération terminée, vous obtiendrez quelque chose de plus sympa et plus en adéquation avec vos couleurs de votre thème.

La Newsletter :

Si vous souhaitez recevoir par email les dernières News du Blog John's Graphisme, vous pouvez vous abonner ici :