title: Why Twitter button does not load if Twitter code is in a separate file
body: <p>I have three different ways to add Twitter code for loading Twitter button that seems almost identical to me, but for some reason only two of them do work.</p>
  
  <p>Here is how I define Twitter button in HTML:</p>
  
  <pre><code>&lt;a href="https://twitter.com/share" class="twitter-share-button" data-size="large" data-count="none"&gt;Tweet&lt;/a&gt;
  </code></pre>
  
  <p>Here is a fist method that works, just embed JavaScript code in the page:</p>
  
  <pre><code>&lt;script&gt;!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');&lt;/script&gt;
  </code></pre>
  
  <p>Here is a second way that works, put this function into a separate file and load this file on page load:</p>
  
  <pre><code>&lt;script&gt;
      $(window).bind("load", function() {
         // js/social.js just contains the same code that 
         // was in &lt;script&gt; tag in previous example
         $.getScript('js/social.js', function() {});
      });
  &lt;/script&gt;
  </code></pre>
  
  <p>But if I just include js/social.js file via  tag it doesn't work:</p>
  
  <pre><code>&lt;!-- js/social.js here has the same content as in the previous example --&gt;
  &lt;script type="text/javascript" src="js/social.js"&gt;&lt;/script&gt;
  </code></pre>
  
  <p>and image does not load.</p>
  
  <p>Could you explain what it the difference between those variations?</p>
  
  <p>I am using Firefox 40.0.3</p>