ThichCode.NET: Nhúng Facebook Live Chat vào website, blog ThichCode.NET: Nhúng Facebook Live Chat vào website, blog
ThichCode.NET

My blog

articles about technology, tricks, programming, ... from practical experience.
Nhúng Facebook Live Chat vào website, blog

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

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

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>
This article helps ?
If this article does not address your issue, leave a comment below

Post a Comment

Most read

Latest