Breaking News

Tạo khung chat live facebook nhanh và đẹp

Trước đó Thucle Blog có chia sẻ một thủ thuật tạo và tích hợp khung chat facebook đơn giản góc màn hình cho website. Hôm nay tôi xin giới thiệu cho các bạn một mẫu giao diện mới khung chat facebook đẹp và rất dễ làm. Để tạo khung chat live facebook các bạn cần làm như sau.
Đầu tiên các bạn vào phần quản trị blog - Chọn mục Chủ đề (Theme) - Chỉnh sửa html và chèn lần lượt các đoạn code dưới đây và sau thẻ <body>

Đoạn code mã javascript

 <script>
      //Facebook messenger
      function fchat() {
        var tchat= document.getElementById(&quot;tchat&quot;).value;
        if(tchat==0 || tchat==&quot;0&quot;)
        {
          document.getElementById(&quot;fchat&quot;).style.display = &quot;block&quot;;
          document.getElementById(&quot;tchat&quot;).value=1;
          $(&#39;.cfacebook-heading .expand&#39;).removeClass(&#39;close&#39;).addClass(&#39;open&#39;);
        }else{
          document.getElementById(&quot;fchat&quot;).style.display = &quot;none&quot;;
          document.getElementById(&quot;tchat&quot;).value=0;
          $(&#39;.cfacebook-heading .expand&#39;).removeClass(&#39;open&#39;).addClass(&#39;close&#39;);
        }
      }
      $(function () {
        setTimeout(function () {$(&#39;#cfacebook&#39;).fadeIn();}, 1000);
        setTimeout(function() {
          document.getElementById(&quot;fchat&quot;).style.display = &quot;block&quot;;
          document.getElementById(&quot;tchat&quot;).value=1;
          $(&#39;.cfacebook-heading .expand&#39;).removeClass(&#39;close&#39;).addClass(&#39;open&#39;);
        }, 10000);
      });
    </script>

Đoạn code mã css phong cách mới cho khung chat

    <style>
 /**Facebook Messenger **/
    #cfacebook{
        position: fixed;
        bottom: 0px;
        right: 8px;
        z-index: 999999999999999;
        width: 250px; height: auto;
        box-shadow: 6px 6px 6px 10px rgba(0,0,0,0.2);
        border-top-left-radius: 5px;
        border-top-right-radius: 5px;
        overflow: hidden;
        display: none;
    }
    #cfacebook .fchat{float: left; width: 100%; height: 295px; overflow: hidden; display: none; background-color: #fff;}
    #cfacebook .fchat .chat-single{float: left; line-height: 25px; line-height: 25px; color: #333; width: 100%;}
    #cfacebook .fchat .chat-single a{float: ; text-decoration: none; margin-right: 10px; color: #888; font-size: 12px;}
    #cfacebook .fchat .chat-single a:hover{color: #222;}
    #cfacebook .fchat .chat-single .fb-icon{vertical-align: middle; margin-left: 5px;}
    #cfacebook .fchat .fb-page{margin-top: -130px; float: left;}
    #cfacebook .fchat .chat-box{min-height: 270px;}
    #cfacebook a.cfacebook-heading{
        float: left;
        padding: 0 25px;
        width: 250px;
        color: #fff;
        text-decoration: none;
        height: 40px;
        line-height: 40px;
        text-shadow: 0 1px 0 rgba(0, 0, 0, 0.1);
        background-repeat: repeat-x;
        background-size: auto;
        background-position: 0 0;
        background-color: #0065BF;
        border: 0;
        border-bottom: 1px solid #0065BF;
        z-index: 9999999;
        margin-right: 12px; font-size: 18px;
        background-repeat: no-repeat;
        background-position: left 64px;
        position: relative;
    }
    #cfacebook a.cfacebook-heading img{vertical-align: middle;}
    #cfacebook a.cfacebook-heading .expand{
    position: absolute;
    display: block;
    width: 24px; height: 24px;
    background-size: 24px;
    background-repeat: no-repeat;
    right: 60px;
    top: 10px;
    }
#cfacebook a.cfacebook-heading .expand.open{background-position: 0 top;}
#cfacebook a.cfacebook-heading .expand.close{background-position: 0 -24px;}
    #cfacebook a.cfacebook-heading:hover{color: yellow; text-decoration: none;}
</style>

Đoạn mã khung chat live facebook

<div id='cfacebook' style='display: block;'>
<a class='cfacebook-heading' href='javascript:;' onclick='javascript:fchat();'>
<img alt='' src='https://3.bp.blogspot.com/-zPq0wn0TFlk/WRj_VtyjlOI/AAAAAAAAJuI/4vbLLDMRSEY3P3JB1Qf424Ban7Ui2hn7ACLcB/s1600/cfacebook-heading.png'/><span class='expand open' style='background-image: url(&apos;https://1.bp.blogspot.com/-FDxTLa-nlgw/WRj_VsHmldI/AAAAAAAAJuM/GVGJRxlyX74jB40ZZXYyNKfMChW-Br9VwCLcB/s1600/expand.png&apos;);'/>
</a>
<div class='fchat' id='fchat' style='display: block;'>
<div class='chat-box'>
<div id='fb-root'></div><script>(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.7&appId=1862982723918298"; fjs.parentNode.insertBefore(js, fjs);}(document, 'script', 'facebook-jssdk'));</script>
<div class='fb-page' data-height='400' data-hide-cover='false' data-href='https://www.facebook.com/SunShiune.Angle' data-show-facepile='true' data-show-posts='false' data-small-header='false' data-tabs='messages' data-width='250'/>
</div>
<div class='chat-single'>
<img alt='Fanpage Thiên Sứ Mặt Trời' class='fb-icon' src='https://2.bp.blogspot.com/-wLSX0jwx4E0/WRkATSec9AI/AAAAAAAAJuQ/A4RIOgYVdcoNRfcizXglJbZMhGSVCsKWwCLcB/s1600/fb-icon.png' width='12'/>
<a href='https://www.facebook.com/SunShiune.Angle' target='_blank'>Fanpage Thiên Sứ Mặt Trời</a></div></div><input id='tchat' type='hidden' value='1'/>
</div>
Các bạn nhớ sửa phần chữ mình tô đỏ bằng link trang fanpage của mình nhé. Có gì không hiểu hay cần trợ giúp đừng ngại hãy để lại nhận xét bên dưới bài viết mình sẽ hỗ trợ sớm nhất và chi tiết nhất. Cảm ơn các bạn đã đọc bài viết. Nếu thấy hay đừng quên chia sẻ nó tới bạn bè nhé

Không có nhận xét nào