[Code] Nút đóng mở thanh chat với fanpage facebook

  • Admin

    Nút đóng mở thanh chat với fanpage facebook

    demo:
    Code:
    <div class="fb-chat" style="position:fixed; z-index:9999999; left:10px; bottom:-300px;width:270px;height:330px">
       <h4 class="fb-tab" style="width:94%;height:25px;padding:3px 8px;line-height:25px;color:#fff;text-align:center;background:#3a5795;border-top-left-radius:5px;border-top-right-radius:5px;margin:0px;cursor:pointer">
          Facebook Chat
          <span style="float:right;cursor:pointer" class="cong">+</span>&nbsp;<span style="float:right;display:none;cursor:pointer" class="tru">-</span>   
       </h4>
            <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.5";
      fjs.parentNode.insertBefore(js, fjs);
      }(document, 'script', 'facebook-jssdk'));</script>  <style>#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;}#cfacebook .fchat{float:left;width:100%;height:270px;overflow:hidden;display:none;background-color:#fff;}#cfacebook .fchat .fb-page{margin-top:-130px;float:left;}#cfacebook a.chat_fb{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-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAqCAMAAABFoMFOAAAAWlBMV…8/UxBxQDQuFwlpqgBZBq6+P+unVY1GnDgwqbD2zGz5e1lBdwvGGPE6OgAAAABJRU5ErkJggg==);background-repeat:repeat-x;background-size:auto;background-position:0 0;background-color:#3a5795;border:0;border-bottom:1px solid #133783;z-index:9999999;margin-right:12px;font-size:18px;}#cfacebook a.chat_fb:hover{color:yellow;text-decoration:none;}</style>  <script>
      jQuery(document).ready(function () {
      jQuery(".chat_fb").click(function() {
    jQuery('.fchat').toggle('slow');
      });
      });
      </script>     
    <div class="fb-page" data-tabs="messages" data-href="https://www.facebook.com/hotrofmnet-1147991938592467/" data-width="350" data-height="400" data-small-header="false" data-adapt-container-width="true" data-hide-cover="false" data-show-facepile="true" data-show-posts="false">
       
    </div>


    <script type="text/javascript">
    $(function(){
          $(".fb-tab").click(function(){
             if(parseInt($(".fb-chat").css("bottom"))==-300){
                $(".fb-chat").animate({
                   "bottom":"25px"
                },500)
                $(".cong").css("display","none");
                $(".tru").css("display","");
             }else{
                $(".fb-chat").animate({
                   "bottom":"-300px"
                },500)
                $(".cong").css("display","");
                $(".tru").css("display","none");
             }
          });
       });</script>

    nếu cho vào mà ko được thì thử kiếm tra xem đã có js : jquery chưa nhé . ko có thì thêm

    Code:
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>

  • Harry Jackson
    Chèn code này vào đâu mới đc chứ? -_-

  • Admin
    @Harry Jackson đã viết:Chèn code này vào đâu mới đc chứ? -_-

    cho vào footer hoặc head đều được nhé.

  • Harry Jackson
  • Admin
    @Harry Jackson đã viết:Làm ko đc -_-
    \

    Mình vừa làm thử đây

    Code:
    http://mangchiase24h.macsboard.com/
    ví dụ này xóa 24h nữa.

    kiểm tra xem có xung đột js nào khác ko nhé. :)

  • Sponsored content

Thông tin tác giả
avatar
ACP
Bài viết :
329
Points :
636
Like :
106
Punbb
Quản trị
Status :
test
Xem lý lịch thành viên http://hotrofm.forumvi.com
Thông tin tác giả
avatar
MEM
Bài viết :
2
Points :
2
Like :
0
PhpBB3
Xem lý lịch thành viên
Thông tin tác giả
avatar
ACP
Bài viết :
329
Points :
636
Like :
106
Punbb
Quản trị
Status :
test
Xem lý lịch thành viên http://hotrofm.forumvi.com
Thông tin tác giả
avatar
MEM
Bài viết :
2
Points :
2
Like :
0
PhpBB3
Xem lý lịch thành viên
Thông tin tác giả
avatar
ACP
Bài viết :
329
Points :
636
Like :
106
Punbb
Quản trị
Status :
test
Xem lý lịch thành viên http://hotrofm.forumvi.com
Thông tin tác giả
Sponsored content
Bài viết liên quan
    Đang tải dữ liệu

Permissions in this forum:
Bạn không có quyền trả lời bài viết