Gadget Fans Facebook flottant sur Blogger



Voici le gadget Module Social Facebook  (Fans sur Facebook) flottant sur votre blogs. Au repos, le gadget affiche juste un petit logo Facebook sur le coté droit de votre blog, logo qui reste fixé au même endroit, que le lecteur monte ou descende la page. 


Gadget module social Facebook flottant sur Blogger

Lorsque la souris passe sur le logo, celui-ci s'étend pour afficher le Module social Facebook, un échantillon  des Fans de votre blog sur Facebook ainsi que la possibilité d'aimer ladite page où d'y aller en cliquant sur son nom.

Pour afficher ce Gadget Module Social Facebook flottant sur votre blog, voici les étapes à suivre : 

1. Connectez vous à Blogger et cliquer sur "Modèle" pour le blog où vous allez installer le Module Social Facebook flottant, puis sur "Traiter".

2. Trouvez la balise  </head>  et collez le code suivant juste avant :

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js' type='text/javascript'/>

Enregistrez votre modèle.

3. Allez sur "Eléments de la page", cliquez sur "Ajouter un gadget" sur votre sidebar et choisissez "HTML/Javascript".

4. Collez le code suivant dans votre nouveau Gadget HTML/Javascript : 

<script type="text/javascript"> //<!-- 
$(document).ready(function() {$(".w2bslikebox").hover(function() {$(this).stop().animate ({right: "0"}, "medium");}, function() {$(this).stop().animate({right: "-250"}, "medium");}, 
500);}); //--> </script> 
<style type="text/css"> 
.w2bslikebox{background: url("http://1.bp.blogspot.com/-UuBsjDC5vSc/TuiSd0g9bHI/AAAAAAAAAyk/MqKt8IpiIVM/s1600/facebook1.png") no-repeat scroll left center transparent !important;display: block;float: right;height: 270px;padding: 0 5px 0 46px;width: 245px;z-index: 99999;position:fixed;right:-250px;top:20%;} 
.w2bslikebox div{border:none;position:relative;display:block;} 
.w2bslikebox span{bottom: 10px;font: 9px "lucida grande",tahoma,verdana,arial,sans-serif;position: absolute;right: 6px;text-align: right;z-index: 99999;} 
.w2bslikebox span a{color: #FF9D00;text-decoration:none;} 
.w2bslikebox span a:hover{text-decoration:underline;} 
</style><div class="w2bslikebox" style=""><div>
<iframe src="http://www.facebook.com/plugins/likebox.php?href=http://www.facebook.com/suitedel'urldelapagefanfacebookdevotreblog&amp;
width=245&amp;colorscheme=light&amp;show_faces=true&amp; connections=8&amp;stream=false&amp;header=false&amp;height=330" scrolling="no" frameborder="0" scrolling="no" style="border: medium none; overflow: hidden; height: 330px; width: 245px;background:#fff;"></iframe><span><a href="http://blogger-au-bout-du-doigt.blogspot.com/2012/04/gadget-fans-sur-facebook-flottant-sur.html">Avoir ce gadget</a></span></div></div>
Remplacez l'url en rouge par celle de la page des Fans de votre blog sur Facebook, puis cliquez sur "Enregistrer" et allez voir ce que ça donne sur votre blog.

Maintenant, vous aussi pouvez donc avoir un gadget Fans sur Facebook flottant sur votre blog.

17 Commentaires

Laisser un commentaire

  1. c'est tres complique ad ajouter

    RépondreSupprimer
  2. pas évident mais jy suis arrivé et le résulat est là! :)

    RépondreSupprimer
  3. merci a vous , trés bien expliquer donc le resultat et la!

    RépondreSupprimer
  4. ou trouver la balise head ? merci beaucoup !!!

    RépondreSupprimer
  5. utilise la fontion de ton clavier cTrl + F pour rechercher "head"

    RépondreSupprimer
  6. bonjour, le seul problème avec ce script c'est qu'il interfère avec le slideshow du blog et le fait planté .Beaucoup de blogueurs surtout anglophone ont signalé ce bug sur des blogspot anglophones mais pas encore de solutions. Si quelqu'un à une idée, je vous suis tout ouïe . enfin un grand merci pour cet excellent blog weldbledi ;)

    RépondreSupprimer
  7. Où se trouve "éléments de la page"? Je cherche en vain depuis une heure...

    RépondreSupprimer
  8. @claude bezoule : il faut aller sur le tableau de bord de blogger et "Presentation".

    Allez sur "Eléments de la page", cliquez sur "Ajouter un gadget" sur votre sidebar et choisissez "HTML/Javascript".

    Bonnen continuation

    RépondreSupprimer
  9. ca marche très bien
    AbdouBatna.blogspot.com

    RépondreSupprimer
  10. Ca marche nickel merci beaucoup ;-)

    RépondreSupprimer
  11. Bonjour, Hier en rajoutant le widget facebook j'ai fait une fausse manip...du coup, comme une débutante, j'ai copé coller le code html que j'avais sauvegardé dans une page word. résultant l'image de présentation de mon blog est décalée vers la gauche et je ne sais comment le résoudre. Seriez-vous en mesure de m'aider par hasard? Je déséspère car mon blog est mochissimo du coup. Je pense il existe des espaces dans mon code html. Merci

    RépondreSupprimer
  12. bonjour,
    Des explications claires permettant une mise en place aisée et rapide !
    Merci à vous pour ce partage
    Belle fin de semaine à tous

    RépondreSupprimer
  13. j'ai fait tout ça mais les gens qui aiment ma page ne s'affiche pas

    RépondreSupprimer
  14. @Karelle Fotso : il faut remplacer l'url en rouge par celle de la page des Fans de votre blog sur votre page Facebook

    RépondreSupprimer
  15. bonjour .. le gadget de partage en bas à gauche de cette page m'intéresse .... merci d'avance ..

    RépondreSupprimer

Enregistrer un commentaire

Laisser un commentaire

Plus récente Plus ancienne