Nút Kết nối Facebook không hiển thị trong Safari/Chrome

Question

Thực hiện kết nối Facebook của tôi (chỉ cần một nút đăng nhập đơn giản, fb: nút đăng nhập) hoạt động hoàn hảo trên Firefox và IE.

Nhưng nút tương tự không hiển thị trong Safari/Chrome (Webkit).

Đây là những gì mỉa mai. Trong nỗ lực gỡ lỗi của tôi, tôi đã lưu trang (có chứa fb: login-button) lên dưới dạng trang tĩnh và sau đó tải trang đó trong Safari. Và nút xuất hiện, mọi thứ đều hoạt động!

Trang chính xác (với cùng một nguồn HTML chính xác) được hiển thị bởi PHP của tôi không có cách nào để hiển thị nút.

Tôi đang cố gắng hết sức để hỗ trợ Webkit tại đây nhưng tôi gần như đã từ bỏ. Ai có thể giúp được không?

Answer 1

Điều này có thể do cài đặt ClickToFlash. Hoặc là vô hiệu hóa hoặc kiểm tra "Tự động tải chế độ xem Flash ẩn" trong cài đặt ClickToFlash.

Answer 2

Điều này xảy ra khi tôi có miền sai trong callback_url trong config/facebooker.yml. Rõ ràng nó sử dụng để tải các tập tin js.

Answer 3

Tôi đã gặp sự cố nhưng tôi đã giải quyết vấn đề bằng cách đảm bảo URL trong cài đặt ứng dụng của tôi giống hệt URL trong trang web của tôi (tức là nó không hoạt động khi tôi truy cập trang web của mình mà không có www.).

Answer 4

gì chúng tôi phát hiện ra là Safari (và có thể một số phiên bản cũ của Chrome hoặc các trình duyệt WebKit khác) có một vấn đề với mã của Facebook bằng cách sử dụng chức năng innerHTML JS nếu trang của bạn đến với một tiêu đề phản ứng XHTML (application/xhtml + xml). Sử dụng văn bản/html giải quyết vấn đề.

Trong trường hợp JSF2, mà chúng tôi sử dụng, thực hiện việc sửa chữa là đơn giản như gói nút FB như thế này:

<ui:composition xmlns="http://www.w3.org/1999/xhtml" 
    xmlns:fb="http://www.facebook.com/2008/fbml" 
    xmlns:f="http://java.sun.com/jsf/core"> 

... 

    <f:view contentType="text/html"> 
     <fb:login-button>Login using Facebook</fb:login-button> 
    </f:view> 

Facebook lỗi báo cáo ở đây:
http://bugs.developers.facebook.net/show_bug.cgi?id=5545

Answer 5

tôi thấy một cách nữa điều này có thể xảy ra (cách đổ lỗi cho chính bản thân mình); nó có thể không phổ biến, nhưng trong trường hợp có thể cứu bất kỳ ai khác, đây là:

Triệu chứng này cũng có thể do nhiều công cụ bảo mật khác nhau chặn tài nguyên facebook.

Trong trường hợp của tôi, tôi đã cài đặt Facebook Disconnect age trước đây trong Chrome dưới dạng plugin và quên tất cả về việc cài đặt. Tôi cũng đã cài đặt Chrome thứ hai có vẻ giống hệt (nhưng không có Disconnect Facebook). Người đầu tiên tải đúng fb: nút đăng nhập, và người kia sẽ không tải; đã cho tôi lứa tuổi trước khi tôi nhìn vào các plugin, bởi vì Facebook Disconnect không có một biểu tượng và do đó sự hiện diện của nó là khá dễ dàng cho tôi để bỏ lỡ.

Dưới đây là những gì bạn sẽ thấy nếu một số loại plugin bảo mật ngăn tài nguyên facebook tải. Chỉ cần nhìn vào html mà ám trong trình duyệt bằng cách sử dụng các công cụ phát triển.

Trong một phiên chrome bình thường bạn sẽ kết thúc với một cái gì đó như thế này:

<fb:login-button><a class="fb_button fb_button_medium"><span class="fb_button_text">Your text here</span></a></fb:login-button>

Nhưng trong phiên bản với nguồn facebook của vô hiệu hóa bạn sẽ kết thúc với điều này:

<fb:login-button>Your text here</fb:login-button>

Như tôi đã nói, khá rõ ràng khi nhìn lại.

Answer 6

Tôi đã gặp vấn đề này với nút Facebook không hiển thị và tôi đã mất rất nhiều thời gian để tìm ra nó là gì. May mắn sau những ngày kéo tóc tôi sẽ chia sẻ câu trả lời với mọi người. Trong tình huống của tôi, tôi đã không kích hoạt xfbml. Trong FB.init của tôi, tôi đã có nó thiết lập để sai:

FB.init({ 
     appId  : 'app_id', // App ID 
     status  : true, // check login status 
     cookie  : true, // enable cookies to allow the server to access the session 
     xfbml  : false, // parse XFBML 
     oauth  : true // enable OAuth 2.0 
    }); 

tôi đã thay đổi này để "đúng" (xfbml) và các nút đăng nhập hoạt động tuyệt vời bây giờ! : P Chúc may mắn!

Answer 7

Có cùng sự cố nhưng không liên quan đến bất kỳ thứ gì như plugin hoặc nội dung không đúng định dạng. Có vẻ như nếu bạn bật tính năng lọc quốc gia trên trang facebook của mình, nó có vấn đề với nút tương tự, điều này sẽ khá rõ ràng. Facebook nhận vị trí của bạn từ hồ sơ của bạn chứ không phải địa chỉ IP của bạn.

Đảm bảo tắt khóa quốc gia nếu bạn định sử dụng plugin mạng xã hội.

Answer 8

Tôi đã thử mọi giải pháp được đề xuất ở đây và nó không hoạt động đối với tôi. Nhưng bây giờ tôi cuối cùng đã tìm ra giải pháp.

Giờ đây, Facebook yêu cầu bảo mật (https) cho Canvas (URL Canvas an toàn). Người không an toàn sẽ sớm bị phản đối.

Đây là sự khác biệt chính, Chrome không thích kết nối https với chứng chỉ không hợp lệ. Trên một localhost, rất có thể bạn đã cài đặt stunnel để cho phép kết nối https cho localhost. Firefox là ok với chứng chỉ SSL tự tạo và cho phép bạn thêm một ngoại lệ khi cố gắng truy cập trang web đó. Chrome không cho phép nó ra khỏi hộp.

Khi tôi tải ứng dụng của tôi trong Chrome trang là trống và tôi không thấy bất kỳ nút đăng nhập.

Bấm F12 và nhấp vào tab netwrok trong Chrome:

Bạn thấy rằng yêu cầu bưu điện đến localhost của bạn bị hủy bỏ. DOUBLE Click vào nó.

Bây giờ bạn sẽ thấy chrome đó đang chặn localhost vì giấy chứng nhận:

nhấp chuột vào tiến hành anyway.

Bây giờ để sao lưu vào tab khác của bạn và tải lại trang:

Chrome hiện đang làm việc như Firefox và hiển thị nút đăng nhập.