Tạo popup Facebook Like cho Blogger

Facebook Like Box là một widget được các blogger/webmaster sử dụng rất phổ biến hiện nay. Nó đóng góp một phần không nhỏ vào việc tăng số lượt like trang Facebook Fanpage của bạn. Bài viết này mình sẽ hướng dẫn các bạn tạo một box Facebook Like dạng popup cho Blogger.

Bước 1: Tại trang quản trị blog, các bạn vào Bố cục, tạo một tiện ích HTML/JavaScript.
Bước 2: Dán đoạn code bên dưới vào ô nội dung:

<!--FB Like Popup by kjmagic.blogspot.com-->
<script src="http://yourjavascript.com/4680311351/kjmagic-fblike-popup.js"></script><script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js' type='text/javascript'></script>
<script type="text/javascript">
jQuery(document).ready(function(){
if (document.cookie.indexOf('visited=true') == -1)
{
var fifteenDays = 1000*60*60*24*30;
var expires = new Date((new Date()).valueOf() + fifteenDays);
document.cookie = "visited=true;expires=" + expires.toUTCString();
$.colorbox({width:"400px", inline:true, href:"#exestylepopups"});
}
});
</script>
<style type="text/css">
#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}#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/AVvXsEiKHO1joLIlfzIYuE1sMut2pErxu0w4S8Rk5MNMx1DDRCyUwRO_os9hQSeZrajmcpUZt3_QyaQAJYx79_d9UBhHt3zKSh4GHAAxzYUUEeYhqqbrTGIB19GF5caLCPUP4XMOd4UQtiafxg/s1600/controls.png) no-repeat 0 0}#cboxTopCenter{height:14px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5xS9_aukDfddDhNxr_XvRtXW7WuxAF3b79CwLAMyitKjKDt0wrbz1v8x1MBUHtU8PdY1PE8ztgxiM5thO3_09WyaCFWZtdjRvRjnt4xwCBOHdo1yGChARU_lK8Eo4jX8mgmxmFYc5kA/s400/border.png) repeat-x top left}#cboxTopRight{width:14px;height:14px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiKHO1joLIlfzIYuE1sMut2pErxu0w4S8Rk5MNMx1DDRCyUwRO_os9hQSeZrajmcpUZt3_QyaQAJYx79_d9UBhHt3zKSh4GHAAxzYUUEeYhqqbrTGIB19GF5caLCPUP4XMOd4UQtiafxg/s1600/controls.png) no-repeat -36px 0}#cboxBottomLeft{width:14px;height:43px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiKHO1joLIlfzIYuE1sMut2pErxu0w4S8Rk5MNMx1DDRCyUwRO_os9hQSeZrajmcpUZt3_QyaQAJYx79_d9UBhHt3zKSh4GHAAxzYUUEeYhqqbrTGIB19GF5caLCPUP4XMOd4UQtiafxg/s1600/controls.png) no-repeat 0 -32px}#cboxBottomCenter{height:43px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5xS9_aukDfddDhNxr_XvRtXW7WuxAF3b79CwLAMyitKjKDt0wrbz1v8x1MBUHtU8PdY1PE8ztgxiM5thO3_09WyaCFWZtdjRvRjnt4xwCBOHdo1yGChARU_lK8Eo4jX8mgmxmFYc5kA/s400/border.png) repeat-x bottom left}#cboxBottomRight{width:14px;height:43px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiKHO1joLIlfzIYuE1sMut2pErxu0w4S8Rk5MNMx1DDRCyUwRO_os9hQSeZrajmcpUZt3_QyaQAJYx79_d9UBhHt3zKSh4GHAAxzYUUEeYhqqbrTGIB19GF5caLCPUP4XMOd4UQtiafxg/s1600/controls.png) no-repeat -36px -32px}#cboxMiddleLeft{width:14px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiKHO1joLIlfzIYuE1sMut2pErxu0w4S8Rk5MNMx1DDRCyUwRO_os9hQSeZrajmcpUZt3_QyaQAJYx79_d9UBhHt3zKSh4GHAAxzYUUEeYhqqbrTGIB19GF5caLCPUP4XMOd4UQtiafxg/s1600/controls.png) repeat-y -175px 0}#cboxMiddleRight{width:14px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiKHO1joLIlfzIYuE1sMut2pErxu0w4S8Rk5MNMx1DDRCyUwRO_os9hQSeZrajmcpUZt3_QyaQAJYx79_d9UBhHt3zKSh4GHAAxzYUUEeYhqqbrTGIB19GF5caLCPUP4XMOd4UQtiafxg/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/AVvXsEh0eCX8wtA1TslubIhmCpNJIFz1o2A_5uLofFwEUCMkIJlCki8deWDOvH-RI_p67gxF7qWHSt_rGPFeS_1IZ37A7oUFiYXxYxN1xB6ba1l8cHeHtRWSJMJ2zit1qB2cvOtQBwc1XuNr9g/s400/loadingbackground.png) no-repeat center center}#cboxLoadingGraphic{https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj2-yVBS1tDQqoTKeE0dX4diu-X38LCuBHgsFJuCOyo-Vbcr0VNsAOReC1kq7FNkljJQvid6BVX7ALINVwJfo7kOXFni7zweDQ5K-B86gy7z909AGZLGVtlUj-yROMhMyr-yaS1U4g8YA/s400/loading.gif) no-repeat center center}#cboxTitle{position:absolute;bottom:-25px;left:0;text-align:center;width:100%;font-weight:bold;color:#7C7C7C}#cboxCurrent{position:absolute;bottom:-25px;left:58px;font-weight:bold;color:#7C7C7C}#cboxPrevious,#cboxNext,#cboxClose,#cboxSlideshow{position:absolute;bottom:-29px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiKHO1joLIlfzIYuE1sMut2pErxu0w4S8Rk5MNMx1DDRCyUwRO_os9hQSeZrajmcpUZt3_QyaQAJYx79_d9UBhHt3zKSh4GHAAxzYUUEeYhqqbrTGIB19GF5caLCPUP4XMOd4UQtiafxg/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}#mdfb{font:12px/1.2 Arial,Helvetica,san-serif;color:#666}#mdfb a,#mdfb a:hover,#mdfb a:visited{text-decoration:none}.mdbox-title{background:#000;color:#fff;font-size:20px !important;font-weight:bold;margin:10px 0;border:20px solid #ddd;-moz-border-radius:6px;-webkit-border-radius:6px;border-radius:6px;box-shadow:5px 5px 5px #CCC;padding:10px;line-height:25px;font-family:arial !important}
</style>
<div style='display:none'>
<div id='exestylepopups' style='padding:10px; background:#fff;'>
<center><h3 class="mdbox-title">Bấm 'Like' để được xem nhiều bài viết hơn...</h3></center><center>
<iframe src="//www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Fmrjan.tk&width&height=258&colorscheme=light&show_faces=true&header=false&stream=false&show_border=false&appId=148912718614218" scrolling="no" frameborder="0" style="border:none; overflow:hidden; height:258px;" allowtransparency="true"></iframe>
</center>
    <p style=" float:right;  margin-right:35px;  font-size:9px;" >Powered by <a style=" font-size:9px; color:#3B78CD; text-decoration:none;" href="http://kjmagic.blogspot.com/" title='KJ Magic ~ Kiến thức - Thủ thuật - Download - Giải trí'>KJ Magic</a></p>
</div></div>
<!--/FB Like Popup by kjmagic.blogspot.com-->

• Nếu blog của bạn đã có thư viện jQuery thì xóa đoạn màu vàng đi.
• Thay phần màu xanh thành tên fanpage của bạn.

Chúc các bạn thành công !