Modifier le widget fan page box Facebook


Back to trucs et astuces.


moderator    (2010-04-08)

moderator

Modifier le widget fan page box Facebook

Parce que cela peut intéresser de nombreux webmasters, voici comment j'ai finalement pu intégrer la widget fan page box de Facebook au design du blog buzz, l'idée étant de rendre la box transparente.

Il a fallu pour cela intégrer un petit fichier CSS au code fourni par Facebook, comme suit :

<script type="text/javascript" src="http://static.ak.connect.facebook.com/connect.php/en_US"></script><script type="text/javascript">FB.init("XXXXXXXXXXXXXXXXXXXXXX");</script><fb:fan profile_id="XXXXXXXXXXXX" connections="8" logobar="0" width="365" height="155" css="http://www.ficgs.com/styles/widget_facebook.css?<? print rand(0,10000); ?>"></fb:fan>


Vous noterez l'insertion d'un cache-breaker (uniquement pendant les tests) à la fin du nom du fichier CSS, car sans cela le cache empêche de voir "en temps réel" les modifications, malgré les mises à jour avec Reload.

Et voici le contenu du fichier CSS à remanier à votre guise, à noter qu'il est contre les termes et conditions de Facebook de masquer toutes les informations sauf le bouton lui-même !

.fan_box .full_widget {
border:0px solid #000000;
display:block;
width:365px;
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:365px;
text-align:left;
padding:10px 0 10px 0px;
color:#000000;
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:365px;
}
.fan_box .grid_item {
padding:0;
margin:0 0 0px 0px;
width:58px;
height:70px;
float:left;
}
.fan_box .grid_item img {
border-right:1px;
border-bottom:1px;
padding:2px;
background:transparent;
margin:10px 0 10px 0;
}
.fan_box .connect_button  {
padding:0px 0px 0px 0px;
z-index:1000;
}
.fan_box .connect_top,.fan_box .connect_top a {
color:#000000;
font-size:14px;
}
.fan_box .connect_top {
display:block;
padding:0 0 0 0;
position:absolute;
margin:100px 0 0 0;
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;  }


Ce code a lui même été adapté de celui fourni dans ce blog, je profite de l'occasion pour en remercier son auteur.



(more options below)

*niduzi    (2010-04-15 18:04:34)
Modifier le widget fan page box Facebook

Bizarre ton astuce marchait jusqu'à hier et tout d'un coup ça a arrêté de fonctionner, Facebook a changé quelque chose dans son code ?


*nevepu    (2010-09-14 17:40:13)
Il y a 14 ans

soyer les bienvenu  www.cinehoom.blogspot.com


Voir aussi


ficgs
Plus de sources

Vous devez vous enregistrer pour consulter ces sources, vous pourrez alors changer leur ordre en cliquant sur les icones les précédant.



admin
Autres sources

Ce projet est collaboratif, vous pouvez remonter les sources suivantes dans la liste si vous les trouvez utiles.


 Créer une page fan Facebook pour son blog | L'app-top
meilleures applications > facebook/creer page fan facebook pour blog
  1. Dans la rubrique articles cliquez sur « modifier » et sur
  2. extrait du début de chaque nouveau billet publié sur le
 Authentifier une page Fan Facebook De L'aide!
commentcamarche > forum/affich 16419135 authentifier une page fan facebook de l

« En passant au cloud, les entreprises doivent garder le contrôle...
Facebook : les professionnels doivent-ils y passer ? Facebook est...

 Displaying your blog inside Facebook in 6 simple steps | Yann "Bug" Dubois
yann > en/displaying your blog inside facebook in 6 simple steps 23/09/2009

Apprendre la programmation aux enfants avec le langage...
Comment démonter un Sony VAIO pour remplacer le disque...

 Integrer un widget fan-box facebook dans un site web
facebooker > integrer un widget fan box facebook dans un site web

Integrer un widget fan-box facebook dans un site...
Essayons de comprendre ce code pour pouvoir le personnaliser...

 Facebook Fan Page
