Gadget Fans sur Facebook flottant sur Blogger

By
Advertisement

Je ne sais pas pour vous, mais moi j'aime bien le gadget Module Social Facebook  (Fans sur Facebook) flottant que je vois sur certains 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.

Gadget Fans sur Facebook flottant sur Blogger Blogspot


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><span><a href="http://blogger-au-bout-du-doigt.blogspot.com">Blogger</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.

@+


56 commentaires:

  1. Super, ça marche !! Grand MERCI ;-)

    RépondreSupprimer
  2. Super merci
    http://regime-gothug.blogspot.fr/

    RépondreSupprimer
  3. ça marche mais quand je clique sur le facebook y à toujours un message d'erreur :(

    RépondreSupprimer
    Réponses
    1. Tu clique plus précisément où ? Tu utilise quel navigateur ? As-tu vérifié sur les autres navigateurs ?

      Supprimer
  4. Merci beaucoup !
    Très bien expliqué !

    RépondreSupprimer
  5. je ne trouve pas le lien dont tu parles, j'ai le modele flottant, mais rien qui apparait dedans !

    RépondreSupprimer
    Réponses
    1. Si utilise un modèle dynamique (flottant), je ne crois pas que ce widget pourra s'y afficher correctement. Mais bon, essaie toujours

      Mais dis moi, de quel lien tu parle ? Si c'est l'url de la page de fan facebook, tu dois te rendre sur la page de fan facebook de ton blog et copier le lien qui s'affichera sur la barre d'adresse. C'est ce lien que tu devra remplacer par celui en rouge dans le code repris ici.

      Supprimer
  6. Merci à toi Rodney pour toutes tes astuces , je te suis depuis quelques mois maintenant et c'est que du bonheur ce blo

    Akari , http://du-cote-du-web.blogspot.com

    RépondreSupprimer
  7. Salut, j'ai reussi a installer la barre flottante Facebook sur le coté, mais quand je passe dessus elle ne s'ouvre pas. tu sais pourquoi ?

    Merci.

    RépondreSupprimer
    Réponses
    1. Bah, je ne vois pas comment te répondre, vu que tu ne laisse même pas l'adresse de ton blog afin que j'y jette un coup d'oeil.

      Supprimer
  8. Bonjour,
    J'ai creer un blog, sur les astuces de Traffic sur Blogspot.

    http://blogspot-traffic.blogspot.com

    Bonne visite ;)

    RépondreSupprimer
  9. Bonsoir,
    J'ai fait comme vous avez dit, ca apparait bien sur mon blog mais ca ne fait pas comme vous, ca ne s'ouvre pas ???
    Je veux bien un peu d'aide car j'ai beaucoup de mal à améliorer mon blog....Merci d'avance

    RépondreSupprimer
  10. Ce commentaire a été supprimé par l'auteur.

    RépondreSupprimer
  11. Vraiment il y a toujours ici des astuces supers

    RépondreSupprimer
  12. J'ai mis un peu de temps à comprendre et j'ai réussi du premier coup.
    je m'épate mais en fait je n'ai aucun mérite.
    Merci beaucoup pour ces astuces.

    RépondreSupprimer
  13. C'est un beau widget mais j'aurais voulu quelque chose de plus simple. En fait je n'arrive pas à trouver un simple bouton "j'aime" à proximité duquel je peux écrire "suivez-nous sur facebook, devenez fan" ou un truc du genre.

    Mon blog : www.chateaubelgique.com

    RépondreSupprimer
  14. Ce commentaire a été supprimé par l'auteur.

    RépondreSupprimer
  15. Bonjour,
    J'essaie t'intégrer le module à mon interface blogger, mais je suis bloqué à l'étape 3).

    Dans quel menu du back-end blogger peut-on trouver : "Eléments de la page"
    et ensuite ""Ajouter un gadget" sur votre sidebar" ?

    Par avance merci

    RépondreSupprimer
  16. Bon, pour mon bouton, j'ai trouvé tout seul comme un grand ici : http://developers.facebook.com/docs/plugins/

    @Jonhattan : "Mise en page" et là tu cliques sur le titre "ajouter un gadget". ;-)

    RépondreSupprimer
  17. Ce commentaire a été supprimé par l'auteur.

    RépondreSupprimer
  18. Malheureusement cela ne fonctionne pas chez moi :( Peut-être est-ce parce que c'est un template que j'ai créé moi-même avec le logiciel Artisteer...

    Mon blog: http://medialyptique.blogspot.com

    RépondreSupprimer
  19. Bonjour et merci pour vos explications. Trop contente, ça rend vraiment bien. En plus c'est en tombant par hasard sur votre page que je découvre que je peux mettre mon blog sur facebook ! Malheureusement il n'est pas vraiment importé (le blog). Le peu de message qui s'y trouvent ne paraissent pas sur ma page facebook. Est-ce seulement possible ?
    http://jesuschristdansmavie.blogspot.fr/

    RépondreSupprimer
  20. Salut Rodney !
    J'ai besoin de ta lumière. J'ai mis le widget Facebook suivant :
    https://developers.facebook.com/docs/reference/plugins/like-box/
    Tu as la même chose à la fin de chacun de tes posts.
    Mais chez moi, les images de mes fans n'apparaissent pas !
    As-tu une idée pour m'aider stp ?

    Merci

    http://infostuces.blogspot.com/

    RépondreSupprimer
    Réponses
    1. Je crois que j'ai compris. Cela fonctionne mais comme je viens de commencer, je n'ai pas encore beaucoup de fans. Donc si ceux-ci ne sont pas connectés, ils n'apparaissent pas....

      Exacte ?

      Supprimer
  21. Bonjour,

    j'aimerais moi aussi intégrer ce gadget sur mon blog sauf que...
    Dans "Mise en Page" puis "Ajouter un Gadget", je n'ai pas de "HTML/Javascript" est ce normal... ?

    Merci d'avance :)

    RépondreSupprimer
  22. Ce commentaire a été supprimé par l'auteur.

    RépondreSupprimer
  23. sltmoi sa marche pas il ya écrit sa :
    Could not retrieve the specified page. Please verify correct href was passed in.

    mon blog :http://realtvdownload.blogspot.fr/

    merci

    RépondreSupprimer
  24. Bonsoir Rodney, Ton site est VRAIMENT super ! Toutes mes félicitations pour l'énergie que tu dépenses pour nous... :-)) J'ai suivi tes recommandations, le gadget est en place, il fonctionne partiellement... il s'ouvre mais comme dans le commentaire précédent, il précise : "Could not retrieve the specified page. Please verify correct href was passed in." J'ai vérifié l'url est correct ?!... Je ne vois pas où je me suis trompé...
    Mon blog est http://hardys-corner.blogspot.fr/
    Je te remercie vivement par avance de tes conseils.Bernard

    RépondreSupprimer
  25. Bonjour Rodney,

    Je trouve toujours tes propositions géniales, je viens d'installer le mode économie d'énergie et les boutons d'ajout pour les réseaux sociaux. Sur ce dernier j'aimerai savoir si tu pourrai m'aider. Cela fonctionne mais finalement j'aimerai juste le bouton facebook, et surtout j'aimerai qu'il apparaisse dans "mise en page" , colonne "gadgets". Cela me permettrait de ne pas le noyer dans les articles et en même temps de le laisser visible à chaque page, vu que cette colonne reste identique.
    Est-ce possible? Comment?

    Merci de prendre le temps de me répondre.

    RépondreSupprimer
  26. Inutile c'est trouvé :-)

    RépondreSupprimer
  27. Merci beaucoup Rodney pour toutes les astuces !
    C'est super, ça fonctionne parfaitement !

    RépondreSupprimer
  28. Ce commentaire a été supprimé par l'auteur.

    RépondreSupprimer
  29. Génial ! ça marche!

    J'avais essayé une fois mais ce n'était pas sur ton site, et ça avait foutu un joyeux bordel sur la page principal !

    Merci à toi Blogger au bout du doigt !

    RépondreSupprimer
  30. compare health insurance thanx for sharing such a good and usefull information

    RépondreSupprimer
  31. Génial ! J'adore ce gadget, je le cherchais depuis un bon moment. Merci !

    RépondreSupprimer
  32. Hi
    this is very nice post and nice looking blog

    RépondreSupprimer
  33. Salut,
    Sur mon bog, j'ai ajouté ce widget, mais il fait déconner mon slider systématiquement. Sais-tu pourquoi?
    Mon blog est: http://rainbowberlin.blogspot.de

    RépondreSupprimer
  34. Pourriez vous m'envoyer le fichier JS du Gadget Fans sur Facebook flottant car avec web plus 5 on ne sais pas écrire dans la ligne head
    michel_eloy@yahoo.fr

    RépondreSupprimer
  35. bonsoir c'est genial MAIS...
    tout fonctionne la page s'ouvre mais il n'y a rien d'inscrit pourtant 112 personnes aiment ma page? Je comprends pas? Pouvez vous m'aider? merci encore

    voilà ma page
    http://www.facebook.com/MonEcoleCestChezMoi?ref=ts&fref=ts

    RépondreSupprimer
  36. il beug le code c'est normale

    RépondreSupprimer
  37. Trés bien, ça marché..
    Merci.
    Je voudrais inserz dans mon blog le gadget , imprimer ou downlod as a PDF, comme celui de joliprint puisqu'il ne fonctionne plus, par quoi le remplacer, merci de me répondre le plus tot possible svp.
    Aussi joliprint nous a proposé son icone placé dans le menu des favoris de notre navigateur pour télécharger nos document préféré directement maintenant joliprint ne fonctionne plus par quoi le remplacer aussi.
    Merci

    RépondreSupprimer
  38. merci
    http://univers-sciences.blogspot.com/

    RépondreSupprimer
  39. Bonjour!

    Je dois vraiment être une quiche mais je ne trouve même pas comment faire la 1ère étape: trouver le fameux "traiter" ...
    :((

    RépondreSupprimer
  40. Bonjour,

    Merci beaucoup pour ce superbe widget, mais celui ci bloque mon slider... Connaissez vous une solution ?

    Merci !

    RépondreSupprimer
  41. aide moi svp gadget ça fiche mais blanche vide

    http://dzair1.blogspot.com/

    RépondreSupprimer
  42. Salut à toi!
    D'abord merci pour ton coup de main la barre flottante facebook es bien connectée!
    Mais j'ai un petit ennui: en effet, un bloc vide avec juste en titre "Les Enfants du Cinéma" s'est positionné en barre latérale. Peux-tu m'aider s'il te plaît? C'est sur le blog enfantsducinema.blogspot.com. Merci d'avance!

    RépondreSupprimer
  43. tu es le meilleur vraiment il y a des astuces supers <3 bon courage

    RépondreSupprimer
  44. ça marche, mais pas avec les modeles dynamique.alors que faire?
    Merçi

    RépondreSupprimer
  45. Thanks a lot! Please see this easy to install / Merci beaucoup!
    http://surlapage.fr/widget/facebook-slider

    RépondreSupprimer
  46. C'est où le "traiter" ?

    RépondreSupprimer

Salut Cher Lecteur.

Bien que les commentaires ne sont pas modérés en amont, ne perdez pas votre temps à mettre des commentaires sans aucun lien avec l'article. Ils seront effacés.

Ne venez surtout pas mettre des commentaires bidons pour promouvoir les sciences occultes ici (voyance, magie, etc.), vérifiez le blog, aucun commentaire de ce genre n'a résisté à la gomme de l'administrateur.

Bon, ceci étant dit, puissiez-vous respecter les lois de votre pays, les lois universelles ainsi que le bon sens en postant votre commentaire sur ce blog.

Remarque : Seul un membre de ce blog est autorisé à enregistrer un commentaire.

@ Blogger au bout du doigt. Fourni par Blogger.

SEO & REFERENCEMENT