dimanche 8 septembre 2013

Gadget ou widget Fan latéral Facebook pour Blogger

Aujourd'hui, le design web est très indispensable pour attirer des visiteurs et de décorer les contenus d'un site web à l'aide des petits gadgets.   Ici, on va créer un gadget latéral  fixé à la barre de défilement et qui affiche le fanbox de facebook.  Le fanbox va contenir: un titre, un bouton j'aime, des publications en stream, et des fans. On va animer notre gadget avec un simple survol de notre souris sur le logo facebook. Je vais vous fournir le code pour faciliter l'installation du gadget sur votre blog ou votre site web.



Avec un simple survol de la souris sur le logo de facebook, le fanbox s'affiche comme si ce dernier sortait de la barre de défilement. C'est une bonne décoration pour notre blog ou site web. A l'aide de ce petit gadget, on peut visionner et suivre toutes les publications d'une page facebook sans passer par le réseau sociaux. La création du gadget nous permet de gagner un espace pour les contenus. 


Seule les développeurs pourraient programmer ce genre de gadget. Ici, on vous livre le code source de ce magnifique gadget.




Voici le code source:

Premièrement: - Ouvrez votre compte blogger
                             - Allez dans Modèle et Modifier le code HTML
                             - Dans la balise  <head>...</head>, vous collez le code suivant:

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

                            - Cliquez sur Enregistrer le modèle. 

Deuxièmement: - Allez dans Mise en page
                               - Vous cliquez sur Ajouter un gadget sur une zone réservée aux gadgets 
                               - Vous ajouter le gadget HTML/Javascript
                               - Vous collez le code source suivant:

<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=https://www.facebook.com/Informatrucs&amp;
width=245&amp;colorscheme=light&amp;show_faces=true&amp; connections=8&amp;stream=true&amp;header=false&amp;height=600" frameborder="0" scrolling="yes" style="border: medium none; overflow: hidden; height: 600px; width: 245px;background:#fff;"></iframe></div></div> 

                  - Vous enregistrez

N.B: Vous changez l'adresse de la page facebook en gras avec la vôtre pour afficher votre fanbox sur votre blog ou site web.


2 commentaires:

  1. Vraiment excellent ! Merci beaucoup !

    RépondreSupprimer
  2. Bonjour tout le monde,
    Possible d'ajouter ce code dans un site perso ?

    RépondreSupprimer