scribd > doc/28348231/Facebook Fan Page

Facebook se retrouve aujourd’hui quasiment dans la même situation...
Facebook compte 15 millions de membres actifs en France et...

 Widgetbox › LE GABON ENERVANT Widget
widgetbox > widget/le gabon enervant

Log in to comment with Facebook by clicking the button...
Please provide some details below (800 characters...

 Netvibes launch a 1 GB personal web storage module !
blog.netvibes > netvibes welcome a free 1 giga web harddrive for every netvibes

Netvibes for your company : save time and increase...
Simply fantastic, netvibes is far of the most personal page setvice...
please add you requests, we are considering upgrading the module with...

 Facebook Widget Fan Box | Bienvenue SocialMediaMarketingSecret.com
socialmediamarketingsecret > fr/facebook widget ecco le fan box

Découvrez comment rentabiliser le réseau social le plus populaire...
Facebook Crédits , Voici venir l'argent virtuel...

 Support WordPress Francophone / Customisé sa fan box facebook dans .css
wordpress fr > support/viewtopic.php?pid=187280

Puis j'ai modifié une ligne pour intégré mon CSS perso :...
La communauté francophone autour de WordPress et WordPress...

 Aide de Quomodo - Tutoriels - J'ajoute un widget Facebook à ma page
aide.quomodo > tutoriels j ajoute un widget facebook a ma page

 49ers Paradise - San Francisco 49ersparadise.com
49ersparadise

Anthony Dixon RB Kyle Williams WR Phillip Adams CB Nate Byham TE...
Mike Balogun LB Tramaine Brock CB Jarrett Brown QB Alonzo Durham...
Arnaz Battle WR Tony Pashos OL Isaac Bruce WR Marcus Hudson CB...

 Planet go-oo
planet.go oo

 Créer un Groupe ou une Page Fan? - Facebook Marketing : Blog Conseils et Applications
facebook marketing > post/383576371/creer un groupe ou une page fan

contrairement aux pages fans qui sont publiques par défaut, les...
groupes et page fans sont ex-aequo puisque leurs notifications sont...
groupes et pages sont désormais indexés par les moteurs ce qui...

 Inside Facebook France - Toute l’actualité de Facebook pour les développeurs et les acteurs du marketing
fr.insidefacebook

Ce que disent les principaux développeurs des prochains changements...
NutshellMail crée une nouvelle fonctionnalité de Newsletter pour...

 Add-facebook-fan-box-widget - Posts BlogBang
blogbang > posts/567650 add facebook fan box widget

Notre ami JcFrog dans ses oeuvres, toujours aussi bon, un talent...
Découvrez City Ville : le nouveau raz-de-marée de social gaming de...

 Free juanita du plessis Download
wareseeker > free juanita du plessis

var pageOptions = { 'pubId' : 'pub-8098918000470057', 'channel' :...
7) { alert('can not compare more than 8...

 status posts - Webware - CNET
news.cnet > webware/?keyword=status

Another way to get much-desired natural gas: start-up raises money...
Study: Twitter users young, wireless, on other social...
In part three of a behind-the-scenes look at the development of...

 Aide | Facebook
fr fr.facebook > help/?page=830

Comment faire d’une photo dans laquelle je suis identifié(e) la...
Comment modifier les paramètres de confidentialité de mes albums...

 Blogger: Une erreur s'est produite lors du traitement de votre demande
kinkustom.blogspot > 2009/09/best box ever part 2 air yeezy

 UsingMac.com - Mac Tricks and Tips, Wallpapers and Applications for Mac Users
usingmac

30 Appealing and Excellent Digital Art Wallpapers for...
Leopard - Quick Dictionary and Customizing Keyboard...


Response  
 

Guest name   (option)     Register
Please sum : 5881 + two  




Trackbacks : If you talked about this article in your blog or website, you may instantly get a backlink 
There's no trackback at the moment.