Lưu ý: Đã có bài viết Tích hợp Tin nhắn Fanpage chính chủ Facebook vào website, mời các bạn tham khảo!
Các bài viết tham khảo:
- Cấu trúc cơ bản cho một dự án Bootstrap
- Nhúng Facebook vào website của bạn (phần Plugin Trang)
- Hiệu ứng khi scroll với WOW.js (chỉ áp dụng mục Animate.css)
Cấu trúc cơ bản
<!doctype html> <html class="no-js" lang="vi"> <head> <meta charset="utf-8"> <title>Init HTML</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css"> </head> <body> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></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/vi_VN/sdk.js#xfbml=1&version=v2.9&appId=xxx"; fjs.parentNode.insertBefore(js, fjs); }(document, 'script', 'facebook-jssdk'));</script> </body> </html>
Trong đó, xxx
là ID ứng dụng Facebook của bạn. Cấu trúc trên bao gồm:
- Bootstrap 3.3.7
- jQuery 1.12.4
- Animate.css
- Facebook SDK JavaScript
Có nghĩa là website bạn cần sử dụng Bootstrap, nhúng Animate.css (có thể bỏ nếu không muốn hiệu ứng), jQuery và SDK JavaScript thì gần như website nào cũng có.
HTML của Facebook LiveChat
Chúng ta sẽ tùy chỉnh lại phần Modal của Bootstrap để làm giao diện Facebook LiveChat.
<div id="fb-livechat" class="fb-livechat animated bounceInUp hidden-xs"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" aria-label="Close" title="Đóng" onclick="removeFacebookLiveChat();"><span aria-hidden="true">×</span></button> <h5 class="modal-title">Gửi tin nhắn</h5> </div> <div class="modal-body"> <div class="fb-page" data-href="https://www.facebook.com/inithtml/" data-tabs="messages" data-width="300" data-height="300" data-small-header="true" data-adapt-container-width="true" data-hide-cover="false" data-show-facepile="true"> <blockquote cite="https://www.facebook.com/inithtml/" class="fb-xfbml-parse-ignore"><a href="https://www.facebook.com/inithtml/">Init HTML</a></blockquote> </div> </div> </div> </div>
Với bounceInUp
là hiệu ứng xuất hiện.
CSS
Class .fb-livechat
như sau.
.fb-livechat { width: 300px; height: 383px; position: fixed; bottom: 15px; right: 15px; }
jQuery
Xây dựng hàm removeFacebookLiveChat()
để đóng Facebook LiveChat.
function removeFacebookLiveChat() { $('#fb-livechat').addClass('bounceOutDown'); $('#fb-livechat').one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function() { $(this).remove(); }); }
Với bounceOutDown
là hiệu ứng biến mất.
Nếu bạn không dùng hiệu ứng Animate.css, hàm removeFacebookLiveChat()
chỉ cần như sau.
function removeFacebookLiveChat() { $('#fb-livechat').remove(); }
Chúc các bạn thành công!