Personnaliser l’affichage de votre like box

Publié le 29 juillet 2011 par Theussef @TheUssef

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.