Tạo Khung Like Fanpage Ở Góc Trái – Góc Phải Website

Ứng dụng Like Fanpage của Facebook là một trong những tiện ích rất hay và được sử dụng ở nhiều trang web. Người ta thường gọi tiện ích này là like box. Hôm nay i khám phá xin chia sẽ cách “tạo khung Like Fanpage ở góc trái – Góc phải website”.

Khung like fanpage Facebook trên website

Trong kỹ thuật được chia sẻ bạn có thêm chức năng ẩn – tắt khung fanpage, tạo sự tiện lợi cho khách hàng khi tương tác với trang web. Ở bài viết này, bạn sẽ khám phá cách tạo khung với 2 sự lựa chọn: Chèn Khung Like Fanpage Ở Góc Trái  hoặc Khung Like Fanpage Ở Góc Phải trang web.

Để bắt đầu khở tại bạn cần có tài khoản Facebook và có trước trang fanpage. Bạn có thể tham khảo cách đăng ký qua bài viết “Hướng dẫn tạo fanpage cho Facebook”.

Nào chúng ta bắt đầu tìm hiểu cách thực hiện:

Lựa chọn 1: Chèn Khung Like Fanpage Ở Góc Trái Trang Web

Bước 1: Đăng nhập trang quản lý

Bước 2: Ở đây bạn có 2 cách chèn code

Cách 1: Tạo một widget HTML/javascript, sau đó dán code sau vào

<script type="text/javascript">
function hide_float_left() {
    var content = document.getElementById('float_content_left');
    var hide = document.getElementById('hide_float_left');
    if (content.style.display == "none")
    {content.style.display = "block"; hide.innerHTML = '<a href="javascript:hide_float_left()">Tắt Fangpage [X]</a>'; }
        else { content.style.display = "none"; hide.innerHTML = '<a href="javascript:hide_float_left()">Xem quảng cáo...</a>';
    }
    }
</script>
<style>
.float-ck { position: fixed; bottom: 0px; z-index: 9000}
* html .float-ck {position:absolute;bottom:auto;top:expression(eval (document.documentElement.scrollTop+document.docum entElement.clientHeight-this.offsetHeight-(parseInt(this.currentStyle.marginTop,10)||0)-(parseInt(this.currentStyle.marginBottom,10)||0))) ;}
#float_content_left {border: 1px solid #01AEF0;}
#hide_float_left {text-align:left; font-size: 11px;}
#hide_float_left a {background: #01AEF0; padding: 2px 4px; color: #FFF;}
</style>
<div class="float-ck" style="left: 0px" >
    <div id="hide_float_left">
<a href="javascript:hide_float_left()">Tắt Quảng Cáo [X]</a></div>
<div id="float_content_left">
<!-- Start quang cao-->
   <iframe src="http://www.facebook.com/plugins/likebox.php?href=https://www.facebook.com/quangcaobanghieuledlaidinhdanang&amp; width=250&amp; colorscheme=light&amp; show_faces=true&amp; connections=9&amp; stream=false&amp; header=false&amp;height=200" scrolling="no" frameborder="0" scrolling="no" style="border: medium none; overflow: hidden; height: 200px; width: 250px; background:#fff;"></iframe>
<!-- End quang cao -->
</div>
</div>

Chú ý:  

- https://www.facebook.com/quangcaobanghieuledlaidinhdanang: 

- width=250: Chiều rộng khung Fanpage

- height=200: Chiều cao khung Fanpage

Cách 2: Dán trực tiếp vào code

Thêm mã lệnh sau đây vào ngay trước thẻ đóng </body>

<script type="text/javascript">
function hide_float_left() {
    var content = document.getElementById('float_content_left');
    var hide = document.getElementById('hide_float_left');
    if (content.style.display == "none")
    {content.style.display = "block"; hide.innerHTML = '<a href="javascript:hide_float_left()">Tắt quảng cáo [X]</a>'; }
        else { content.style.display = "none"; hide.innerHTML = '<a href="javascript:hide_float_left()">Xem quảng cáo...</a>';
    }
    }
</script>
<style>
.float-ck { position: fixed; bottom: 0px; z-index: 9000}
* html .float-ck {position:absolute;bottom:auto;top:expression(eval (document.documentElement.scrollTop+document.docum entElement.clientHeight-this.offsetHeight-(parseInt(this.currentStyle.marginTop,10)||0)-(parseInt(this.currentStyle.marginBottom,10)||0))) ;}
#float_content_left {border: 1px solid #01AEF0;}
#hide_float_left {text-align:left; font-size: 11px;}
#hide_float_left a {background: #01AEF0; padding: 2px 4px; color: #FFF;}
</style>
<div class="float-ck" style="left: 0px" >
    <div id="hide_float_left">
