Bài viết của tôi

Các bài viết về công nghệ, coder,... từ kinh nghiệm thực tế.
  • Tất cả
  • android (1)
  • blogspot (22)
  • code (30)
  • download (8)
  • Error (1)
  • Javascript (2)
  • kiến thức (2)
  • phần cứng (3)
  • phần mềm (5)
  • seo (13)
  • tài liệu (1)
  • thủ thuật (12)
  • tiện ích (1)
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>

Đăng nhận xét

Đọc nhiều nhất

Bài viết mới hơn