Bạn đang tìm kiếm cách chèn plugin chat Facebook Messenger vào trang web cụ thể là trang Blogger mà chưa làm được vì làm theo cách cũ trên mạng có thể không còn tác dụng nữa vì chính sách hiện nay của Facebook đang rất khắt khe với những trang có tên miền mới.
Đề xuất cho bạn: Tạo các hàm function để load tệp css và js từ nguồn bên ngoài
Nếu bạn áp dụng theo phương pháp của mình dưới đây mà không hiện thì chắc chắn trang web Blogger của bạn đã bị Facebook chặn rồi. Cách làm như sau
Những yêu cầu bắt buộc
Thứ nhất, bạn đã có sẵn fanpage, nếu chưa có thì tạo mới hoặc không nữa bạn cũng phải có bạn bè của bạn có fanpage chứ không có fanpage thì không làm gì được.
Thứ hai, khi đã có fanpage rồi bạn hay bạn của bạn cụ thể là admin của page phải cài đặt bật tính năng nhắn tin thì mới có tùy chọn Thêm Messenger vào trang web.
Thứ ba, trong cài đặt Nhắn tin nâng cao bạn cần thêm tên miền vào mục Miền được đưa vào danh sách hợp lệ, bạn có thể thêm nhiều tên miền bao gồm sub domain, miễn sao miền đó chưa bị Facebook chặn là được.
Thứ tư, bạn cài đặt tùy chọn cho đoạn mã HTML dưới đây:
<div attribution='setup_tool' class='fb-customerchat' logged_in_greeting='Xin chào! Tuấn có thể giúp gì được cho bạn?' logged_out_greeting='Xin chào! Tuấn có thể giúp gì được cho bạn?' page_id='175961486580201' theme_color='
0084ff**'></div>
Bạn sửa lại các dòng in đậm theo ý thích của bạn nhé nhớ thay page id nhé còn mã màu để mặc định cũng được.
Đề xuất cho bạn: Hiển thị view Blog khi tắt hoặc chặn js mặc định
Cách chèn plugin chat Facebook Messenger vào Blogger
Code chat Facebook Messenger
<div id='fb-root'></div>
<div attribution='setup_tool' class='fb-customerchat' logged_in_greeting='Xin chào! Tuấn có thể giúp gì được cho bạn?' logged_out_greeting='Xin chào! Tuấn có thể giúp gì được cho bạn?' page_id='175961486580201' theme_color='
0084ff'></div>
<script>//<![CDATA[
function appendChildBody(name,type){
if(type=='js')var src=document.createElement('script');src.setAttribute('async','');src.setAttribute('src',name)
if(typeof src!='undefined')document.getElementsByTagName('body')[0].appendChild(src)
}
window.addEventListener('load',function(){
var load_sdk=0
function sdk(){
if(load_sdk==0){
load_sdk=1
window.fbAsyncInit=function(){FB.init({xfbml:true,version:'v7.0'})}
appendChildBody('//connect.facebook.net/vi_VN/sdk/xfbml.customerchat.js','js')
}
}
window.addEventListener('scroll',function(){sdk()})
window.addEventListener('mousemove',function(){sdk()})
if(document.documentElement.scrollTop>0)sdk()
setTimeout(function(){sdk()},3000)
})
//]]></script>
Cách 1: Đơn giản nhất không cần chèn code vào theme mà chỉ cần chèn code trong tiện ích HTML/JavaScript trong bố cục tiện ích là xong. Trong phần Bố cục tiện ích chọn thêm mới tiện ích HTML/JavaScript xong chèn code vào.
Cách 2: Cầu kỳ hơn chèn code trong theme. Trong chỉnh sửa HTML của theme các bạn chèn code bên trên trước thẻ đóng </body> của theme.
Cách 3: Cầu kỳ hơn nữa chèn code trong theme nhưng thêm thẻ đóng b:includable và b:include, các bạn chèn theo mẫu sau:
Categories: Blog CODE Html Publish Date: 4:15 AM
//adminpiroyal.blogspot.com/
1234567891011121314151617181920<script language='javascript'> var f_chat_vs = "Version 2.1"; var f_chat_domain = "\/\/startuan.blogspot.com"; var f_chat_name = "Hỗ trợ trực tuyến"; var f_chat_star_1 = "Chào bạn!"; var f_chat_star_2 = "Bạn cần hỗ trợ gì ?"; var f_chat_star_3 = "<a href='javascript:;' id='f_bt_start_chat' title='f_bt_start_chat()'>Bắt đầu Chat</a>"; var f_chat_star_4 = "Chú ý: Bạn phải đăng nhập <a href='//facebook.com/' rel='nofollow' target='_blank'>Facebook</a> mới có thể trò chuyện."; var f_chat_fanpage = "admin.piroyal"; /* Đây là địa chỉ Fanpage*/ var f_chat_background_title = " # 1092da"; / Lấy mã màu tại đây //megapixelated.com/tags/ref_colorpicker.asp / var f_chat_color_title = " # fff"; var f_chat_cr_vs = 21; /* Version ID */ var f_chat_vitri_manhinh = "right:10px;"; /* Right: 10px; hoặc left: 10px; hoặc căn giữa left:45% */ </script> <! $Chat Javascript (không được xóa) > <script src='//googledrive.com/host/0B-rxJklh-V2fN2ZHc3psNVRkV0E'/> <! $Chat HTML (không được xóa) > <div id='fb-root'></div> <a class='chat_f_vt' id='chat_f_b_smal' title='chat_f_show()' title='Mở hộp Chat'><i class='fa fa-comments title-f-chat-icon'></i> Chat</a><div class='chat_f_vt' id='b-c-facebook'><div class='chat-f-b' id='chat-f-b' title='b_f_chat()'><i class='fa fa-comments title-f-chat-icon'></i><label id='f_chat_name'></label><span id='fb_alert_num'>1</span><div id='t_f_chat'><a class='chat-left-5' href='javascript:;' id='chat_f_close' title='chat_f_close()'>x</a></div></div><div class='f-chat-conent' id='f-chat-conent'><script>document.write("<div class='fb-page' data-adapt-container-width='true' data-height='310' data-hide-cover='true' data-href='//www.facebook.com/"+f_chat_fanpage+"' data-show-facepile='false' data-show-posts='true' data-small-header='true' data-tabs='messages' data-width='250'></div>");</script><div id='fb_chat_start'><div class='msg_b fb_hide' id='f_enter_1'></div><div class='msg_b fb_hide' id='f_enter_2'></div><br/><p align='center' class='fb_hide' id='f_enter_3'><a href='javascript:;' id='f_bt_start_chat' title='f_bt_start_chat()'>Bắt đầu Chat</a></p><br/><p align='center' class='fb_hide' id='f_enter_4'></p></div><div class='chat-single' id='f_chat_source'></div></div></div> <!--
CHAT -->
Hướng dẫn thêm vào blog
- Copy toàn bộ code trên
- Vào chỉnh sửa mẫu chèn toàn bộ code trên thẻ </body>
- Thay Admin.Pi.Royal thành địa chỉ fanpage của bạn
- Bạn có thể thay các dòng bôi màu xanh trên theo nội dung bạn muốn
- Lưu mẫu và xem kết quả
Nếu Các Icon Không hiện thì các bạn thêm font awesome vào blog bạn nhé Đặt đoạn code này dưới thẻ </head> <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css"/>