free web
free web
free web
[ Tin mới · Thành viên · Nội quy · Tìm kiếm · RSS ]
Page 1 of 11
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-8x Date: Thứ năm, 04.May.2017, 11:43 AM | Message # 1
Offline
Avatar
Cấp độ: ₷oáiҪa
Bài viết: 35
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 11
Search: