Ajouter facebook pop up like box à blogger



Facebook likebox est l'un des plugin Facebook les plus utilisé et aujourd’hui nous somme ici pour en créer et l'adapter à notre besoin .

1- Connectez-vous  blogger - Présentation - Ajouter un gadget et choisissez  HTML/JavaScript

2 - Copier/coller le code ci-dessous :


<style>

/*
ColorBox Core Style:
The following CSS is consistent between example themes and should not be altered.
*/
#colorbox, #cboxOverlay, #cboxWrapper{position:absolute; top:0; left:0; z-index:9999; overflow:hidden;}
#cboxOverlay{position:fixed; width:100%; height:100%;}
#cboxMiddleLeft, #cboxBottomLeft{clear:left;}
#cboxContent{position:relative;}
#cboxLoadedContent{overflow:auto;}
#cboxTitle{margin:0;}
#cboxLoadingOverlay, #cboxLoadingGraphic{position:absolute; top:0; left:0; width:100%;}
#cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow{cursor:pointer;}
.cboxPhoto{float:left; margin:auto; border:0; display:block;}
.cboxIframe{width:100%; height:100%; display:block; border:0;}
/*


User Style:
Changez les styles suivants pour modifier l'apparence de la boîte de couleur. ils sont

commandé par onglets et d'une manière qui représente l'imbrication du code HTML généré
.*/
#cboxOverlay{background:#000;opacity:0.5 !important;}
#colorbox{
box-shadow:0 0 15px rgba(0,0,0,0.4);
-moz-box-shadow:0 0 15px rgba(0,0,0,0.4);
-webkit-box-shadow:0 0 15px rgba(0,0,0,0.4);
}
#cboxTopLeft{width:14px; height:14px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiONYwyrPm2_Itp0ZxSFixgGAeAXa1pVltCFTPvKABSYXrO-loEFKcgs2dUMEH9_Q-7j0lG1fksb5ujtKJOsPjwB90Ze0_IgA6__zXoWZKycIWlTH4QcinKXxiGTeRaWU9YsB_ZJHoEAQA6/s1600/controls.png) no-repeat 0 0;}
#cboxTopCenter{height:14px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgHKd4mshLC5njh34SqT38gvjggOKu3_T-hg573_y7Iq0yMalgWdqG8oNOC9xeOGWPzZxR1BeFpYZH_ttgIOLGztVyc0SQOIwZLJyQk1waERgBr387iClQ0V1SSjJ00QMtcoKDYhBJQOMTq/s1600/border.png) repeat-x top left;}
#cboxTopRight{width:14px; height:14px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiONYwyrPm2_Itp0ZxSFixgGAeAXa1pVltCFTPvKABSYXrO-loEFKcgs2dUMEH9_Q-7j0lG1fksb5ujtKJOsPjwB90Ze0_IgA6__zXoWZKycIWlTH4QcinKXxiGTeRaWU9YsB_ZJHoEAQA6/s1600/controls.png) no-repeat -36px 0;}
#cboxBottomLeft{width:14px; height:43px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiONYwyrPm2_Itp0ZxSFixgGAeAXa1pVltCFTPvKABSYXrO-loEFKcgs2dUMEH9_Q-7j0lG1fksb5ujtKJOsPjwB90Ze0_IgA6__zXoWZKycIWlTH4QcinKXxiGTeRaWU9YsB_ZJHoEAQA6/s1600/controls.png) no-repeat 0 -32px;}
#cboxBottomCenter{height:43px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgHKd4mshLC5njh34SqT38gvjggOKu3_T-hg573_y7Iq0yMalgWdqG8oNOC9xeOGWPzZxR1BeFpYZH_ttgIOLGztVyc0SQOIwZLJyQk1waERgBr387iClQ0V1SSjJ00QMtcoKDYhBJQOMTq/s1600/border.png) repeat-x bottom left;}
#cboxBottomRight{width:14px; height:43px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiONYwyrPm2_Itp0ZxSFixgGAeAXa1pVltCFTPvKABSYXrO-loEFKcgs2dUMEH9_Q-7j0lG1fksb5ujtKJOsPjwB90Ze0_IgA6__zXoWZKycIWlTH4QcinKXxiGTeRaWU9YsB_ZJHoEAQA6/s1600/controls.png) no-repeat -36px -32px;}
#cboxMiddleLeft{width:14px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiONYwyrPm2_Itp0ZxSFixgGAeAXa1pVltCFTPvKABSYXrO-loEFKcgs2dUMEH9_Q-7j0lG1fksb5ujtKJOsPjwB90Ze0_IgA6__zXoWZKycIWlTH4QcinKXxiGTeRaWU9YsB_ZJHoEAQA6/s1600/controls.png) repeat-y -175px 0;}
#cboxMiddleRight{width:14px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiONYwyrPm2_Itp0ZxSFixgGAeAXa1pVltCFTPvKABSYXrO-loEFKcgs2dUMEH9_Q-7j0lG1fksb5ujtKJOsPjwB90Ze0_IgA6__zXoWZKycIWlTH4QcinKXxiGTeRaWU9YsB_ZJHoEAQA6/s1600/controls.png) repeat-y -211px 0;}
#cboxContent{background:#fff; overflow:visible;}
#cboxLoadedContent{margin-bottom:5px;}
#cboxLoadingOverlay{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_-zsRka8hO772-YbPTkCXkjt9GdnHhpiEyZuKosm_CPNRw00JAy3ScAg9qNPncrteLoo2961lYEz7tOqcsN-er8BfMxqbCxEAFNVcZYo5vJIAThAu64vBjtoyVsbDwHJT09NvOaCDaX5r/s1600/loading-background.png) no-repeat center center;}
#cboxLoadingGraphic{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjo156oJG0DNnjrjzz6nDJSW2V-dHh_1tr32aMkNc2750XKj0MePPS5MA7UYLJgJJPYZsnEFpcVMzM1uZO-gkJb3IyfZepbvwWt6j_iCitdWZCyO4OhrlGOdMm66jT3xwN6Rfm5Eg_oI7fy/s1600/loading.gif) no-repeat center center;}
#cboxTitle{position:absolute; bottom:-25px; left:0; text-align:center; width:100%; font-weight:bold; color:#F1F1F1;}
#cboxCurrent{position:absolute; bottom:-25px; left:58px; font-weight:bold; color:#F1F1F1;}
#cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow{position:absolute; bottom:-29px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiONYwyrPm2_Itp0ZxSFixgGAeAXa1pVltCFTPvKABSYXrO-loEFKcgs2dUMEH9_Q-7j0lG1fksb5ujtKJOsPjwB90Ze0_IgA6__zXoWZKycIWlTH4QcinKXxiGTeRaWU9YsB_ZJHoEAQA6/s1600/controls.png) no-repeat 0px 0px; width:23px; height:23px; text-indent:-9999px;}
#cboxPrevious{left:0px; background-position: -51px -25px;}
#cboxPrevious.hover{background-position:-51px 0px;}
#cboxNext{left:27px; background-position:-75px -25px;}
#cboxNext.hover{background-position:-75px 0px;}
#cboxClose{right:0; background-position:-100px -25px;}
#cboxClose.hover{background-position:-100px 0px;}
.cboxSlideshow_on #cboxSlideshow{background-position:-125px 0px; right:27px;}
.cboxSlideshow_on #cboxSlideshow.hover{background-position:-150px 0px;}
.cboxSlideshow_off #cboxSlideshow{background-position:-150px -25px; right:27px;}
.cboxSlideshow_off #cboxSlideshow.hover{background-position:-125px 0px;}
/*-----------------------------------------------------------------------------------*/
/* Facebook Likebox popup pour Blogger
/*-----------------------------------------------------------------------------------*/
#subscribe {
font: 12px/1.2 Arial,Helvetica,san-serif; color:#666;
}
#subscribe a,
#subscribe a:hover,
#subscribe a:visited {
text-decoration:none;
}

