title: Ember-cli & Facebook-share buttons - how to?
body: <h2>Goal - Have share buttons for Facebook</h2>
  <h3>I've had various problems, I've managed to solve most issues but never all at the same time.</h3>
  <ul>
  <li>ReferenceError: FB is not defined (error in the console)</li>
  <li>&quot;FB init function gives wrong version error&quot; (error in the console)</li>
  <li>My button does not render after transitioned to another route.</li>
  <li>My button renders but there is no spacing around the button to adjacent stuff on the initial route</li>
  </ul>
  <h3>About that rendering issue (the - / hyphen is there to notice the spacing issue)</h3>
  <ul>
  <li>Rendering for the 1st time:</li>
  </ul>
  <p><img src="https://i.stack.imgur.com/F1Q7h.png" alt="1st render" /></p>
  <ul>
  <li>Rendering for the 2nd+ time:</li>
  </ul>
  <p><img src="https://i.stack.imgur.com/vAuDE.png" alt="2nd+ render" /></p>
  <h3>What I've learned:</h3>
  <ul>
  <li>Facebook wants a <code>&lt;div id=&quot;fb-root&quot;&gt;&lt;/div&gt;</code> as the first element inside your <code>&lt;body&gt;</code></li>
  <li><code>FB.XFBML.parse()</code> can be called after didInsertElement to render a component after a transition</li>
  </ul>
  <h3>I made a JSBin boilerplate attempt, it's currently stuck at a undefined FB error.</h3>
  <ul>
  <li><a href="http://emberjs.jsbin.com/fevoyuhiso/2/edit" rel="nofollow noreferrer">http://emberjs.jsbin.com/fevoyuhiso/2/edit</a></li>
  </ul>
  <h3>Partial answer I'm also interested in:</h3>
  <ul>
  <li>Understanding how complex the solution at least must me to achieve a good result (&quot;it must include an initializer, and a view/component!&quot; or &quot;you can solve this by just having ...&quot;)</li>
  </ul>
  <h2>Parts that may be of use</h2>
  <h3>A post about &quot;after FB.init()&quot;</h3>
  <ul>
  <li><a href="https://stackoverflow.com/questions/3548493/how-to-detect-when-facebooks-fb-init-is-complete">How to detect when facebook&#39;s FB.init is complete</a></li>
  </ul>
  <h3>An initializer</h3>
  <pre><code>/* global FB */
  export default {
    name: 'facebook',
  
    initialize: function() {
      var fbAsyncInit = function() {
        FB.init({
          appId      : 123,
          xfbml      : true,
          version    : 'v2.2'
        });
      };
  
      (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 = &quot;//connect.facebook.net/en_US/sdk.js&quot;;
         fjs.parentNode.insertBefore(js, fjs);
       }(document, 'script', 'facebook-jssdk'));
  
      window.fbAsyncInit = fbAsyncInit;
    }
  };
  </code></pre>
  <h3>A component</h3>
  <pre><code>/* 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);
      }
  });
  </code></pre>
  <h3>A script tag</h3>
  <pre><code>&lt;script type=&quot;text/javascript&quot; src=&quot;//connect.facebook.net/en_US/sdk.js#xfbml=1&amp;appId=123&amp;version=v2.2&quot;&gt;&lt;/script&gt;
  </code></pre>
  <h3>The root div facebook asks for</h3>
  <pre><code>&lt;div id=&quot;fb-root&quot;&gt;&lt;/div&gt;
  </code></pre>