2011-10-12 16 views
9

उपयोग किया है, मैं एक विजेट की तरह एक फेसबुक जैसा बटन जोड़ने की कोशिश कर रहा हूं। कोड है कि मैं अपने पेज के लिए बटन की तरह फेसबुक जोड़ने के लिए उपयोग इस प्रकार है:एफबी अनिर्धारित है, भले ही मैंने इसे

widget.html

<body> 
<div id="fb-root"></div> 
<script> 
    window.fbAsyncInit = function() { 
     FB.init({ 
      appId : '263071593731910', 
      status : false, // check login status 
      cookie : true, // enable cookies to allow the server to access the session 
      xfbml : true // parse XFBML 
     }); 
    }; 
    (function() { 
     var e = document.createElement('script'); 
     e.src = document.location.protocol + '//connect.facebook.net/en_US/all.js'; 
     e.async = true; 
     document.getElementById('fb-root').appendChild(e); 
    }()); 
</script> 
<div id="fb-button"></div> 
<script type="text/javascript" src="widget.js"></script> 

widget.js

$(function(){ 
var fb = $(document.createElement("fb:like")); 
fb.attr({ 
    href: data.facebook, 
    send: false, 
    layout: 'button_count', 
    width: 70, 
    'show_faces': false 
}); 
$("#fb-button").empty().append(fb); 
FB.XFBML.parse($("#fb-button").get(0)); 
FB.Event.subscribe('edge.create',changeView); 
}); 

* changeView समारोह के रूप में अच्छी तरह से मौजूद है जावास्क्रिप्ट में।

जब मैं कोड चलाता हूं, तो मुझे एक त्रुटि मिलती है: Uncaught ReferenceError: FB is not defined बटन बनाये जाने के बावजूद। त्रुटि FB.XFBML.parse कोड वाली रेखा को इंगित कर रही है। क्या मुझे जावास्क्रिप्ट में अलग-अलग करने की ज़रूरत है?

+0

विंडो.एफबी या दस्तावेज़ का उपयोग करने का प्रयास करें। एफबी –

उत्तर

14

window.fbAsyncInit से शुरू होने वाले बड़े स्क्रिप्ट ब्लॉक का पूरा बिंदु यह है कि फेसबुक एसडीके असीमित रूप से लोड हो जाता है।

भले ही आपको एक jQuery दस्तावेज़ तैयार कॉलबैक के अंदर FB के विरुद्ध अपनी कॉल मिल गई है, यह सुनिश्चित करने के लिए पर्याप्त नहीं है कि उस कोड को निष्पादित करते समय एसडीके लोड हो जाए।

सौभाग्य से, window.fbAsyncInitबिल्कुल के लिए मौजूद है: उद्देश्य: यह एसडीके लोड होने तक नहीं चलाया जाएगा।

Facebook's docs से:

The function assigned to window.fbAsyncInit is run as soon as the SDK is loaded. Any code that you want to run after the SDK is loaded should be placed within this function and after the call to FB.init. For example, this is where you would test the logged in status of the user or subscribe to any Facebook events in which your application is interested.

+2

ठीक है। तो क्या window.fbSyncInit की तरह कुछ है जो यह समकालिक रूप से करेगा? या एक घटना जो तब चलती है जब शेष दस्तावेज़ लोड होता है? मुझे वास्तव में यकीन नहीं है कि एफबी इनिट के साथ $ (दस्तावेज़) .ready() को कैसे जोड़ना है, जहां मुझे पता है कि सभी HTML तत्व वहां हैं। –

5

अमेरिकन प्लान अभी तक उस समय में परिभाषित नहीं किया गया था। आपने अभी तक इसका उपयोग नहीं किया है, आपने इसे पहले टाइप किया था। दस्तावेज़ तैयार होने पर FB.XFMBL.parse लाइन निष्पादित होगी। //connect.facebook.net/en_US/all.js लाइन पर भी चला जाता है। तो यह वास्तव में विश्वसनीय नहीं है कि अगर कोड उसी घटना से निष्पादित किया जाता है तो कौन सा कोड निष्पादित करेगा।