.box-tagline {
color: #999;
margin: 0;
text-align: center;
}
#subs-container {
padding: 35px 0 30px 0;
position: relative;
}
a:link, a:visited {
border:none;
}
.demo {
display:none;
}
</style>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js'></script>
<script src="http://yourjavascript.com/11215013191/jquery.colorbox-min.js"></script>
<script type="text/javascript">
jQuery(document).ready(function(){
if (document.cookie.indexOf('visited=true') == -1) {
var fifteenDays = 1000*60*60*24*7;
var expires = new Date((new Date()).valueOf() + fifteenDays);
document.cookie = "visited=true;expires=" + expires.toUTCString();
$.colorbox({width:"400px", inline:true, href:"#subscribe"});
}
});
</script>
<!-- This contains the hidden content for inline calls -->

<div style='display:none'>
<div id='subscribe' style='padding:10px; background:#fff;'>
<center><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgvz3jPEUDQtS057xgvAOEyDwjpBjLE4b_zVdpeoc-hWdOj6Y7Wxqs3AyjycB5bViuARkkCz8fY-KSoNEqFUxPi2v9WJswrN8CnxSS03G24AoIqf8uhbWDFSlpI1dESJ4Lul9JDicY5PMo/s320/NEWS_1343046140222.jpg" width:300px; height:150px;"/></center>
<center>

