Thêm Facebook Fanpage vào Blog với Smooth Jquery Hover Effect

Một biểu tượng Facebook nằm bên phải Blog, khi ta di chuột vào đó  thì fanpage sẽ hiện ra. Cũng hay đấy chứ? Cùng thực hiện nhé.
Thêm Widget Vào Blog

Bước 1: Đăng nhập vào Blog của bạn, Vào Mẫu -> Chỉnh sửa HTML
Bước 2: Tìm Thẻ </head> và thêm vào đằng trước nó đoạn code sau:

[<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>]Bước 3: Lưu Mẫu
Bước 4: vào Bố cục >> Click: Thêm tiện ích >> Chọn HTML/Javascript - Tốt nhất thêm ở phần footer để có thể hiển thị ở tất cả các trang.
Thêm code sau vào:
[<style type="text/css">
#fbplikebox {
display: block;
padding: 0;
z-index: 99999;
position: fixed;
background: #ffffff;
}
.fbplbadge {
background-color: #3B5998;
display: block;
height: 150px;
top: 50%;
margin-top: -75px;
position: absolute;
left: -47px;
width: 47px;
background-image: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj5HGiGxUXCqKh-npDkO0XAbMEupoIHqAA-ourlIhb7YC1Ztk3LMhWvJy4AloZNKmvUS5NsUlgLZaPc7BsoLINC8act7mxL9VrT2U-JHrWriYgOk8dSvrjfwj2aR4kZEVjgLNgxucBcCRc/s1600/vertical-right.png");
background-repeat: no-repeat;
overflow: hidden;
-webkit-border-top-left-radius: 8px;
-webkit-border-bottom-left-radius: 8px;
-moz-border-radius-topleft: 8px;
-moz-border-radius-bottomleft: 8px;
border-top-left-radius: 8px;
border-bottom-left-radius: 8px;
}
</style>
<script type="text/javascript">
/*<![CDATA[*/
(function(w2b){
w2b(document).ready(function(){
var $dur = "medium"; // Duration of Animation
w2b("#fbplikebox").css({right: -250, "top" : 100 })
w2b("#fbplikebox").hover(function () {
w2b(this).stop().animate({
right: 0
}, $dur);
}, function () {
w2b(this).stop().animate({
right: -250
}, $dur);
});
w2b("#fbplikebox").show();
});
})(jQuery);
/*]]>*/
</script>
<div id="fbplikebox" style="display:none;">
<div class="fbplbadge"></div>
<iframe src="http://www.facebook.com/plugins/likebox.php?href=YOUR-FACEBOOK-PAGE&amp;width=250&amp;height=250&amp;colorscheme=light&amp;show_faces=true&amp;border_color=%23C4C4C4&amp;stream=false&amp;header=false" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:250px; height:250px;" allowtransparency="true"></iframe>
</div>] 

Bước 5: Bước này quan trọng nè. Ở đoạn code trên tìm và thay thế:
- Thay xxx bằng URL fanpage của bạn, sau đó tiếp tục thay thế các ký tự trong URL như sau:
+ Thay ký tự : bằng %3A
+ Thay ký tự / bằng %2F
Ví dụ Fanpage của mình có dạng

http://www.facebook.com/datvnncom

Sau khi thay thế sẽ như này:

http%3A%2F%2Fwww.facebook.com%2Fdatvnncom

Ngoài ra bạn cũng có thể thay đổi màu nền,  hình ảnh, kích thước ...

Ok, giờ lưu lại và xem thành quả nào!