JumpTop

[TUTO] Comment modifier le CSS du widget Fans page de Facebook

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.






L'auteur de l'article
, Directeur Artistique, Webdesigner. Vous pouvez voir mes travaux sur mon folio, ou me suivre sur mon Twitter.



45 commentaires

  1. 1 losaNo Gravatar dit :
    14 juillet 2010 à 23:11

    Bonjour , tout d’abord merci pour l’astuce , marre de ce blanc et bleu facebook :s

    http://www.scalppaintball.com/blogscalp/ la CSS a bien pris mais pas les boutons et le nombre de fan , sachant que je n’ai pas modifié ton code …

    Je ne vois pas trop quoi modifier pour arrivé à un résultat propre ; merci :)

  2. 2 olivierNo Gravatar dit :
    16 juillet 2010 à 15:58

    bonjour, je ne parviens pas à trouver la clé api (FB.init). sur la page facebook de création de la like box on obtient uniquement un id… j’ai beau chercher mais je ne trouve rien. quelqu’un pourrait m’aider ?

    merci !

  3. 3 losaNo Gravatar dit :
    16 juillet 2010 à 17:51

    Je répond à mon problème , à chaque changement de CSS il faut ajouter après le .css un point d »interrogation suivi d’un chiffre , exemple :. css?1 , .css?2 etc …
    pour chaque changement de css sinon il ne sera pas pris en compte…

    En créant la page on a un ID et un numéro API

  4. 4 olivierNo Gravatar dit :
    19 juillet 2010 à 16:13

    merci

  5. 5 whatsmynameNo Gravatar dit :
    1 août 2010 à 2:24

    FB.init( »000000000000000000000000?)
    l’explication est un peu flou pour moi je vois pas quelle chiffre mettre ???
    peux-tu me précisé stp ?

  6. 6 yop!No Gravatar dit :
    18 octobre 2010 à 16:27

    Merci pour cette astuce, indispensable ;)

  7. 7 John's GraphismeNo Gravatar dit :
    18 octobre 2010 à 16:31

    @Yop : content que ça ait pu t’aider ;-)

  8. 8 Jonas SkafteNo Gravatar dit :
    11 janvier 2011 à 0:31

    Hi John,

    (I hope it is okay that I write you in English – I do not speak French, unfortunately)

    I just stumbled upon your great article here, as I am currently on the lookout for someone who can help me with a Fan Box modification that I am having some issues with.

    It is for a fully non-profit project, where I am trying to raise money and awareness for male cancer. So unfortunately I cannot pay you any money, and I fully understand if you therefore do not have the time to help me – al though it would make me really happy if you would take a quick look at it.

    The modifications are:

    1. (the most important)
    I would like to hide or remove the ‘XX persons likes this’ at the top of the widget, as I have installed a separate like button underneath – do you know how to do this?

    2.
    As you can see on my page, I have tried to adjust the widget to the websites grid (sidebar width 220px) – do you have any good tips on how to make the widget exactly the same?

    Here is my current code: http://jonasskafte.com/balls/stylesheet3.css

    -and here is my page: http://runningforballs.com/

    Hoping to hear back from you, and thanks in advance.

    //Jonas.

  9. 9 John's GraphismeNo Gravatar dit :
    11 janvier 2011 à 12:17

    Thank you for this comment, that given pleasure. On the other hand, I could not help you on your problems, because that is on the level of API of facebook that the widget is managed.

    Afflicted.

  10. 10 Jonas SkafteNo Gravatar dit :
    11 janvier 2011 à 14:50

    Hi John,

    Ok – but thanks for taking the time to reply me :-)

    Have a good day.

    /Jonas.

  11. 11 John's GraphismeNo Gravatar dit :
    11 janvier 2011 à 15:06

    @Jonas : sorry for my English dude. Have a good day too ;-)

  12. 12 MattNo Gravatar dit :
    1 février 2011 à 20:01

    Hello, merci pour l’astuce mais je ne trouve pas mon ID FB.init !

    Tu ne pourrais pas m’éclairer la dessus ?

    Merci d’avance

  13. 13 John's GraphismeNo Gravatar dit :
    1 février 2011 à 20:58

    @Matt : http://developers.facebook.com/docs/reference/javascript/FB.init tu as quelques infos ici, par contre, je suis en train de rechercher, mais il me semble que certaines choses ont changé :’(

  14. 14 MatdollarsNo Gravatar dit :
    25 février 2011 à 1:21

    @John’s Graphisme qu’est ce qui a changé ?
    J essaye en local mais ca ne fonctionne pas, c’est peut-être normal.

  15. 15 John's GraphismeNo Gravatar dit :
    25 février 2011 à 10:05

    @Matdollars : et bien la page sur laquelle tu trouvais les infos avant a complétement changé, et je ne sais plus ou trouver l’ID :(

  16. 16 MatdollarsNo Gravatar dit :
    25 février 2011 à 12:36

    Pour l’ID de ta page facebook, tu va sur ta page facebook et tu pointe la souris sur ta photo et tu verra en barre d’état (testé sur firefox) ton ID.

  17. 17 John's GraphismeNo Gravatar dit :
    25 février 2011 à 12:44

    @Matdollars : ce que je cherche à retrouver c’est plutôt le FB.init :(

  18. 18 MatdollarsNo Gravatar dit :
    25 février 2011 à 12:46

    Oups pardon…

  19. 19 John's GraphismeNo Gravatar dit :
    25 février 2011 à 13:19

    @Matdollars : pas de soucis, t’inquiètes ;-)

  20. 20 BenoistNo Gravatar dit :
    1 mars 2011 à 11:28

    Superbe code, bravo ! J’ai un petit soucis : Sous le bouton j’aime j’ai un cadre bleu qui fait toute la largeur alors que toi c’est propre c’est bien ton fond qui est affiché. J’ai essayé de bidouiller, mais en css je ne suis pas doué…

    De même j’ai essayé de mettre 4 fans sur une même ligne, impossible, pourtant j’ai augmenté le width dans le css et le widget… Une idée (surtout pour la couleur) :)

  21. 21 BenoistNo Gravatar dit :
    1 mars 2011 à 11:43

    Je crois avoir compris, il récupère le background beleu qui entoure ma sidebar…
    Comment je peux lui dire d’aller chercher le background des pages (c’est blanc… ?

  22. 22 BenoistNo Gravatar dit :
    1 mars 2011 à 12:19

    Non en fait c’est le FB.init qui n’est pas le bon, il ne va pas chercher la feuille .css

    J’essaye de le trouver mais pour le moment :(

  23. 23 John's GraphismeNo Gravatar dit :
    1 mars 2011 à 12:44

    @Benoist : oui, il y a un soucis pour retrouver le FB.init d’une page Facebook. Pour la feuille de style, il faut bien indiquer le chemin ou elle se trouve. Ensuite dans le CSS mets un border : none pour enlever la bordure bleu ;-)
    Si tu trouves les FB.init n’hésites pas à me le faire savoir.

  24. 24 BenoistNo Gravatar dit :
    1 mars 2011 à 13:19

    J’ai trouvé pour FB.init. Il faut créer une application sur http://www.facebook.com/developers/. On te donne une clef publique et secrète, tu utilises ta clef secrète et ca fonctionne. Par contre j’ai toujours ma bande bleue sous J’aime, vous aimez Ca Je n’aime plus… Je le met où le border:none; ?

  25. 25 MatdollarsNo Gravatar dit :
    1 mars 2011 à 14:13

    C’est pas la même chose le FB.init et l’ID ?
    @jhon’s tu modifiera ton article si tu trouve ?

  26. 26 John's GraphismeNo Gravatar dit :
    1 mars 2011 à 15:06

    @Matdollars : non, ça n’est pas la même chose, c’est la clé de l’API le FB.init

  27. 27 John's GraphismeNo Gravatar dit :
    1 mars 2011 à 15:08

    @Benoist : donne moi l’adresse de là ou je peux voir ton soucis ;-)

  28. 28 BenoistNo Gravatar dit :
    1 mars 2011 à 15:11

    Merci John : http://ns208255.ovh.net/~template/

    C’est mon blog test, je fignole mon nouveau template ;)

  29. 29 John's GraphismeNo Gravatar dit :
    1 mars 2011 à 15:45

    @Benoist : tu as des width : 210px un peu partout, 210px ça correspond à mon site. Tu as un connections= »3″ également, si tu veux 4 vignettes il faut mettre 4. Pour la bade bleu je suis en train de voir.

  30. 30 John's GraphismeNo Gravatar dit :
    1 mars 2011 à 15:59

    @Benoist : dans ton css il faut que tu mettes ça : fan_box div {
    background: #FFFFFF repeat;
    }
    afin de mettre ton fond en blanc ;-)

  31. 31 Julie FranckNo Gravatar dit :
    1 mars 2011 à 16:05

    Héhé bon tuto ! J’ai fais le mien sur mon blog samedi et c’est vraiment sympas et à la porté de tous !

  32. 32 BenoistNo Gravatar dit :
    1 mars 2011 à 16:14

    C’est super sympa John :) Bon ça ne marche pas, je pense que c’est le FB.init qui n’est pas bon… car quand je le laisse vide, j’ai le même résultat !

    Merci pour ton aide en tout cas :)

  33. 33 John's GraphismeNo Gravatar dit :
    1 mars 2011 à 16:14

    @Julie Franck : d’ailleurs c’est très très bien réussi ;-)

  34. 34 John's GraphismeNo Gravatar dit :
    1 mars 2011 à 16:15

    @Benoist : de rien Msieur ;-)

  35. 35 TromaNo Gravatar dit :
    2 mars 2011 à 13:28

    Bonjour, j’aimerai proposer une likebox sur le site pour lequel je travaille mais je suis aussi bloqué par le manque de valeur pour le FB.ini. je vois que le premier posteur, lola, a réussi a modifier sa likebox en mettant le texte en rouge par exemple… comment pourrai je obtenir un résultat similaire?

  36. 36 John's GraphismeNo Gravatar dit :
    2 mars 2011 à 15:43

    @Troma : afin de modifier la couleur du texte, la taille du texte, ou tout autre élément, il est nécessaire de modifier le fichier CSS.

  37. 37 TromaNo Gravatar dit :
    2 mars 2011 à 15:50

    Oui je sais, mais je me demandai comment Losa avait réussi a récuperer le FB.init mais je suis bloqué comme Benoist. Je vais continuer a chercher.

  38. 38 John's GraphismeNo Gravatar dit :
    2 mars 2011 à 16:12

    @Troma : son commentaire date de Juillet 2010, à cette époque on trouvait le FB.init sur la page que j’indique dans le tuto :(

  39. 39 FgNo Gravatar dit :
    4 mars 2011 à 19:56

    Bonjour,

    J’essaye aussi d’intégrer le like-box facebook !
    Sauf qu’apparemment cela a bien changé depuis le tutoriel :s

    Aussi, je me demande s’il est possible d’appliquer du Css sur la like-box trouvée ici :
    http://developers.facebook.com/docs/reference/plugins/like-box/

    La bordure est irritante et tue littéralement mon border-radius

    De la même façon si je pouvais supprimer le « Module social Facebook » qui apparaît au bas de la box ça serait un peu plus pro.

    Merci d’avance

  40. 40 LaporteNo Gravatar dit :
    10 mars 2011 à 18:47

    Vous pouvez voir le like-box facebook sur mon site http://www.billet-voyage.com
    Merci

  41. 41 John's GraphismeNo Gravatar dit :
    10 mars 2011 à 19:55

    @Fg : je ne me suis pas posé la question sur la nouvelle ‘likebox’ et le css, je n’ai pas encore eut le temps d’étudier le truc. Mais je pense que l’on peut appliquer du CSS, faut tester.
    @Laporte : que puis-je faire pour toi ?

  42. 42 matdollarsNo Gravatar dit :
    19 mars 2011 à 12:53

    Est-ce que le tuto est a jour maintenant. Car tu chercher à retrouver le FB.init ?

  43. 43 olybopNo Gravatar dit :
    31 mars 2011 à 15:24

    tjs d’actualité ce tuto ? car c’est vraiment terrible moi qui aime personnaliser tout ce que j’ai entre les mains ^^

  44. 44 jolannNo Gravatar dit :
    17 mai 2011 à 10:02

    Dommage que le tutoriel ne soit plus utilisable…En ce qui me concerne je galère à changer juste la couleur…

  45. 45 John's GraphismeNo Gravatar dit :
    17 mai 2011 à 11:08

    @tous : le tuto est toujours utilisable, le fait de mettre un css est toujours d’actualité. Après ce qu’il est important de savoir, c’est que j’ai énormément de boulot en ce moment, que je tiens à jour du mieux que je peux ce site.

    Je peux vous dire qu’il est utilisable, car je l’ai encore utilisé il y a une semaine à peine.

    Voila les amis, par contre il va falloir creuser un peu ;-)

Aucun trackback