आप क्या कर सकते हैं किसी भी तरह से कोड है जिसे आप window.fbAsyncInit से निष्पादित करना चाहते हैं। उस बिंदु से, आप सुनिश्चित कर सकते हैं कि FB उपयोग करने के लिए तैयार है।

अगर आप विजेट.जेएस में मौजूद कोड को मिश्रित नहीं करना चाहते हैं तो आप एक तरीका कर सकते हैं jQuery की कस्टम इवेंट का उपयोग करके। तो बजाय $(function() { ... }); होने के, तो आप इस रेखा के साथ कुछ करना होगा:

$(window).bind('fbAsyncInit', function() { 
    // Your code here 
}); 

तो फिर तुम सिर्फ FB.init() पंक्ति के बाद window.fbAsyncInit कॉल $(window).triggerHandler('fbAsyncInit') होगा।

13

मुझे यह समस्या थी और इसे हल करने के समाधान के समान हल किया गया ताकि मैं इसे यहां पोस्ट कर रहा हूं अगर किसी और को इसका उपयोग करने की आवश्यकता हो।

मैंने प्रारंभिक धारणा की है कि fbAsyncInit विधि में किए गए एफबी प्रारंभिक कॉल को तुरंत प्रारंभ किया जाएगा, इसलिए मैंने भी $(document).ready() विधि में एफबी ऑब्जेक्ट के उपयोग को कोड किया। बात वह नहीं है। पृष्ठ लोड होने के बाद fbAsyncInit को कुछ समय लगता है। यहाँ मेरी समाधान, तब होता है जब अपनी साइट पर jQuery का उपयोग कर:

<script type="text/javascript"> 

    window.fbAsyncInit = function() { 

    FB.init({ 
     appId  : 'your_app_id', // App ID 
     channelUrl : 'your channel', 
     status  : true, // check login status 
     cookie  : true, // enable cookies to allow the server to access the session 
     xfbml  : true // parse XFBML 
    }); 
    jQuery(document).trigger('FBSDKLoaded'); //This is the most important line to solving the issue 
    }; 

    // Load the SDK Asynchronously 
    (function(d){ 
    var js, id = 'facebook-jssdk', ref = d.getElementsByTagName('script')[0]; 
    if (d.getElementById(id)) {return;} 
    js = d.createElement('script'); js.id = id; js.async = true; 
    js.src = "//connect.facebook.net/en_US/all.js#xfbml=1&appId=269187653191150"; 
    ref.parentNode.insertBefore(js, ref); 
    }(document)); 

</script> 

पिछले कार्य बस अपने घटना के लिए एक बाँध के लिए अपने $(document).ready() कोड स्विच करने के लिए है। यह तब जाता है जब आप एफबी ऑब्जेक्ट का उपयोग कर रहे हों।

(function($) { 
    $(document).bind('FBSDKLoaded', function() { 
     //Code using the FB object goes here. 
    }); 

})(jQuery); 

एक बात मैं भी ऐसा करना चाहिए उल्लेख: फ़ायरफ़ॉक्स क्रोम की तरह वेबकिट ब्राउज़रों तुलना में बहुत अधिक इस के सहिष्णु है। मैं समझ नहीं पाया कि क्यों मेरा jQuery का कोई भी क्रोम में ठीक से काम नहीं कर रहा था ... ठीक है, यही कारण है कि।

मुझे आशा है कि इससे किसी की मदद मिलेगी।

+0

मैं तुमसे प्यार करता हूँ !!! –

+0

खुशी है कि किसी की मदद की! – Brandon

+0

ब्रैंडन का जवाब स्पॉट और काम करता है। हालांकि, getScript(): https://developers.facebook.com/docs/javascript/howto/jquery/v2.5 के साथ jQuery और FB का उपयोग करके सुझाए गए कार्यान्वयन के लिए निर्देश भी दिए गए हैं –

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