Hướng dẫn làm Box like Facebook ẩn hiện bên trái Website, Blog

Có nhiều cách để hiển thị box like facebook, ở đây Share123.vn không nói đến những cách đơn giản để tạo ra một box like Facebook cho blog hay website của bạn, mà ở đây thủ thuật này dùng Jquery để tạo Box like Facebook ẩn hiện bên trái hoặc bên phải Website, Blog. Thủ thuật này giúp tiết kiệm diện tích hiển thị trên blog và tạo cho blog của bạn chuyên nghiệp hơn.

Demo Box like Facebook ẩn hiện bên trái website

Live Demo: Tại đây (Rê chuột vào ảnh Facebook bên trái Blog)


Cách làm: Các bạn chỉ cần copy đoạn code bên dưới và dán vào Mẫu, hoặc trong một widget bất kỳ trong Bố cục (Đối với blog).
<style>
#facebook_div{
width:300px;
height: 271px;
overflow: hidden;}
#facebook_left{
z-index: 100;
border: 5px solid #3B5998;
background-color: #fff;
width: 300px;
height: 271px;
position: fixed;
left: -308px;
border-radius:5px 5px 5px 5px;
}
#facebook_left img {position: absolute;top: 5px;left: 300px;}
#facebook_left div .fb-like-box {border:0px solid #3c95d9;overflow: hidden;position: static;height: 310px;right:-2px;top:-3px;}
</style>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
<script type="text/javascript">
var vnd = jQuery.noConflict();
</script>
 
<div id="fb-root"></div>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/en_GB/all.js#xfbml=1";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>  
<script>
    vnd(document).ready(function () {
    vnd("#facebook_left").hover(function () {
    vnd(this).stop(true, false).animate({ left: 0 }, 500);
    },
    function () {
    vnd("#facebook_left").stop(true, false).animate({ left: -308 }, 500);
    });
    });
</script>
<div id="facebook_left" style="top: 18%;">
    <div id="facebook_div">
        <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjArdQqF1JAGNs0NguE9JfzxGeNV2OCD56DlJBn7-Kwp58BQj9V2ydFATS_9ZECB4uSsiNkcjg_ALIejevCtISwB_nnen8jx7KqSpLt8o02tIMVBNMdCCvDfw8Su3fOzQNUqooMD0t0Uw/s1600/box-like-facebook-share123.vn.png" alt="facebook like" />
        <div class="fb-like-box" data-href="https://www.facebook.com/Share123.vn" data-width="350″ data-height="400″ data-show-faces="true" data-stream="false" data-header="true"></div>
    </div>
</div>
Lưu ý:
- Các bạn nên down đoạn js: //ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js về và up lên host của các bạn đề phòng link die

- Tương tự với link ảnh Facebook: https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjArdQqF1JAGNs0NguE9JfzxGeNV2OCD56DlJBn7-Kwp58BQj9V2ydFATS_9ZECB4uSsiNkcjg_ALIejevCtISwB_nnen8jx7KqSpLt8o02tIMVBNMdCCvDfw8Su3fOzQNUqooMD0t0Uw/s1600/box-like-facebook-share123.vn.png

- Cuối cùng các bạn thay link FanPage Facebook của các bạn vào dòng màu xanh: https://www.facebook.com/Share123.vn

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

Xem Thêm :