2010-06-11 19 views
10

हमने रूबी/रेल और फेसबुकर (आईफ्रेम एप्लिकेशन) के साथ एक फेसबुक एप्लिकेशन बनाया है और वर्तमान में एफबी.कैनवास.सेटऑटोराइज़ के साथ फंस गया है जो कुछ मामलों में असफल दिखता है। फेसबुक डेवलपर दस्तावेज़ों से उदाहरण का उपयोग करके (http://developers.facebook.com/docs/reference/javascript/ देखें)। एक बार जब आप 800px से अधिक पृष्ठ दर्ज करते हैं तो ऑटोरेसाइज विफल हो जाता है - तो कहने के लिए, यह तब तक काम करता है जब तक कैनवास बड़ा हो जाता है, जब यह छोटा हो जाता है। किसी के पास एक सुराग या शायद एक कामकाज है?फेसबुक जावास्क्रिप्ट एसडीके: FB.Canvas.setAutoResize iFrame काम नहीं कर रहा है?

यहाँ आकार बदलने कोड टुकड़ा

<div id="fb-root" style="width:1px;height:1px;position:absolute;"></div> 
<script type="text/javascript"> 
    window.fbAsyncInit = function() { 
    FB.init({appId: '126342024064822', status: true, cookie: true, xfbml: true}); 
    FB.Canvas.setAutoResize(true,100); 
    }; 
    (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> 

है मैं, कोई टिप्पणी या संकेत के लिए बहुत आभारी हूँ के बाद से मैं अब एक से अधिक दिन के लिए इस एक के आसपास मेरे सिर घुमा कर रहा हूँ।

उत्तर

12

कुछ महत्वपूर्ण बातें यकीन है कि एप्लिकेशन सेटिंग में सेट कर रहे हैं बनाने के लिए:

  1. कैनवास सेटिंग्स -> प्रस्तुत विधि = iFrame
  2. कैनवास सेटिंग्स -> iFrame आकार = आकार बदलने योग्य
  3. माइग्रेशन -> नया एसडीके = सक्षम

अगला टाइमआउट जोड़कर अपना कोड समायोजित करें (250 सबसे अच्छा काम करने लगता है, लेकिन आप futthe का प्रयोग करना चाह सकते हैं आर)। मैंने इसे एफएफ 3.6 और आईई 7 + में परीक्षण किया है। आईई में वर्टिकल स्क्रॉलबार का एक क्षणिक फ्लैश है जिसे मैं अभी भी ठीक करने की कोशिश कर रहा हूं।

<div id="fb-root"></div> 
<script type="text/javascript"> 
    window.fbAsyncInit = function() { 
    FB.init({appId: '12345678910', status: true, cookie: true, xfbml: true}); 
    window.setTimeout(function() { 
    FB.Canvas.setAutoResize(); 
    }, 250); 
    }; 
    (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> 
+1

आप शायद ओवरफ्लो के साथ स्क्रॉलबार फ्लैश को ठीक कर सकते हैं: शरीर पर छिपा हुआ। – webjunkie

+0

मैं ओवरफ्लो के साथ स्क्रॉलबार फ्लैश को छिपाने में सक्षम था: शरीर _and_ html पर छिपा हुआ। – jpadvo

+0

एफवाईआई, कारण आपको अतिप्रवाह जोड़ने की आवश्यकता है: छुपा, जैसा कि मुझे लगता है कि पैडिंग और मार्जिन की वजह से, एफबी आपके कैनवास के आकार की गणना करने के लिए जेएस का उपयोग करता है, जिसे ब्राउज़र द्वारा अलग-अलग गणना की जाती है, कुछ में पैडिंग शामिल नहीं होती है और कैल्श्यूशन में मार्जिन। – happyhardik

7

समाधान आसान है! डाल FB.Canvas.setAutoResize() के अलावा
आप शरीर शैली को उर शरीर बदलना होगा = "अतिप्रवाह: छिपा हुआ"

यह मेरे लिए काम करता है! अब ie8 ठीक है !!

2

मैं यह भी कहना है, कि आप वास्तव में क्या करना चाहते हैं तो

<div id="fb-root"> 
इस के लिए

काम करने की जरूरत है।

संबंधित मुद्दे