Facebook Canvas APP (Iframed) Tự động thay đổi kích thước chiều cao

Question

Gần đây bạn đã gặp sự cố với các ứng dụng khung nội tuyến canvas của Facebook. Tôi đã thiết lập các thiết lập của chúng tôi để "tự động thay đổi kích cỡ" và thực hiện cuộc gọi FB JS chính xác để thực hiện thay đổi kích thước của chiều cao (để tránh các thanh cuộn không mong muốn), nhưng nó dường như không hoạt động.

Có ai khác có vấn đề này hoặc đưa ra giải pháp không?

Cảm ơn!

Erik

Answer 1

Tự động thay đổi kích thước không hoạt động. Đó là một lỗi lớn mà facebook chưa sửa được.

Tuy nhiên, đây là công việc mã xung quanh cho các vấn đề:

<div id="fb-root"></div> 
<script type="text/javascript"> 
    window.fbAsyncInit = function() { 
     FB.init({appId: 'YOUR APP ID', status: true, cookie: true, xfbml: true}); 
    }; 
    (function() { 
     var e = document.createElement('script'); 
     e.type = 'text/javascript'; 
     e.src = document.location.protocol + 
      '//connect.facebook.net/en_US/all.js'; 
     e.async = true; 
     document.getElementById('fb-root').appendChild(e); 
    }()); 
    </script> 
<script type="text/javascript" src="http://static.ak.facebook.com/js/api_lib/v0.4/FeatureLoader.js.php"></script> 
<div id='FB_HiddenContainer' style='display:none;position:absolute;left:-100px;top:-100px;width:0;height:0'> 
</div> 
<script type="text/javascript"> 
    window.onload = function(){ 
    FB_RequireFeatures(['CanvasUtil'], function(){ 
     FB.CanvasClient.setCanvasHeight('1500px'); 
    }); 
    }; 
</script> 

Answer 2

Roozbeh đang trên con đường đúng với câu trả lời của mình. Tuy nhiên, mã của anh ta rất có thể sẽ tạo ra lỗi (ít nhất là trong Firefox), vì cả SDK cũ và mới đang được tham chiếu (và chúng không chơi tốt với nhau).

Ngoài ra, chỉ sử dụng SDK mới để điều chỉnh chiều cao là siêu đơn giản:

<div id="fb-root"></div> 
<script type="text/javascript"> 
    window.fbAsyncInit = function() { 
     FB.init({ appId: 'YOUR APP ID', status: true, cookie: true, xfbml: true }); 
     FB.Canvas.setSize({ height: 890 }); 
    }; 
    (function() { 
     var e = document.createElement('script'); 
     e.type = 'text/javascript'; 
     e.src = document.location.protocol + 
      '//connect.facebook.net/en_US/all.js'; 
     e.async = true; 
     document.getElementById('fb-root').appendChild(e); 
    }()); 
</script> 

tài liệu chính thức hiện hành here.

Answer 3

Vâng ... tự động thay đổi kích thước là lỗi và chỉ thỉnh thoảng làm việc

bạn có thể đặt nó bằng tay như thế này: FB.Canvas.setSize ({height:. $ ('Body') chiều cao()});

Answer 4

FB.Canvas.setAutoResize sẽ không được dùng nữa và bạn nên sử dụng FB.Canvas.setAutoGrow vì nó thực hiện chính xác những gì bạn muốn.

Answer 5

Mở rộng trên một vài điểm lưu ý đã:

window.fbAsyncInit = function() { 
     FB.init({ 
      appId: 'YOUR APP ID', 
      status: true, 
      cookie: true, 
      xfbml: true, 
      oauth: true 
     }); 
     FB.Canvas.setAutoGrow(true); 
    }; 

này sẽ cho phép thay đổi năng động trong chiều cao ứng dụng. Cũng thiết lập một chiều rộng rõ ràng trong css của bạn như vậy có thể giúp cũng như:

html { 
    width: 760px; 
    overflow: hidden; 
} 

Answer 6

Trước </body> thẻ, tôi đã viết đoạn mã sau.

<div id="fb-root"></div> 
<script type="text/javascript"> 
      window.fbAsyncInit = function() { 
       FB.init({ 
        appId: '<?php echo YOUR_APP_ID ?>', 
        cookie: true, 
        xfbml: true, 
        oauth: true 
       }); 
       FB.Canvas.setAutoGrow(true); 
      }; 
      (function() { 
       var e = document.createElement('script'); e.async = true; 
       e.src = document.location.protocol + 
        '//connect.facebook.net/en_US/all.js'; 
       document.getElementById('fb-root').appendChild(e); 
      }()); 
</script> 

Và nó hoạt động tốt cho tôi.

Không quan trọng là height là Fixed or Fluid trong Cài đặt ứng dụng nâng cao.

FB.Canvas.setAutoGrow(true); không hoạt động trong đơn đăng ký của tôi, nhưng tôi thấy rằng tôi đã bỏ lỡ mã <div id="fb-root"></div>. Tôi chỉ cần đặt nó trước <script type="text/javascript"> và giải quyết vấn đề.

Answer 7

Nếu bất kỳ ai vẫn gặp sự cố này, bởi vì FB.init() của bạn sẽ không bao giờ được gọi. Trong trường hợp của tôi, tôi đã có nó trong hàm jQuery document.ready của tôi. không làm điều đó!

Đặt bên ngoài này của jQuery của bạn: Câu trả lời

$(function() { ... jquery here... }); 

// do FB stuff 
FB.init({appId: 'APP_ID', status: true, cookie: true }); 
FB.Canvas.setAutoGrow();