<a href="javascript:hide_float_left()">Tắt Quảng Cáo [X]</a></div>
<div id="float_content_left">
<!-- Start quang cao-->
   <iframe src="http://www.facebook.com/plugins/likebox.php?href=https://www.facebook.com/quangcaobanghieuledlaidinhdanang&amp; width=250&amp; colorscheme=light&amp; show_faces=true&amp; connections=9&amp; stream=false&amp; header=false&amp; height=200" style="border: medium none; overflow: hidden; height: 200px; width: 250px; background:#fff;"></iframe>
<!-- End quang cao -->
</div>
</div>

Sau đó lưu lại và bấm xem kết quả.

 Lựa chọn 2: Chèn Khung Like Fanpage Ở Góc Phải Trang Web

 Bước 1: Đăng nhập trang quản lý

Bước 2: Ở đây bạn cũng có tương tự 2 cách chèn

Cách 1: Tạo một widget HTML/javascript, sau đó dán code sau vào

<script type="text/javascript">
function hide_float_right() {
    var content = document.getElementById('float_content_right');
    var hide = document.getElementById('hide_float_right');
    if (content.style.display == "none")
    {content.style.display = "block"; hide.innerHTML = '<a href="javascript:hide_float_right()">Tắt quảng cáo [X]</a>'; }
        else { content.style.display = "none"; hide.innerHTML = '<a href="javascript:hide_float_right()">Xem quảng cáo...</a>';
    }
    }
</script>
<style>
.float-ck { position: fixed; bottom: 0px; z-index: 9000}
* html .float-ck {position:absolute;bottom:auto;top:expression(eval (document.documentElement.scrollTop+document.docum entElement.clientHeight-this.offsetHeight-(parseInt(this.currentStyle.marginTop,10)||0)-(parseInt(this.currentStyle.marginBottom,10)||0))) ;}
#float_content_right {border: 1px solid #01AEF0;}
#hide_float_right {text-align:right; font-size: 11px;}
#hide_float_right a {background: #01AEF0; padding: 2px 4px; color: #FFF;}
</style>
<div class="float-ck" style="right: 0px" >
<div id="hide_float_right">
<a href="javascript:hide_float_right()">Tắt Fanpage [X]</a></div>
<div id="float_content_right">
<!-- Start quang cao-->
  <iframe src="http://www.facebook.com/plugins/likebox.php?href=https://www.facebook.com/quangcaobanghieuledlaidinhdanang&amp; width=250&amp; colorscheme=light&amp; show_faces=true&amp; connections=9&amp; stream=false&amp; header=false&amp;height=200" scrolling="no" frameborder="0" scrolling="no" style="border: medium none; overflow: hidden; height: 200px; width: 250px; background:#fff;"></iframe>
<!-- End quang cao -->
</div>
</div>

Cách 2: Dán trực tiếp vào code

Bạn cũng tìm thẻ đóng </body> và dán dòng lệnh sau đây trước thẻ lệnh tìm được.

<script type="text/javascript">
function hide_float_right() {
    var content = document.getElementById('float_content_right');
    var hide = document.getElementById('hide_float_right');
    if (content.style.display == "none")
    {content.style.display = "block"; hide.innerHTML = '<a href="javascript:hide_float_right()">Tắt quảng cáo [X]</a>'; }
        else { content.style.display = "none"; hide.innerHTML = '<a href="javascript:hide_float_right()">Xem quảng cáo...</a>';
    }
    }
</script>
<style>
.float-ck { position: fixed; bottom: 0px; z-index: 9000}
* html .float-ck {position:absolute;bottom:auto;top:expression(eval (document.documentElement.scrollTop+document.docum entElement.clientHeight-this.offsetHeight-(parseInt(this.currentStyle.marginTop,10)||0)-(parseInt(this.currentStyle.marginBottom,10)||0))) ;}
#float_content_right {border: 1px solid #01AEF0;}
#hide_float_right {text-align:right; font-size: 11px;}
#hide_float_right a {background: #01AEF0; padding: 2px 4px; color: #FFF;}
</style>
<div class="float-ck" style="right: 0px" >
<div id="hide_float_right">
<a href="javascript:hide_float_right()">Tắt Quảng Cáo [X]</a></div>
<div id="float_content_right">
<!-- Start quang cao-->
  <iframe src="http://www.facebook.com/plugins/likebox.php?href=https://www.facebook.com/quangcaobanghieuledlaidinhdanang&amp; width=250&amp; colorscheme=light&amp; show_faces=true&amp; connections=9&amp;stream=false&amp; header=false&amp; height=200" style="border: medium none; overflow: hidden; height: 200px; width: 250px; background:#fff;"></iframe>
<!-- End quang cao -->
</div>
</div>

Bạn lưu lại và xem kết quả.

Chúc các bạn thành công và Khung Like Fanpage như ý!