2011-10-12 36 views
9

Tôi đang cố gắng thêm một nút Thích Facebook vào một tiện ích mà tôi đang tạo. Các mã mà tôi sử dụng để thêm Facebook nút như trang của tôi là như sau:FB là không xác định mặc dù tôi chỉ sử dụng nó

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); 
}); 

* Chức năng changeView không tồn tại cũng trong JavaScript.

Khi tôi chạy mã, tôi gặp lỗi: Uncaught ReferenceError: FB is not defined ngay cả khi nút được tạo. Lỗi này trỏ đến dòng chứa mã FB.XFBML.parse. Có điều gì tôi cần phải làm khác trong JavaScript của tôi?

+0

Thử sử dụng window.FB hoặc document.FB –

Trả lời

14

Toàn bộ điểm của khối tập lệnh lớn đó bắt đầu bằng window.fbAsyncInit là SDK Facebook được tải không đồng bộ.

Mặc dù bạn đã nhận được cuộc gọi của mình chống lại FB bên trong một tài liệu jQuery sẵn sàng gọi lại, điều đó không đủ để đảm bảo SDK được tải khi mã đó được thực thi.

May mắn thay, window.fbAsyncInit tồn tại cho chính xác mục đích đó: nó sẽ không chạy cho đến khi SDK được tải.

Từ 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

OK. Vì vậy, có một cái gì đó như window.fbSyncInit mà sẽ làm điều này đồng bộ? Hoặc một sự kiện sẽ chạy khi phần còn lại của tài liệu được tải? Tôi không thực sự chắc chắn làm thế nào để kết hợp $ (tài liệu) .ready() với init fb, nơi tôi biết rằng tất cả các yếu tố HTML đang có. –

5

FB vẫn chưa được xác định tại thời điểm đó. Bạn chưa sử dụng nó, bạn chỉ cần gõ nó sớm hơn. Dòng FB.XFMBL.parse sẽ thực thi khi tài liệu sẵn sàng. Cùng đi đến dòng //connect.facebook.net/en_US/all.js. Vì vậy, nó không thực sự đáng tin cậy mà mã sẽ thực hiện đầu tiên nếu nó được thực thi từ cùng một sự kiện.

Điều bạn có thể làm là bằng cách nào đó có mã bạn muốn được thực thi từ window.fbAsyncInit. Từ thời điểm đó trở đi, bạn có thể chắc chắn rằng FB đã sẵn sàng để sử dụng.

Một cách bạn có thể làm nếu bạn không muốn kết hợp mã bạn có trong widget.js là sử dụng sự kiện tùy chỉnh của jQuery. Vì vậy, thay vì phải $(function() { ... });, bạn sẽ có một cái gì đó dọc theo dòng này:

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

Sau đó, bạn sẽ có window.fbAsyncInit gọi $(window).triggerHandler('fbAsyncInit') ngay sau dòng FB.init().

13

Tôi gặp vấn đề này và giải quyết nó tương tự như giải pháp mà Amry cung cấp vì vậy tôi đăng nó ở đây trong trường hợp người khác cần sử dụng nó.

Tôi đưa ra giả định ban đầu là lệnh khởi tạo FB được thực hiện trong phương thức fbAsyncInit sẽ khởi tạo ngay lập tức, vì vậy tôi cũng đã mã hóa việc sử dụng đối tượng FB của tôi theo phương thức $(document).ready(). Đó không phải là tình huống. fbAsyncInit mất khá nhiều thời gian sau khi tải trang để kết thúc khởi tạo. Đây là giải pháp của tôi, khi sử dụng jQuery trên trang web của tôi:

<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> 

Nhiệm vụ cuối cùng là chỉ cần chuyển mã $(document).ready() thành ràng buộc cho sự kiện của bạn. Điều này xảy ra khi bạn đang sử dụng đối tượng FB.

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

})(jQuery); 

Một điều tôi cũng nên đề cập: Firefox có nhiều khả năng chịu đựng hơn các trình duyệt Webkit như Chrome. Tôi không thể hiểu tại sao NONE của jQuery của tôi đã hoạt động bình thường trong Chrome ... à, đây là lý do tại sao.

Tôi hy vọng điều này sẽ giúp ai đó.

+0

Tôi yêu bạn! –

+0

Vui mừng đã giúp một ai đó! – Brandon

+0

Câu trả lời của Brandon là tại chỗ và hoạt động. Tuy nhiên, cũng có hướng dẫn cho việc triển khai được đề xuất bằng cách sử dụng jQuery và FB với getScript(): https://developers.facebook.com/docs/javascript/howto/jquery/v2.5 –

Các vấn đề liên quan