Twitter 余烬cli&；Facebook共享按钮-如何使用？ 目标-为Facebook设置共享按钮 我遇到过各种各样的问题，我设法解决了大多数问题，但从未同时解决所有问题。 ReferenceError:未定义FB（控制台中的错误） “FB init函数给出错误的版本错误”（控制台中的错误） “我的按钮”在转换到其他管线后不会渲染 “我的按钮”渲染，但在初始路线上，按钮周围没有与相邻内容的间距 关于该渲染问题（此处的-/hyphen用于注意间距问题） 第一次渲染：

• 第二次以上的渲染：

我学到的是：

• Facebook想要一个
  作为你的

• FB.XFBML.parse（）

  可以在didInsertElement之后调用，以在转换后呈现组件

我做了一次JSBin样板的尝试，它目前被困在一个未定义的FB错误中。

部分答案我也感兴趣：

• 要获得好的结果，至少必须了解解决方案有多复杂（“它必须包括一个初始值设定项和一个视图/组件！”或“您可以通过使用…”来解决此问题”）

可能有用的零件 关于“在FB.init（）之后”的帖子

初始值设定项 组件 脚本标记

facebook要求的根div

加载Facebook SDK 共享链接 我想这就是我所需要做的；我希望我没有忘记什么

我没有设置组件，所以这只是一个常规视图，但应该可以正常工作

  <div class="fb-share-button" {{bind-attr data-href=link}} data-type="button"></div>

更新：替代解决方案 我认为您使用哪种解决方案取决于您的需求。我的重点是加快第一次渲染的时间，因此我将Facebook SDK的项目更改为不

延迟

我一直在玩两种解决方案，我认为这完全取决于你的需要

在初始值设定项中加载Facebook SDK，但设置访问的全局承诺

这将在启动时启动加载，但允许您的应用程序继续启动，而无需等待Facebook。所有对Facebook API的调用都需要通过promise访问

如果有人要求，我将分享此解决方案的详细信息，但现在我只关注下一个解决方案：

仅在服务中按需加载Facebook SDK

与之前一样，所有对Facebook API的访问都需要通过承诺，但这次它很好地封装在一个服务中，并且只按需加载：

还要注意，我在
FB.init
中将
xfml
设置为
false
。如果您的共享链接在加载SDK之前已呈现，
FB.init（{xfml:true}）
将“解析”它们，而您的
FB.xfml.parse（）
调用将再次执行此操作。通过将
xfbml
设置为
false
，您可以确保
FB.xfbml.parse（）
只会被调用一次。
我偶然发现了您的问题，因为我正在寻找相同的答案。您应该使初始值设定项异步，这可以确保在您的Ember应用程序启动之前定义全局
FB
。这篇博文应该对你有所帮助：谢谢，它可能已经解决了所有问题！这也许可以解释为什么第一次加载与第二次加载由于缓存等原因有所不同。就我所测试的而言，这解决了我的问题，但我总体上感到困惑。是的，我认为解决问题的关键是在初始值设定项中使用延迟准备/高级准备！谢谢你的回答！这与我使用的解决方案相同，不包括脱机存根。回答得好。顺便说一句，我认为您可以调整scheduleOnce调用以直接调用FB.XFBML.parse
/* global FB */
import Ember from 'ember';

export default Ember.Component.extend({
    tagName: 'div',
    classNames: 'fb-like',
    attributeBindings: [
        'data-href',
        'data-layout',
        'data-action',
        'data-show-faces',
        'data-share'
    ],
    
    onDidInsertElement: function() {
        Ember.run.schedule('afterRender', FB.XFBML.parse);
    }.on('didInsertElement'),

    init: function() {
        Ember.run.schedule('afterRender', FB.XFBML.parse);
    }
});

<script type="text/javascript" src="//connect.facebook.net/en_US/sdk.js#xfbml=1&appId=123&version=v2.2"></script>

<div id="fb-root"></div>

import ENV from "my-app/config/environment";
import setupOfflineMode from "my-app/utils/offline-mode";

export function initialize(container, application) {
  // offline mode stubs `FB`
  if (ENV.offlineMode) { return setupOfflineMode(); }

  // Wait for Facebook to load before allowing the application
  // to fully boot. This prevents `ReferenceError: FB is not defined`
  application.deferReadiness();

  var fbAsyncInit = function() {
    initFacebook(window.FB);
    application.advanceReadiness();
  };

  loadFacebookSDK();

  window.fbAsyncInit = fbAsyncInit;
}

function loadFacebookSDK() {
  (function(d, s, id){
    var js, fjs = d.getElementsByTagName(s)[0];
    if (d.getElementById(id)) {return;}
    js = d.createElement(s); js.id = id;
    js.src = "//connect.facebook.net/en_US/sdk.js";
    fjs.parentNode.insertBefore(js, fjs);
  }(document, 'script', 'facebook-jssdk'));
}

function initFacebook(FB) {
  FB.init({
    appId: ENV.FB_APP_ID,
    status: true,
    cookie: true,
    xfbml: true,
    version: ENV.GRAPH_API_VERSION
  });
}

export default {
  name: 'facebook',
  initialize: initialize
};

  <div class="fb-share-button" {{bind-attr data-href=link}} data-type="button"></div>

export default Ember.View.extend({
  setupSocialNetworks: function() {
    Ember.run.scheduleOnce('afterRender', this, function() {
      FB.XFBML.parse();
    });
  }.on('didInsertElement')
});

// app/services/facebook.js
import Ember from 'ember';
import ENV from "juniper/config/environment";

var computed = Ember.computed;
var RSVP = Ember.RSVP;

var _facebookSDKDeferrable = Ember.RSVP.defer();

var fbAsyncInit = function() {
  _initFacebook(window.FB);
  _facebookSDKDeferrable.resolve(window.FB);
};

window.fbAsyncInit = fbAsyncInit;

export default Ember.Service.extend({
  // Resolves when the Facebook SDK is ready.
  //
  // Usage:
  //
  //     facebook: Ember.inject.service(),
  //     foo: function() {
  //       this.get('facebook.SDK').then(function(FB) {
  //         // Facebook SDK is ready and FB is a reference to the SDK
  //       });
  //     }
  SDK: computed.alias('FB'),
  FB: computed(function() {
    _loadFacebookSDK();
    return _facebookSDKDeferrable.promise;
  })

  // I've also put promisified helpers for Facebook SDK
  // methods here.
});

function _loadFacebookSDK() {
  (function(d, s, id){
    var js, fjs = d.getElementsByTagName(s)[0];
    if (d.getElementById(id)) {return;}
    js = d.createElement(s); js.id = id;
    js.src = "//connect.facebook.net/en_US/sdk.js";
    fjs.parentNode.insertBefore(js, fjs);
  }(document, 'script', 'facebook-jssdk'));

}

function _initFacebook(FB) {
  FB.init({
    appId: ENV.FB_APP_ID,
    status: true,
    cookie: true,
    xfbml: false,
    version: ENV.GRAPH_API_VERSION
  });
}