Nhúng Facebook Live Chat vào website, blog

Có thể bạn thích ?

Bạn chỉ cần nhúng đoạn code sau vào trước thẻ </body> là hoạt động, sau đó chỉnh sửa CSS để có giao diện như mong muốn.

<div id="fb-root"></div>
<script>
$(document).ready(function() {
var raido = $(".wrap").attr("data-toggle");
if (raido == 1) {
$(".vnk-tuvan").css("display", "none");
$(".x").click(function() {
$(".wrap").slideToggle();
$(".vnk-tuvan").slideToggle();
});
$(".vnk-tuvan").click(function() {
$(".wrap").slideToggle();
$(this).slideToggle();
});
} else {
$(".wrap").css("display", "none");
$(".x").click(function() {
$(".wrap").slideToggle();
$(".vnk-tuvan").slideToggle();
});
$(".vnk-tuvan").click(function() {
$(".wrap").slideToggle();
$(this).slideToggle();
});
}
})(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&appId=561973880635651";
fjs.parentNode.insertBefore(js, fjs);
}(document, "script", "facebook-jssdk"));
</script>
<style>
.wrap {
position: fixed;
width: 300px;
height: 400px;
z-index: 9999999;
right: 0px;
bottom: 0px;
}

.x {
font-family: arial, helvetica;
background: rgba(78, 86, 101, 0.8) none repeat scroll 0 0;
font-size: 14px;
font-weight: bold;
color: #fff;
display: inline-block;
height: 25px;
line-height: 25px;
position: absolute;
right: 0;
text-align: center;
top: -19px;
width: 25px;
z-index: 99999999;
}

.x:hover {
cursor: pointer;
}

.pxem {
text-align: left;
height: 20px;
margin-bottom: 0;
margin-top: 0;
background: #34495E;
width: 100%;
bottom: 0;
display: block;
left: 0px;
position: absolute;
z-index: 999999999;
border-left: 1px solid #fff;
}

.pxem a.axem {
color: #fff;
font-family: arial, helvetica;
font-size: 12px;
line-height: 23px;
padding-left: 5px;
text-decoration: none;
}

.pxem a.axem:hover {
text-decoration: underline;
}

.alogo {
position: absolute;
bottom: 0;
right: 0px;
z-index: 999999999999;
width: 75px;
height: 20px;
display: inline-block;
background: #34495E;
border-left: 2px solid #2c3e50;
padding-right: 0px;
padding-left: 5px
}

.vnk-tuvan {
position: fixed;
width: 300px;
background: #34495E;
z-index: 99999999;
right: 0px;
bottom: 0px;
border-style: solid solid none;
border-width: 1px 1px 0;
border-color: #2c3e50
}

.vnk-tuvan p {
color: #fff;
font-size: 15px;
margin: 0;
padding: 0 13px;
text-align: left;
}

.vnk-tuvan p a {
color: #fff;
font-size: 15px;
padding: 5px 0px 7px;
margin: 0;
display: inline-block;
font-family: arial, helvetica;
text-decoration: none;
}

.vnk-tuvan p a:hover {
text-decoration: underline;
cursor: pointer;
}

.vnk-tuvan p img {
float: right;
margin-top: 10px;
}
</style>
<div data-toggle="0" class="wrap" style="position:fixed; width:280px; height: 320px; "><span class="x" style="">X</span>
<div class="fb-page" data-adapt-container-width="true" data-height="320" data-hide-cover="false" data-href="https://www.facebook.com/izdesignervn" data-show-facepile="true" data-show-posts="false" data-small-header="false" data-tabs="messages" data-width="280" style="position:relative; z-index:9999999; right:0px; bottom:21px;border-left: 1px solid #fff;border-top: 1px solid #fff;"></div>
<p class="pxem" style=""><a class="axem" style="" href="http://www.laivanduc.com/" target="_blank">Lại Văn Đức</a>
<a class="alogo" style=""><img src="http://www.laivanduc.com/wp-content/uploads/2016/02/logo.png" width="60px" height="15px" style="margin-top: 3px"></a>
</p>
</div>
<div class="vnk-tuvan" style="width: 278px;">
<p style=" "><a style="">Bạn cần tư vấn ?</a><img src="http://www.laivanduc.com/wp-content/uploads/2016/02/supprt.png"></p>
</div>

Trả lời

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *


Liên Hệ

Tp Mỹ Tho, Tiền Giang

0919 344 644