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>
Bài trước
Bài sau

Thíchcode.NET - Mang lại giải pháp cho coder. Nếu các bạn có gì khó khăn trong lập trình thì liên hệ chúng tôi (FanFace). Chúng tôi sẽ hỗ trợ miễn phí cho các bạn.

0 comments:


Hỗ trợ