free web
English Online
free web
Click Đăng Ký hoặc đăng nhập bằng mạng xã hội để lướt web nhanh hơn, trải nghiệm đầy đủ hơn cũng như loại bỏ một số quảng cáo popup khó chịu trên web nhé!
[ Tin mới · Thành viên · Nội quy · Tìm kiếm · RSS ]
  • Page 1 of 1
  • 1
Forum » Giao lưu chia sẻ kinh nghiệm về website » Tổng hợp code và javascript » Tạo fb messenger chatbox cho web và blogspot
Tạo fb messenger chatbox cho web và blogspot
Admin-8xDate: Thứ năm, 04.May.2017, 11:43 AM | Message # 1
₷oáiҪa
Group: Administrators
Messages: 36
Reputation: 690
Status: Offline
TẠO FACEBOOK MESSENGER CHATBOX CHO BLOGSPOT
Hướng dẫn chèn Live chat Facebook Messenger vào Blogspot giống plugin WP Facebook Messenger. Xem video clip hướng dẫn chi tiết ở cuối bài nhé mọi người


Bước 1: Chèn CSS vào cuối thẻ <head>

Code
<style>/* Live chat */
.thing {
    top:0px;
    z-index: 99999;
}
.facebook-messenger-avatar-type1 {
    background: transparent !important;
}
.wrapper {
    position: relative;
    width: 100%;
    overflow: hidden;
}
.drag-wrapper .thing,
.drag-wrapper .thing .circle,
.drag-wrapper .magnet {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
}
.drag-wrapper .thing .circle,
.drag-wrapper .magnet-zone {
    z-index: 999;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-perspective: 1000;
    -moz-perspective: 1000;
    perspective: 1000;
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
}
.drag-wrapper,
.drag-wrapper *,
.drag-wrapper:before,
.drag-wrapper:after {
    -webkit-tap-highlight-color: transparent;
    -webkit-tap-highlight-color: transparent;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    /* For some Androids */
}
.drag-wrapper .thing {
    position: fixed;
    margin: 0px;
    cursor: pointer;
    -webkit-transform: translate(0, 0);
    -moz-transform: translate(0, 0);
    transform: translate(0, 0);
}
.drag-wrapper .thing .circle {
    position: absolute;
    text-align: center;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #0075FF;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    overflow: hidden;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
    -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
    -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    transform: scale(1);
    -webkit-transition: -webkit-transform 50ms linear;
    -moz-transition: transform 50ms linear;
    transition: transform 50ms linear;
}
.drag-wrapper .thing .circle img {
    max-width: 100%;
    height: auto;
    width: 75%;
    margin-top: 15%;
}
.drag-wrapper .thing.edge {
    -webkit-transition: all 400ms cubic-bezier(0.175, 0.885, 0.345, 1.1);
    -moz-transition: all 400ms cubic-bezier(0.175, 0.885, 0.345, 1.1);
    transition: all 400ms cubic-bezier(0.175, 0.885, 0.345, 1.1);
}
.drag-wrapper .thing .content {
    display: none;
    overflow: hidden;
    position: absolute;
    top: 100%;
    right: 0px;
    margin-top: 12px;
    padding: 20px;
    width: 350px;
    height: auto;
    background: #ffffff;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-box-shadow: 0px 0px 10px 2px rgba(0, 0, 0, 0.1);
    -moz-box-shadow: 0px 0px 10px 2px rgba(0, 0, 0, 0.1);
    box-shadow: 0px 0px 10px 2px rgba(0, 0, 0, 0.1);
    border: none;
}
.drag-wrapper-left .thing .content {
    right: auto;
    left: 0
}
.drag-wrapper .thing .content:before {
    content: '';
    position: absolute;
    top: -10px;
    right: 25px;
    width: 12px;
    height: 10px;
    border-bottom: 10px solid #ffffff;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
}
.drag-wrapper .thing .content .inside {
    max-height: 100%;
    position: relative;
    overflow: hidden;
    width: 100%;
}
.drag-wrapper .magnet-zone {
    pointer-events: none;
    -webkit-transition: -webkit-transform 400ms cubic-bezier(0.175, 0.885, 0.145, 1.22);
    -moz-transition: -webkit-transform 400ms cubic-bezier(0.175, 0.885, 0.145, 1.22);
    transition: transform 400ms cubic-bezier(0.175, 0.885, 0.145, 1.22);
}
.drag-wrapper .magnet-zone {
    position: fixed;
    bottom: 10px;
    left: 50%;
    z-index: 999;
    padding: 10px 20px;
    text-align: center;
    -webkit-transform: translate(-50%, 100%) translateZ(0);
    -moz-transform: translate(-50%, 100%) translateZ(0);
    transform: translate(-50%, 100%) translateZ(0);
}
.drag-wrapper .magnet-zone.overlap .magnet {
    -webkit-transform: scale(1.08) translateZ(0);
    -moz-transform: scale(1.08) translateZ(0);
    transform: scale(1.08) translateZ(0);
}
.touching .drag-wrapper .circle {
    -webkit-transform: scale(0.9) translateZ(0);
    -moz-transform: scale(0.9) translateZ(0);
    transform: scale(0.9) translateZ(0);
}
.moving .drag-wrapper .container:before {
    opacity: 1;
}
.moving .drag-wrapper .magnet-zone {
    -webkit-transform: translate(-50%, 0) translateZ(0);
    -moz-transform: translate(-50%, 0) translateZ(0);
    transform: translate(-50%, 0) translateZ(0);
}
.drag-wrapper .magnet-zone:after {
    pointer-events: none;
    content: '\00d7';
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    text-align: center;
    font-size: 2em;
    font-weight: 100;
    color: #fff;
    -webkit-transform: translateY(-50%) translateZ(0);
    -moz-transform: translateY(-50%) translateZ(0);
    transform: translateY(-50%) translateZ(0);
}
.drag-wrapper .magnet {
    pointer-events: none;
    position: relative;
    border: 2px solid #fff;
    background: rgba(0, 0, 0, 0.3);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
    -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
    -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
    -webkit-transform-origin: center;
    -moz-transform-origin: center;
    transform-origin: center;
    -webkit-transition: -webkit-transform 200ms cubic-bezier(0.175, 0.885, 0.145, 1.25);
    -moz-transition: -webkit-transform 200ms cubic-bezier(0.175, 0.885, 0.145, 1.25);
    transition: transform 200ms cubic-bezier(0.175, 0.885, 0.145, 1.25);
    -webkit-transform: scale(0.7) translateZ(0);
    -moz-transform: scale(0.7) translateZ(0);
    transform: scale(0.7) translateZ(0);
}
body:not(.touching) .drag-wrapper .thing {
    -webkit-transition: all 400ms cubic-bezier(0.175, 0.885, 0.345, 1.1);
    -moz-transition: all 400ms cubic-bezier(0.175, 0.885, 0.345, 1.1);
    transition: all 400ms cubic-bezier(0.175, 0.885, 0.345, 1.1);
}
@media only screen and (max-width: 767px) {
    .drag-wrapper .thing .content {
        right: -17px;
        width: 310px;
        padding: 10px 0;
    }
}
.facebook_messenger_popup {
    background: #fff;
    display: none;
}
body .drag-wrapper .thing .facebook-messenger-avatar-type1 img {
    width: 100%;
    margin-top: 0;
    border-radius: 50%;
    height: 100%;
}
.facebook_messenger_popup .send-app a {
    border-radius: 0;
}
.send-app {
    margin-top: 15px;
    padding: 0px 15px;
}
.send-app a {
    background: #0075ff;
    display: inline-block;
    width: 100%;
    color: #fff;
    text-align: center;
    padding: 3px 5px;
    border-radius: 3px;
    text-decoration: none;
}
.send-app a:hover {
    opacity: 0.8;
}
.chatHead {
    background: #0075FF url(https://1.bp.blogspot.com/-F2LUvetXx1U/WLhLnSh02-I/AAAAAAAAZEg/rZSlat5sj7YiL8PXXzAtSRAp0vvNcZcsACLcB/s1600/facebook-messenger.png) center center no-repeat;
    background-size: 50% auto;
}
.drag-wrapper .thing .circle {
    background: #0075FF;
}
.nj-facebook-messenger {
    background: #0075FF url(https://1.bp.blogspot.com/-F2LUvetXx1U/WLhLnSh02-I/AAAAAAAAZEg/rZSlat5sj7YiL8PXXzAtSRAp0vvNcZcsACLcB/s1600/facebook-messenger.png) 15px center no-repeat;
    background-size: auto 55%;
    padding: 8px 15px;
    color: #fff !important;
    border-radius: 3px;
    padding-left: 40px;
    display: inline-block;
    margin-top: 5px;
}
.send-app a {
    background: #0075FF
}
.nj-facebook-messenger:hover {
    opacity: 0.8;
}
</style>