<iframe src="//www.facebook.com/plugins/likebox.php?href=http://www.facebook.com/pages/LeBloggerfr/268125569135&amp;width=300&amp;colorscheme=light&amp;show_faces=true&amp;border_color=%23ffffff&amp;stream=false&amp;header=false&amp;height=258" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:300px; height:258px;" allowtransparency="true"></iframe>

</center>
<p style=" float:right; margin-right:35px; font-size:4px;" >Créer par <a style=" font-size:5px; color:#3B78CD; text-decoration:none;" href="http://www.leblogger.fr">LeBlogger</a> | Customized By: <a style=" font-size:5px; color:#3B78CD; text-decoration:none;" href="http://www.leblogger.fr/2013/03/ajouter-facebook-pop-up-like-box-blogger.html">Ajouter ce gadget</a> </p>
</div>
</div>


3- Personnalisation de widget :

Le widget enregistre dans l'ordinateur du client un cookie qui permet de permet de customiser la fréquence d’apparition du widget, dans notre cas après 7 jours ce widget va s'ouvrir au client. vous pouvez changer cette valeur par 1 par exemple pour faire apparaître le widget chaque jour ou toute autre valeur.

Note : vous devrez aussi changer http://www.facebook.com/pages/LeBloggerfr/268125569135 par l'url de votre page Facebook.

10 Commentaires

Laisser un commentaire

  1. Bonjour,

    Votre tutoriel est parfait, seulement un petit soucis fâcheux vient s'y glisser.. En effet j'utilise pour mon blogspot les affichages dynamiques et avec ces derniers pas une imbrication like box ne fonctionne..

    Savez vous pourquoi ?
    merci!

    RépondreSupprimer
  2. J'ai le même problème, je crains que c'est parce qu'il y ai un code jquery dans le code alors qu'il y en a déjà un (peut être et sûrement) dans le html du blog :/

    Y'a -il un moyen de regler le problème ?

    RépondreSupprimer
  3. moi je rencontre un tout autre problème si Monsieur le Blogger à une solution je suis preneur...voilà si j'ajoute le code dans mes menus à droite il reste en version "déroulé" et la fonction mini onglet ne marche plus. Si parcours je place le code en haut ou en bas c'est mes slides de photos qui ne fonctionnent plus... J'imagine donc que ce code rentre en conflit avec le template que j'utilise mais impossible de trouver où !

    RépondreSupprimer
  4. @Strigidae : ca ne marche pas avec les affichages dynamique.

    @Crokmou et Régis: placer le gadget dans en bas c'est la meilleur solution

    RépondreSupprimer
  5. Comment modifier pour que cela passe de 7 jours à 1 jour ? Je ne trouve pas. Merci

    RépondreSupprimer
  6. Il faut changer le nombre 7 par dans cette partir du code :

    var fifteenDays = 1000*60*60*24*7;

    RépondreSupprimer
  7. Bonjour,
    Comment faire pour que la pop up s'ouvrez à la fermeture du site et pas à l'ouverture ?
    merci

    RépondreSupprimer
  8. Salut le code fonctionne bien mais pas avec ma page facebook, il me demande de me connecter avec mon compte personnel, ma page est faite a partir de celui la, comment faire?

    RépondreSupprimer
  9. Super! merci. Voir aussi ce http://surlapage.fr/widget/facebook-slider

    RépondreSupprimer

Enregistrer un commentaire

Laisser un commentaire

Plus récente Plus ancienne