Hướng dẫn tích hợp facebook chat vào website

Xem: 1309    Tải: 0   Thảo luận: 2   Mục: Mẫu biểu - Hướng dẫn   Lĩnh vực: Khác

10 điểm   ( 4 đánh giá ) File đã được kiểm thử


Sau đây mình xin hướng dẫn các bạn cách làm thế nào để chèn 1 hộp facebook chat vào website

Bước 1: Chèn mã html vào website (có thể đặt ở sau thẻ body)

<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/vi_VN/sdk.js#xfbml=1&version=v2.5";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<div class="support-icon-right" style="position:fixed; z-index:9999999; right:10px; bottom:10px;">
	<h3><i class="fa fa-weixin"></i> Chat với Haravan</h3>
	<div class="online-support">
		<div
				 class="fb-page"
				 data-href="https://www.facebook.com/Haravan-Themes-1646189802324313/"
				 data-small-header="true"
				 data-height="300"
				 data-width="250"
				 data-tabs="messages"
				 data-adapt-container-width="false"
				 data-hide-cover="false"
				 data-show-facepile="false"
				 data-show-posts="false">
		</div>
	</div>
</div>

Lưu ý: thay link data-href cho phù hợp với link page facebook ở trên
Bước 2: Chèn mã javascript (có thể để ở cuối thẻ body đóng)

Mở file theme.liquid và thêm code setting vào vị trí thích hợp cho video banner slider như sau :

<script>
$(document).ready(function(){
  $('.online-support').hide();
  $('.support-icon-right h3').click(function(e){
    e.stopPropagation();
    $('.online-support').slideToggle();
  });
  $('.online-support').click(function(e){
    e.stopPropagation();
  });
  $(document).click(function(){
    $('.online-support').slideUp();
  });
});
</script>

Bước 3: Css cho hộp thoại cho dễ nhìn và sinh động hơn
<style>
.support-icon-right {
    background: #F0F3EF;
    position: fixed;
    right: 0;
    bottom: 0;
    z-index: 9;
    overflow: hidden;
    width: 250px;
    color: #fff!important;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -ms-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
}

.support-icon-right h3 {
    text-transform: uppercase;
    font-weight: bold;
    font-size: 13px!important;
    font-family: Arial;
    color: #fff!important;
    margin: 0!important;
    background-color: #5CB85C;
    cursor: pointer;
}

.support-icon-right i {
    background-color: #D9534F;
    padding: 15px 15px 12px 15px;
		margin-right: 15px;
}
.online-support {
    display: none;
}
</style>

Chúc các bạn làm được như mong muốn. :D

Hướng dẫn tích hợp facebook chat vào website

Hướng dẫn tích hợp facebook chat vào website Đăng ngày 04-04-2016  Bước 1: Chèn mã html vào website (có thể đặt ở sau thẻ body) 2.5/10 1309

Thảo luận:

  • avatar
    @ lamhieu00 - 23:38, 19/05/2017

    đang dùng hodean thì thêm chỗ nào anh ơi

  • avatar
    @ meohoangtb - 13:05, 07/04/2016

    File theme.liquid nằm ở đâu vậy bạn

Để bình luận bạn phải đăng nhập thành viên.

File tương tự

Files cùng mục

 

File tải nhiều nhất

Megacode.vn - Thư viện mã nguồn chia sẻ, tải file cho cộng đồng
Copyright © 2013-2016. All rights reserved. Bản quyền thuộc VinaGon
Địa chỉ: Số 38 Hàng Bè, Hàng Bạc, Hoàn Kiếm, Hà Nội.
Văn phòng giao dịch: Phòng 28, Tầng 6, HH1A Linh Đàm, Hoàng Mai, Hà Nội
Email: info@vinagon.com | Website: www.vinagon.com | Điện thoại: (+844) 6. 32.979.36;
logo megacode

Megacode đã đăng ký với Bộ Công Thương
Thư viện mã nguồn mở lớn nhất Việt Nam.



Hỗ trợ khách hàng trên Megacode
Hỗ trợ kỹ thuật cho thành viên:
Tổng đài: (+84) 246. 32.979.36
Số di động (Hotline): 0969.091.265
Thời gian làm việc:
Sáng: 8h-12h; Chiều: 13h30-17h30
(Nghỉ chiều T7, CN và các ngày lễ, tết)
Chat với Megacode
https://www.facebook.com/megacodevn