Ads

Tạo live chat facebook cho blogspot mới nhất

Có rất nhiều cách để làm live chat facebook cho blogspot. Hôm nay mình chia sẻ đến các bạn code làm live chat facebook rất đẹp, đơn giản và cực kỳ dễ làm.
tao live chat facebook cho blogspot moi nhat
Ở đây sẽ có 2 đoạn code cho các bạn lựa chọn. Các bạn đều chèn lên trên thẻ </body> hết nhé:
Các bạn xem demo: tại đây (phía dưới góc phải blog)
1. Code hiện live chat facebook trực tiếp và có nút tắt.
&lt;div id=&quot;fb-root&quot;&gt;&lt;/div&gt;
&lt;script&gt;
    $(document).ready(function() {
        var raido = $(&quot;.wrap&quot;).attr(&quot;data-toggle&quot;);
        if (raido == 1) {
            $(&quot;.vnk-tuvan&quot;).css(&quot;display&quot;, &quot;none&quot;);
            $(&quot;.x&quot;).click(function() {
                $(&quot;.wrap&quot;).slideToggle();
                $(&quot;.vnk-tuvan&quot;).slideToggle();
            });
            $(&quot;.vnk-tuvan&quot;).click(function() {
                $(&quot;.wrap&quot;).slideToggle();
                $(this).slideToggle();
            });
        } else {
            $(&quot;.wrap&quot;).css(&quot;display&quot;, &quot;none&quot;);
            $(&quot;.x&quot;).click(function() {
                $(&quot;.wrap&quot;).slideToggle();
                $(&quot;.vnk-tuvan&quot;).slideToggle();
            });
            $(&quot;.vnk-tuvan&quot;).click(function() {
                $(&quot;.wrap&quot;).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 = &quot;//connect.facebook.net/vi_VN/sdk.js#xfbml=1&amp;version=v2.10&amp;&amp;appId=126586364523772&quot;;
        fjs.parentNode.insertBefore(js, fjs);
    }(document, &quot;script&quot;, &quot;facebook-jssdk&quot;));
&lt;/script&gt;
&lt;style&gt;
    .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;
    }
&lt;/style&gt;
&lt;div data-toggle=&quot;1&quot; class=&quot;wrap&quot; style=&quot;position:fixed; width:280px; height: 320px; &quot;&gt;&lt;span class=&quot;x&quot; style=&quot;&quot;&gt;X&lt;/span&gt;
    &lt;div class=&quot;fb-page&quot; data-adapt-container-width=&quot;true&quot; data-height=&quot;320&quot; data-hide-cover=&quot;false&quot; data-href=&quot;https://www.facebook.com/kenhchiasevn/&quot; data-show-facepile=&quot;true&quot; data-show-posts=&quot;false&quot; data-small-header=&quot;false&quot; data-tabs=&quot;messages&quot; data-width=&quot;280&quot; style=&quot;position:relative; z-index:9999999; right:0px; bottom:21px;border-left: 1px solid #fff;border-top: 1px solid #fff;&quot;&gt;&lt;/div&gt;
    &lt;p class=&quot;pxem&quot; style=&quot;&quot;&gt;&lt;a class=&quot;axem&quot; style=&quot;&quot; href=&quot;https://www.niemstyle.com/2018/04/tao-live-chat-facebook-cho-blogspot-moi-nhat.html&quot; target=&quot;_blank&quot;&gt;Tạo live chat facebook cho blogspot&lt;/a&gt;&lt;a class=&quot;alogo&quot; style=&quot;&quot;&gt;&lt;img src=&quot;https://i.imgur.com/R8Ea2Lp.png&quot; width=&quot;60px&quot; height=&quot;15px&quot; style=&quot;margin-top: 3px&quot;&gt;&lt;/a&gt;&lt;/p&gt;
&lt;/div&gt;
&lt;div class=&quot;vnk-tuvan&quot; style=&quot;width: 278px;&quot;&gt;
    &lt;p style=&quot; &quot;&gt;&lt;a style=&quot;&quot;&gt;Bạn cần tư vấn ?&lt;/a&gt;&lt;img src=&quot;https://image.prntscr.com/image/4X78J2NSTd2w1UrRr47ggA.png&quot;&gt;&lt;/p&gt;
&lt;/div&gt;
2. Code ẩn live chat facebook có nút mở và nút tắt
&lt;div id=&quot;fb-root&quot;&gt;&lt;/div&gt;
&lt;script&gt;
    $(document).ready(function() {
        var raido = $(&quot;.wrap&quot;).attr(&quot;data-toggle&quot;);
        if (raido == 1) {
            $(&quot;.vnk-tuvan&quot;).css(&quot;display&quot;, &quot;none&quot;);
            $(&quot;.x&quot;).click(function() {
                $(&quot;.wrap&quot;).slideToggle();
                $(&quot;.vnk-tuvan&quot;).slideToggle();
            });
            $(&quot;.vnk-tuvan&quot;).click(function() {
                $(&quot;.wrap&quot;).slideToggle();
                $(this).slideToggle();
            });
        } else {
            $(&quot;.wrap&quot;).css(&quot;display&quot;, &quot;none&quot;);
            $(&quot;.x&quot;).click(function() {
                $(&quot;.wrap&quot;).slideToggle();
                $(&quot;.vnk-tuvan&quot;).slideToggle();
            });
            $(&quot;.vnk-tuvan&quot;).click(function() {
                $(&quot;.wrap&quot;).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 = &quot;//connect.facebook.net/vi_VN/sdk.js#xfbml=1&amp;version=v2.10&amp;&amp;appId=126586364523772&quot;;
        fjs.parentNode.insertBefore(js, fjs);
    }(document, &quot;script&quot;, &quot;facebook-jssdk&quot;));
&lt;/script&gt;
&lt;style&gt;
    .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: #bc382e;
        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: #bc382e;
        border-left: 2px solid #2c3e50;
        padding-right: 0px;
        padding-left: 5px
    }
    .vnk-tuvan {
        position: fixed;
        width: 300px;
        background: #bc382e;
        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;
    }
&lt;/style&gt;
&lt;div data-toggle=&quot;0&quot; class=&quot;wrap&quot; style=&quot;position:fixed; width:280px; height: 320px; &quot;&gt;&lt;span class=&quot;x&quot; style=&quot;&quot;&gt;X&lt;/span&gt;
    &lt;div class=&quot;fb-page&quot; data-adapt-container-width=&quot;true&quot; data-height=&quot;320&quot; data-hide-cover=&quot;false&quot; data-href=&quot;https://www.facebook.com/kenhchiasevn/&quot; data-show-facepile=&quot;true&quot; data-show-posts=&quot;false&quot; data-small-header=&quot;false&quot; data-tabs=&quot;messages&quot; data-width=&quot;280&quot; style=&quot;position:relative; z-index:9999999; right:0px; bottom:21px;border-left: 1px solid #fff;border-top: 1px solid #fff;&quot;&gt;&lt;/div&gt;
    &lt;p class=&quot;pxem&quot; style=&quot;&quot;&gt;&lt;a class=&quot;axem&quot; style=&quot;&quot; href=&quot;https://www.niemstyle.com/2018/04/tao-live-chat-facebook-cho-blogspot-moi-nhat.html&quot; target=&quot;_blank&quot;&gt;Tạo live chat facebook cho blogspot&lt;/a&gt;&lt;a class=&quot;alogo&quot; style=&quot;&quot;&gt;&lt;img src=&quot;https://i.imgur.com/R8Ea2Lp.png&quot; width=&quot;60px&quot; height=&quot;15px&quot; style=&quot;margin-top: 3px&quot;&gt;&lt;/a&gt;&lt;/p&gt;
&lt;/div&gt;
&lt;div class=&quot;vnk-tuvan&quot; style=&quot;width: 278px;&quot;&gt;
    &lt;p style=&quot; &quot;&gt;&lt;a style=&quot;&quot;&gt;Bạn cần tư vấn ?&lt;/a&gt;&lt;img src=&quot;https://image.prntscr.com/image/4X78J2NSTd2w1UrRr47ggA.png&quot;&gt;&lt;/p&gt;
&lt;/div&gt;
Các bạn thay Link Fanpage mình đã bôi đỏ thành link của fanpage các bạn nhé. Có thể chỉnh sửa css, màu background,..tùy thích nhé!
Nếu thấy bài viết hữu ích, các bạn chia sẻ lên Google để ủng hộ mình nhé! cám ơn các bạn.

Cùng bình luận bài viết

  1. Chat FB này xưa rồi N ạ, giờ FB nó có 1 dạng livechat mới rồi kìa ? N chưa cập nhật à

    Trả lờiXóa
    Trả lời
    1. cái dạng đó tui biết rồi, nhưng tùy vào sở thích mỗi người thôi ông :)

      Xóa
  2. Sửa giúp em liên kết thành https://www.s2topvn.com/ với nhé a <3 thông cảm :(

    Trả lờiXóa
  3. Thêm cái này vào có làm nặng blogger không a

    Trả lờiXóa
    Trả lời
    1. Kg đâu bác, mà nếu có chỉ giảm 1-2 điểm thôi :)

      Xóa
  4. có thể cho mình liên kết được không vậy nếu được thì liên kết nhé <3
    link http://www.lebalongit.tk
    Tên Lê Bá Long IT

    Trả lờiXóa
    Trả lời
    1. rồi em! nhớ có trách nhiệm với những liên kết của mình e nhé!

      Xóa
  5. Trả lời
    1. có mà không thấy à, ko đọc bài gì hết :)

      Xóa
  6. nhìn rất đẹp và chuyên nghiệp với lại cái "thumbnail" anh làm đẹp đó.

    Trả lờiXóa
  7. Trả lời
    1. lầu rồi mà kiểu như mình nói mới mới cho nó sơm :v

      Xóa
    2. vâng anh tinh tế quá

      Xóa
  8. Đồ cổ hả :)), cũng tốt vì nhiều khi nó dễ sử dụng. Nhiều người cần hơn ấy chứ.

    Trả lờiXóa
    Trả lời
    1. Nếu mà cái mới h thà xài Zotabox cho khỏe :)

      Xóa