Facebook Like Box Widget

Bạn đang có một trang web với số lượng truy cập cao, Bạn đang muốn có thêm nhiều lượt thích mới cho fanpage của mình... Bạn sẽ có thêm một lựa chọn với 1 widget hổ trợ hiển thị box Like facebook luôn " kè kè" bên phải trang blog của bạn, box này luôn cố định khi người dùng cuộn chuột. điều này rất thuận tiện cho việc tiếp cận của khách ghé thăm. Bình thường nó sẽ chỉ hiển thị logo facebook màu xanh, khi người dùng đưa chuột vào một box like mơi hiện ra, rất tiện lợi mà không làm ảnh hưởng đến người dùng cũng như nội dung blog.

Hướng dẫn

Bước 1: Bạn vào mục Bố cục (Layout) -> nhấn thêm tiện ích (Bạn có thể thêm ở bất cứ vị trí nào) 

Bước 2: Chọn HTML/Javascript rồi sau đó thêm vào đoạn code này:

<!--Floating Facebook Widget  START-->
<script type="text/javascript"> /*<![CDATA[*/ jQuery(document)
.ready(function() {jQuery(".theblogwidgets").hover(function() {jQuery(this).stop()
.animate({right: "0"}, "medium");}, function() {jQuery(this).stop().animate({right: "-250"}, "medium");}, 500);}); /*]]>*/ </script> <style type="text/css"> .theblogwidgets{background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhhXe_RteP6FWd4UKyQLhCLVZiiKkyK3HIfNFZGOthfNnsBn74zng4jI6wucGb123IjZTEldU_wpMi1QR0qf34_87xPPstx_tVIu9CRZJb_5xGzQ9aw24iP2biF7h7pVAErnXG2VaGnRYXS/") no-repeat scroll left center transparent !important; float: right;height: 270px;padding: 0 5px 0 46px;width: 245px;z-index:  99999;position:fixed;right:-250px;top:20%;} 
.theblogwidgets div{ padding: 0; margin-right:-8px; border:4px solid  #3b5998; background:#fafafa;} .theblogwidgets span{bottom: 4px;font: 8px "lucida grande",tahoma,verdana,arial,sans-serif;position: absolute;right: 6px;text-align: right;z-index: 99999;} 
.theblogwidgets span a{color: gray;text-decoration:none;} 
.theblogwidgets span a:hover{text-decoration:underline;} } </style>
<div class="theblogwidgets" style="">

<div>
 <iframe src="http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Ffacebook.com%2Ftheblogwidgets&width=245&colorscheme=light&show_faces=true&border_color=white&connections=9&stream=false&header=false&height=270" scrolling="no" frameborder="0" scrolling="no" style="border: white; overflow: hidden;  background:#fafafa;color:000;"></iframe><span>
</span></div>
</div>
<!--Floating Facebook Widget END-->

Bạn thay đoạn chữ màu đỏ  facebook.com%2Ftheblogwidgets thành địa chỉ fanpage của bạn .
Lưu lại và xem kết quả
Nếu widget này không hoạt động sau khi bạn thực hiện xong, thì bạn cần thêm một thư viện jquery vào blog của mình, cách thực hiện như sau:
Bước 1: Bạn vào trang tổng quan Mẫu -> chỉnh sửa HTML
Bước 2: Bạn tìm thẻ đóng </head> và thêm đoạn mã sau vào trước thẻ </head>

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

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