Personnaliser l’affichage de votre like box

La personnalisation des plugins fournis par Facebook n’est pas une tache facile du tout grâce à la somme des détails et des informations offertes sur Facebook.C’est pour cela et grâce à l’aide de Daddydesigns pour leurs inspiration pour rédiger ce petit guide que je l’ai créé sur deux parties : 

• Créer la feuille de style de votre like box
• Créer le code de votre like box

Lets Go !!  Créer un fichier avec l’extension .css nommer le par exemple « fb.css » et ecrire dedans ce code : 

 CSS |  Copier le code |? 
01
02
/*---------------Japprend.Com LikeBox Starts--------------*/
03
.fan_box a:hover{ 
04
  text-decoration: none; 
05
}
06
 
07
.fan_box .full_widget{ 
08
  height: 200px; 
09
  border: 0 !important; 
10
  background: none !important; 
11
  position: relative; 
12
}
13
 
14
.fan_box .connect_top{ 
15
  background: none !important; 
16
  padding: 0 !important; 
17
}
18
 
19
.fan_box .profileimage, .fan_box .name_block{ 
20
  display: none; 
21
}
22
 
23
.fan_box .connect_action{ 
24
  padding: 0 !important; 
25
}
26
 
27
.fan_box .connections{ 
28
  padding: 0 !important; 
29
  border: 0 !important; 
30
  font-family: Arial, Helvetica, sans-serif; 
31
  font-size: 11px; 
32
  font-weight: bold; 
33
  color: #666; 
34
}
35
 
36
span.total{ 
37
  color: #333333; 
38
  font-weight: bold; 
39
}
40
 
41
.fan_box .connections .connections_grid { 
42
  padding-top: 10px !important; 
43
}
44
 
45
.fan_box .connections_grid .grid_item{ 
46
  padding: 0 10px 10px 0 !important; 
47
}
48
 
49
.fan_box .connections_grid .grid_item .name{ 
50
  font-family: "lucida grande",tahoma,verdana,arial,sans-serif; 
51
  font-weight: normal; 
52
  color: #333333 !important; 
53
  padding-top: 1px !important; 
54
}
55
 
56
.fan_box .connect_get{ 
57
position: absolute; 
58
bottom: 0; 
59
left: 0px; 
60
margin: 0 !important; 
61
}
62
 
63
.fan_box .connect_widget .connect_widget_interactive_area { 
64
margin: 0 !important; 
65
}
66
 
67
.fan_box .connect_widget td.connect_widget_vertical_center { 
68
padding: 0 !important; 
69
}
70
 
71
/*---------------Japprend.Com LikeBox Ends--------------*/
72

 HTML |  Copier le code |? 
1
<script type="text/javascript" src="http://static.ak.connect.facebook.com/js/api_lib/v0.4/FeatureLoader.js.php/fr_FR"></script> 
2
<script type="text/javascript">FB.init("");</script> 
3
<fb:fan profile_id="ID_De_Votre_PageFan" stream="0" connections="10" width="400px" height="200px" header="0" logobar="0"   css="Lien_Vers_Votre_Feuille_De_Style.css"></fb:fan>

• ID_De_Votre_PageFan : identifiant de votre page fan sur facebook, vous pouvez l’obtenir soit à partir du lien de votre page :

https://www.facebook.com/pages/Ma-Page-Fan/147104632016744

Ou bien du lien du modification de votre page fan :

https://www.facebook.com/pages/edit/?id=1667520065682&sk=basic

• Lien_Vers_Votre_Feuille_De_Style.css : après que vous uploader le fichier .css de votre feuille de style le lien vers ce fichier sera : 

http://votresiteweb.com/fb.css 

c’est ce lien là que vous devez mettre dans cett valeur.