Code Livechat Facebook cho Template Tinhdauonline 2018

Code Livechat Facebook cho Template Tinhdauonline 2018
Hướng dẫn tạo hộp chát fanpage trong theme Tinhdauonline Premium để chát với khác hàng qua Fanpage

Code Livechat Facebook cho Template Tinhdauonline 2018
Mở Fanpage để lấy đường dẫn Fanpage

Bước 1. Chèn code sau trên /body

Truy cập vào Blogger.com -> Mẫu -> chỉnh sửa HTML

Lưu code sau trên /body nếu lỗi CSS hoặc không hoạt động thì bạn chèn trên /head
<b:if cond='data:blog.url == data:blog.homepageUrl or data:blog.pageType == &quot;item&quot;'>
<!-- $CHAT Facebook -->
<script type='text/javascript'>
var f_chat_vs = &quot;Version 2.5&quot;;
var f_chat_domain = &quot;http://toilaquantri.com&quot;; /* Thay Domain của bạn */
var f_chat_name = &quot;Tư vấn: 0932.913.631&quot;; /* Tiêu đề hợp chat */
var f_chat_star_1 = &quot;CHÀO BẠN!&quot;;
var f_chat_star_2 = &quot;Bạn đang xem Giao diện Demo của <b>Template Tinhdauonline Premium <a href='https://tinhdauonline.com.vn' rel='nofflow' target='_black'>(Tinhdauonline.com.vn)</a></b> mới nhất<br/>Liên hệ với tác giả <u>0932.913.631</u> để sở hữu và được hỗ trợ từ template này.<br/><em>Gửi vài giây trước</em>&quot;;
var f_chat_star_3 = &quot;<a href='javascript:;' id='f_bt_start_chat' onclick='f_bt_start_chat()'>Bắt đầu Chat</a>&quot;;
var f_chat_star_4 = &quot;Chú ý: Bạn phải đăng nhập <a href='http://facebook.com/' rel='nofollow' target='_blank'>Facebook</a> mới có thể trò chuyện.&quot;;
var f_chat_fanpage = &quot;huynhphungblogger&quot;; /* Thay lại địa chỉ Fanpage, không bao gồm facebook.com */
var f_chat_background_title = &quot;#F77213&quot;;
var f_chat_color_title = &quot;#fff&quot;;
var f_chat_cr_vs = 21; /* Version ID */
var f_chat_vitri_manhinh = &quot;right:10px;&quot;;
</script>
<script>
window.jQuery ||
(function (d, s, a) {
var b, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(a)) return;
b = d.createElement(s);
b.id = a;
b.src = &#39;//connect.facebook.net/vi_VN/sdk.js#xfbml=1&amp;version=v2.5&#39;;
fjs.parentNode.insertBefore(b, fjs)
} (document, &#39;script&#39;, &#39;facebook-jssdk&#39;));
var $ = jQuery.noConflict();
$(document).ready(function () {
$(&quot;#f_chat_name&quot;).html(f_chat_name);
$(&quot;#f_enter_1&quot;).html(f_chat_star_1);
$(&quot;#f_enter_2&quot;).html(f_chat_star_2);
$(&quot;#f_enter_4&quot;).html(f_chat_star_4);
$(&quot;#f_chat_source&quot;).html(&quot;.&lt;i class=&#39;fa fa-question-circle&#39;&gt;&lt;/i&gt; LiveChat Facebook&lt;label&gt;&quot; + f_chat_vs + &quot;&lt;/label&gt;&quot;);
setTimeout(function () {
f_ck_chat()
},
100)
});
function fb_e_html(a, b) {
try {
document.getElementById(a).innerHTML = b
} catch(err) {}
}
function fb_e_style(a, b) {
try {
document.getElementById(a).style.display = b
} catch(err) {}
}
function check_fist_vist_f() {
var _ = f_read_cki(&quot;check_fist_vist_f&quot;);
(0 == _ || &quot;&quot; == _) &amp;&amp; (fb_eshow(&quot;f-chat-conent&quot;), f_create_cki(&quot;check_fist_vist_f&quot;, &quot;1&quot;, 1), f_create_cki(&quot;f_chat_open&quot;, &quot;1&quot;, 1))
}
function chat_f_close() {
fb_ehide(&#39;b-c-facebook&#39;),
f_create_cki(&#39;chat_f_close&#39;, 1, 1),
$(&#39;body&#39;).find(&#39;.zopim&#39;).remove(),
fb_eshow(&#39;chat_f_b_smal&#39;),
on_playsound(&#39;click&#39;)
}
function chat_f_show() {
f_create_cki(&#39;chat_f_close&#39;, &#39;0&#39;, 1),
fb_eshow(&#39;b-c-facebook&#39;),
fb_eshow(&#39;f-chat-conent&#39;),
fb_ehide(&#39;chat_f_b_smal&#39;)
}
function f_bt_start_chat() {
f_create_cki(&#39;f_bt_start_chat&#39;, &#39;1&#39;, 10),
fb_ehide(&#39;fb_chat_start&#39;),
fb_ehide(&#39;fb_alert_num&#39;),
on_playsound(&#39;click&#39;)
}
function f_c_start_chat() {
var t = f_read_cki(&#39;f_bt_start_chat&#39;);
0 == t || &#39;&#39; == t ? (fb_eshow(&#39;fb_chat_start&#39;), fb_eshow(&#39;fb_alert_num&#39;), f_chat_step()) : (fb_ehide(&#39;fb_chat_start&#39;), fb_ehide(&#39;fb_alert_num&#39;))
}
function b_f_chat() {
var t = f_read_cki(&#39;f_chat_open&#39;);
0 == t || &#39;&#39; == t ? (fb_eshow(&#39;f-chat-conent&#39;), f_create_cki(&#39;f_chat_open&#39;, &#39;1&#39;, 1)) : (fb_ehide(&#39;f-chat-conent&#39;), f_create_cki(&#39;f_chat_open&#39;, &#39;0&#39;, 1)),
on_playsound(&#39;click&#39;)
}
function f_ck_chat() {
check_fist_vist_f();
f_c_start_chat();
var t = f_read_cki(&#39;chat_f_close&#39;);
if (&#39;&#39; == t || 0 == t || &#39;0&#39; == t) {
fb_eshow(&#39;b-c-facebook&#39;),
fb_ehide(&#39;chat_f_b_smal&#39;);
var e = f_read_cki(&#39;f_chat_open&#39;);
(1 == e || &#39;1&#39; == e) &amp;&amp; fb_eshow(&#39;f-chat-conent&#39;)
} else fb_eshow(&#39;chat_f_b_smal&#39;),
fb_ehide(&#39;b-c-facebook&#39;)
}
function f_chat_step() {
f_enter_chat(&#39;1&#39;, 3500),
f_enter_chat(&#39;2&#39;, 5500),
f_enter_chat(&#39;3&#39;, 6e3),
f_enter_chat(&#39;4&#39;, 7e3)
}
function f_enter_chat(t, e) {
setTimeout(function () {
fb_eshow(&#39;f_enter_&#39; + t)
},
e),
setTimeout(function () {
on_playsound(&#39;door_bell&#39;)
},
e),
setTimeout(function () {
fb_e_html(&#39;fb_alert_num&#39;, t)
},
e)
}
function fb_eshow(t) {
fb_e_style(t, &#39;block&#39;)
}
function fb_ehide(t) {
fb_e_style(t, &#39;none&#39;)
}
function f_create_cki(t, e, n) {
if (n) {
var o = new Date;
o.setTime(o.getTime() + 24 * n * 60 * 60 * 1e3);
var c = &#39;; expires=&#39; + o.toGMTString()
} else var c = &#39;&#39;;
document.cookie = t + &#39;=&#39; + e + c + &#39;; path=/&#39;
}
function f_read_cki(t) {
for (var e = t + &#39;=&#39;, n = document.cookie.split(&#39;;&#39;), o = 0; o &lt; n.length; o++) {
for (var c = n[o];
&#39; &#39; == c.charAt(0);) c = c.substring(1, c.length);
if (0 == c.indexOf(e)) return c.substring(e.length, c.length)
}
return &#39;&#39;
}
var fb_vs_new = &#39;2.0&#39;;
/* Javascript update 05-11-2015: add small chat click*/
$(document).ready(function () {
$(&quot;#f_enter_3&quot;).html(f_chat_star_3);
$( &quot;#chat_f_b_smal&quot; ).click(function() {on_playsound(&#39;click&#39;);});
});
</script>
<div id='fb-root'/>
<a class='chat_f_vt' id='chat_f_b_smal' onclick='chat_f_show()' title='Mở hộp Chat'><i class='fa fa-comments title-f-chat-icon'/> Tư vấn khách hàng</a><div class='chat_f_vt' id='b-c-facebook'><div class='chat-f-b' id='chat-f-b' onclick='b_f_chat()'><i class='fa fa-comments title-f-chat-icon'/><label id='f_chat_name'/><span id='fb_alert_num'>1</span>
<div id='t_f_chat'><a class='chat-left-5' href='javascript:;' id='chat_f_close' onclick='chat_f_close()' title='Thu gọn cửa sổ'>x</a></div></div><div class='f-chat-conent' id='f-chat-conent'><script>document.write(&quot;<div class='fb-page' data-adapt-container-width='true' data-height='310' data-hide-cover='true' data-href='https://www.facebook.com/&quot;+f_chat_fanpage+&quot;' data-show-facepile='true' data-show-posts='true' data-small-header='true' data-tabs='messages' data-width='250'/>&quot;);</script><div id='fb_chat_start'><div class='msg_b fb_hide' id='f_enter_1'/><div class='msg_b fb_hide' id='f_enter_2'/><br/><p class='fb_hide' id='f_enter_3'><a href='javascript:;' id='f_bt_start_chat' onclick='f_bt_start_chat()'>Bắt đầu Chat</a></p><br/><div class='fb_hide' id='f_enter_4'/></div><div class='chat-single' id='f_chat_source'/></div></div>
<!-- #CHAT -->
</b:if>
Với điều kiện
<b:if cond='data:blog.url == data:blog.homepageUrl or data:blog.pageType == &quot;item&quot;'>
...</b:if>

Thì chat chỉ hiển thị ở trang chủ và trang sản phẩm thôi

Bước 2: Chèn CSS sau trên /skin

.title-f-chat-icon{text-align:center;line-height:40px;width:30px;position:absolute;left:0;background:#ea4d29}.chat_f_vt{position:fixed}
#chat_f_b_smal{overflow:hidden;z-index:2;font-family:segoe ui;right:10px;float:right;background:#2c71ef;padding-left:30px;cursor:pointer;color:#fff;height:37px;line-height:37px;border:0;font-size:14px;bottom:0;border-top-left-radius:5px;border-top-right-radius:5px;text-align:center;display:none;width:93px}#chat_f_b_smal:hover{padding-left:33px;text-align:left;width:160px;background-color:#0A932C}#f_enter_1,#f_enter_2{border-left:2px solid #299b3e}#b-c-facebook{right:10px;float:right;bottom:0;z-index:9999999999;width:250px;height:auto;max-height:375px;min-height:40px;box-shadow:6px 6px 6px 10px rgba(0,0,0,.2);border-top-left-radius:5px;border-top-right-radius:5px;overflow:hidden}#b-c-facebook .f-chat-conent{float:left;width:100%;height:335px;overflow:hidden;display:none;background-color:#fff;position:relative}#b-c-facebook .f-chat-conent .chat-single{color:#1360b7;line-height:25px;float:left;font-weight:300}#b-c-facebook .f-chat-conent .chat-single a{float:left;text-decoration:none;margin-left:10px;color:#fff;font-size:12px}#b-c-facebook .f-chat-conent .chat-single a:hover{color:#F60}#b-c-facebook .f-chat-conent .chat-single label{position:absolute;right:0;float:right!important;color:silver;bottom:0;margin-right:5px;font-size:11px}#b-c-facebook .chat-f-b,#b-c-facebook .chat-f-b label{line-height:20px;margin:0;cursor:pointer;font-size:18px;color:#fff;font-weight:400}#b-c-facebook .f-chat-conent .chat-single i{color:#0C5BB5}#b-c-facebook .f-chat-conent .fb-page{margin-top:0;float:left;height:310px}#b-c-facebook .chat-f-b{width:250px;color:#fff;height:40px;line-height:40px;background-color:#299B3E}#fb_alert_num{background-color:#ff0;padding:1px 7px 0;color:#e74c3c;border-radius:40px;font-size:13px;font-family:Arial;font-weight:700;position:absolute;right:36px;top:8px;height:20px;line-height:20px}#b-c-facebook .chat-f-b label{position:absolute;left:37px;top:9px;font-size:16px}#t_f_chat{float:left;position:absolute;right:6px;top:-2px}#t_f_chat a{padding:4px 7px;color:#fff;font-size:18px;font-family:verdana;text-decoration:none}#t_f_chat a:hover{color:#FF0}#t_f_chat a:hover i{color:#ff0;text-decoration:none}.chat-left-5{margin-left:5px}#fb_chat_start{background:#fff;position:absolute;left:0;padding:10px;float:left}#fb_chat_start em{font-size:11px;color:gray}
.msg_b{text-align: left;
line-height: 22px;
color: #333;
font-family: segoe ui;
font-size: 12px;
background: rgba(120,172,33,0.36);
padding: 5px 15px;
min-height: 13px;
margin-bottom: 5px;
position: relative;
border-radius: 28px;}
.msg_b:after{content:&#39;position:absolute;width:0;height:0;border:7px solid;border-color:transparent transparent transparent rgba(120,172,33,0.36);right:-14px;top:8px}.msg_b a{text-decoration:underline;color:#01509E}#f_bt_start_chat{margin:auto;background-color:#299B3E;border-radius:5px;color:#fff;font-family:Arial;font-size:17px;padding:7px 10px;text-decoration:none}#f_bt_start_chat:hover{color:#ff0;text-decoration:none}
#fb_chat_start p{clear: both;
margin: 5px auto;
font-size: 12px;
color: #888;
line-height: 18px;
width: 100%;}
.fb_hide{text-align: left;display:none}.iconhome{line-height:48px;float:left;display:block;padding:0 10px;text-decoration:none;color:#fff;font-weight:400;text-transform:none;margin:7px;background:#0a5f14;margin:0 7px}

Bước 3: Sửa lại thông tin livechat

  • <br/> xuống dòng
  • var f_chat_fanpage = &quot;huynhphungblogger&quot;; /* Thay lại địa chỉ Fanpage, không bao gồm facebook.com */
Ví dụ link fanpage của bạn là facebook.com/huynhphungblogger thì chỉ cần lấy huynhphungblogger thôi!

0 Nhận xét