Bước 2: Chèn mã HTML vào đầu thẻ <body> Thay https://www.facebook.com/chamnhedotcom/ bằng link Fanpage của bạn

Code
<div class='drag-wrapper drag-wrapper-right'><script>
//<![CDATA[
(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";
      fjs.parentNode.insertBefore(js, fjs);
    }(document, 'script', 'facebook-jssdk'));
//]]>
</script>
<div class='drag-wrapper drag-wrapper-right'>
<div class='thing' data-drag='data-drag'>
<div class='circle facebook-messenger-avatar facebook-messenger-avatar-type0'>
<img class='facebook-messenger-avatar' src='https://1.bp.blogspot.com/-F2LUvetXx1U/WLhLnSh02-I/AAAAAAAAZEg/rZSlat5sj7YiL8PXXzAtSRAp0vvNcZcsACLcB/s1600/facebook-messenger.png'/>
</div>
<div class='content'>
<div class='inside'>
<div class='fb-page' data-adapt-container-width='true' data-height='310' data-hide-cover='false' data-href='https://www.facebook.com/chamnhedotcom/' data-show-facepile='true' data-small-header='true' data-tabs='messages' data-width='310'><div class='fb-xfbml-parse-ignore'><blockquote cite='https://www.facebook.com/chamnhedotcom/'><a href='https://www.facebook.com/chamnhedotcom/'>Loading...</a></blockquote></div></div>
</div>
</div>
</div>
<div class='magnet-zone'>
<div class='magnet'></div>
</div>
</div>
</div>


Bước 3: Chèn javascript vào cuối thẻ <body>

<script type="text/javascript" src="http://ibox.ucoz.net/BSnew-01/Live-chat-fb/livefb.js"></script>

Nếu script không hoạt động thì kiểm tra xem thư viện hQuery đã nhúng vào template chưa, nếu chưa thì nhúng jquery vào trước đoạn code ở bên trên

Code
<script src='//ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js'></script>




Sống với niềm tin và đam mê sẽ sớm có được thành công,
Không hoang tưởng cũng không kiêu ngạo, thành công sẽ vững bền.
 
Forum » Giao lưu chia sẻ kinh nghiệm về website » Tổng hợp code và javascript » Tạo fb messenger chatbox cho web và blogspot
  • Page 1 of 1
  • 1
Search: