Facebook likebox est l'un des plu-gin 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 dans la boite qui vient de s'ouvrir.
----------------------
//* BloggerActuce Lightbox Style Popup Facebook Likebox Widget**//
<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:
Change the following styles to modify the appearance of ColorBox. They are
ordered & tabbed in a way that represents the nesting of the generated HTML.
*/
#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/AVvXsEhfmKD1Wcd4RNQOwWOWEHg9IPoSeYM3bdRcGmwNZc4uDMpJKDPO4Q_nhwcRGblBf0A25T4KFbjYtM3xlw-fY5DGqsjAfZvj3QIv8t6snIhUTsOTBuQFVqL1NO4ogpiaHE36BGkA3sYguiWr/s1600/controls.png)
no-repeat 0 0;}
#cboxTopCenter{height:14px;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiFMhqiIQBO07P7z6VUF-egz8M35SG0wgLzRYldmCE1pATfwMtspVZhBiMPWvRxBJoxGEgTSziKJi4NBebKAAZfw-00jMbVM7uD2HBfsykutmNhPszc0BJjNiu1rFFp52NsO6wrzEeXqg43/s1600/border.png)
repeat-x top left;}
#cboxTopRight{width:14px;
height:14px;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfmKD1Wcd4RNQOwWOWEHg9IPoSeYM3bdRcGmwNZc4uDMpJKDPO4Q_nhwcRGblBf0A25T4KFbjYtM3xlw-fY5DGqsjAfZvj3QIv8t6snIhUTsOTBuQFVqL1NO4ogpiaHE36BGkA3sYguiWr/s1600/controls.png)
no-repeat -36px 0;}
#cboxBottomLeft{width:14px;
height:43px;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfmKD1Wcd4RNQOwWOWEHg9IPoSeYM3bdRcGmwNZc4uDMpJKDPO4Q_nhwcRGblBf0A25T4KFbjYtM3xlw-fY5DGqsjAfZvj3QIv8t6snIhUTsOTBuQFVqL1NO4ogpiaHE36BGkA3sYguiWr/s1600/controls.png)
no-repeat 0 -32px;}
#cboxBottomCenter{height:43px;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiFMhqiIQBO07P7z6VUF-egz8M35SG0wgLzRYldmCE1pATfwMtspVZhBiMPWvRxBJoxGEgTSziKJi4NBebKAAZfw-00jMbVM7uD2HBfsykutmNhPszc0BJjNiu1rFFp52NsO6wrzEeXqg43/s1600/border.png)
repeat-x bottom left;}
#cboxBottomRight{width:14px;
height:43px;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfmKD1Wcd4RNQOwWOWEHg9IPoSeYM3bdRcGmwNZc4uDMpJKDPO4Q_nhwcRGblBf0A25T4KFbjYtM3xlw-fY5DGqsjAfZvj3QIv8t6snIhUTsOTBuQFVqL1NO4ogpiaHE36BGkA3sYguiWr/s1600/controls.png)
no-repeat -36px -32px;}
#cboxMiddleLeft{width:14px;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfmKD1Wcd4RNQOwWOWEHg9IPoSeYM3bdRcGmwNZc4uDMpJKDPO4Q_nhwcRGblBf0A25T4KFbjYtM3xlw-fY5DGqsjAfZvj3QIv8t6snIhUTsOTBuQFVqL1NO4ogpiaHE36BGkA3sYguiWr/s1600/controls.png)
repeat-y -175px 0;}
#cboxMiddleRight{width:14px;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfmKD1Wcd4RNQOwWOWEHg9IPoSeYM3bdRcGmwNZc4uDMpJKDPO4Q_nhwcRGblBf0A25T4KFbjYtM3xlw-fY5DGqsjAfZvj3QIv8t6snIhUTsOTBuQFVqL1NO4ogpiaHE36BGkA3sYguiWr/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/AVvXsEglP8ArIHETD9x2kuhdflw-EClZjGN6E-dv_uOR0BivGU6h_vY9C_Q9i1xtFtlddcyRrZapgfHFHrwCVEGXethv25IcbI9eI_-k-FsZVd8Rz2fzM7Z8ezLaBhlAlRTt4L2PNGed0xhm0C5j/s1600/loading-background.png)
no-repeat center center;}
#cboxLoadingGraphic{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh-2P5x2FX0vu7Abr0thI2bZQmGN7S-8_SGSIUQo8Gb1MzbeDQbJrkMQrdwx_RjwlvJQqzTloCrOGJJ0_Uoh_Ts4dwZ_n95SqyFHjKumGGAJeo21hRaE6jAjnnmaiXLhyphenhyphenxK4t6f2-3ZQT7l/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/AVvXsEhfmKD1Wcd4RNQOwWOWEHg9IPoSeYM3bdRcGmwNZc4uDMpJKDPO4Q_nhwcRGblBf0A25T4KFbjYtM3xlw-fY5DGqsjAfZvj3QIv8t6snIhUTsOTBuQFVqL1NO4ogpiaHE36BGkA3sYguiWr/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 For 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/AVvXsEiFRheeZUJFExwxY5DCm6ebTCFKnAxd1LJPbJ3l-iw12LPjgkdXyaIbE-NuC8cPdxDaQjEoct9SdxWuQT3rLeC7BMWrU4KKRe74mq5nqDfR1GGSEjRJhUjAKGaNQzLHWjk4Qw-vsB97rqbb/s1600/LikeUsOnFacebook.png"
width:300px; height:150px;"/></center>
<center>
<iframe src="//www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2FBloggerActuce&width=300&colorscheme=light&show_faces=true&border_color=%23ffffff&stream=false&header=false&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;" >Powered By
<a style=" font-size:5px; color:#3B78CD; text-decoration:none;"
href="http://www. blogger-astuce.blogspot.com">Blogger
Widgets</a> | Customized By: <a style=" font-size:5px;
color:#3B78CD; text-decoration:none;"
href="http://www.blogger-astuce.blogspot.com">Blogging Tips</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.
et vous devrez aussi changer BloggerActuce par le nom de votre page Facebook.
Voila c'est tout pour aujourd’hui et à la prochaine.