Chèn khung chat facebook vào blog hay website

Chèn khung chat facebook vào blog hay website

B1 chèn style

<style type="text/css">
.liveChat-Box{
 position: fixed;
    width: 260px;
    right: 5px;
    bottom: -5px;
 padding: 5px;
    z-index: 100000000000}
.liveChat-bar{
    text-align: center;
    background-color: #5B74A8;
    /* border: solid 1px #c3c3c3; */
    border-radius: 4px 4px 0px 0px;
    height: 30px;
    line-height: 30px;
    color: #fff}
.liveChat-panel{
    height:300px;
    display: none;
 background:#fff}
</style>

B2 : thêm script vào

<script type="text/javascript">
 $(document).ready(function(){
  $(".liveChat-bar").click(function(){
   $(".liveChat-panel").toggle();
  });
 });
</script>

B3: thêm html

<div class="liveChat-Box">
    <div class="liveChat-bar">Chat với chúng tôi</div>
    <div class="liveChat-panel">
        <div id="fb-root"></div>
        <script type="text/javascript">
            (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 = "http:///connect.facebook.net/vi_VN/sdk.js#xfbml=1&amp;version=v2.5";
                fjs.parentNode.insertBefore(js, fjs);
            }(document, 'script', 'facebook-jssdk'));
        </script>
        <div style="position:fixed; z-index:9999999; right:10px; bottom:0px;" class="fb-page" data-tabs="messages" data-href="https://www.facebook.com/page-ban-hang" data-width="250" data-height="300" data-small-header="true" data-adapt-container-width="true" data-hide-cover="false" data-show-facepile="false" data-show-posts="false"></div>
       </div>
   </div>

   thay https://www.facebook.com/page-ban-hang  bằng địa chỉ fb của bạn
để đơn giản bạn cứ copy cả 3 đoạn vào  trước </body> là xong