title: twitter widget only working in the first loading , then fails
body: <p>I have a web application which is developed using the Play Framework.
  There I have used Ajax to load most of the view html pages to a div called 'container' .</p>
  
  <pre><code>$( "#container" ).load("/contactUs"); // contactUs is the page which contains the widget
  </code></pre>
  
  <p>I have this html page which includes the widget for my twitter feed. </p>
  
  <pre><code>&lt;div id= "twitter_div"&gt;
                  &lt;a class="twitter-timeline" href="https://twitter.com//XXXX" data-widget-id="XXXXXX"&gt;Tweets by @@XXXX&lt;/a&gt;
              &lt;/div&gt;
  </code></pre>
  
  <p>When I click that page to load to the container it will load and the twitter feed will display correctly. 
  then HTML would be</p>
  
  <pre><code>&lt;iframe id="twitter-widget-0" scrolling="no" frameborder="0" allowtransparency="true" class="twitter-timeline twitter-timeline-rendered" allowfullscreen="" style="border: none; max-width: 100%; min-width: 180px; width: 331px;" title="Twitter Timeline" height="380"&gt;&lt;/iframe&gt;
  </code></pre>
  
  <p>But after I load another html page to that same container div and then again if I load the twitter page to the same div it wont render properly.
  ex : </p>
  
  <p>first call <code>$( "#container" ).load("/contactUs"); // working properly</code> </p>
  
  <p>then call <code>$( "#container" ).load("/home");</code></p>
  
  <p>and then again <code>$( "#container" ).load("/contactUs"); // not working properly</code></p>
  
  <p>It still shows </p>
  
  <pre><code> &lt;div id= "twitter_div"&gt;
                  &lt;a class="twitter-timeline" href="https://twitter.com//XXXX" data-widget-id="XXXXXX"&gt;Tweets by @@XXXX&lt;/a&gt;
              &lt;/div&gt;
  </code></pre>
  
  <p>Not the coverted <code>a</code> tag to an <code>Iframe</code>.</p>
  
  <p>Why is this happening ?</p>
  
  <p><strong>EDIT</strong></p>
  
  <p>My contactUS page is like below</p>
  
  <pre><code>   &lt;script&gt; $(document).ready(function() { 
             !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;
     &lt;div id= "twitter_div"&gt;
              &lt;a class="twitter-timeline" href="https://twitter.com//XXXX" data-widget-id="XXXXXX"&gt;Tweets by @@XXXX&lt;/a&gt;
     &lt;/div&gt;   
  </code></pre>
  
  <p><strong>EDIT 2</strong></p>
  
  <p>I solved this issue using Mouser's solution</p>
  
  <p>So now my main page is more like below.</p>
  
  <pre><code>&lt;html&gt;  
  &lt;head&gt;
      &lt;script&gt;
          window.twttr = (function (d,s,id) {
              var t, js, fjs = d.getElementsByTagName(s)[0];
              if (d.getElementById(id)) return; js=d.createElement(s); js.id=id;
              js.src="https://platform.twitter.com/widgets.js"; fjs.parentNode.insertBefore(js, fjs);
              return window.twttr || (t = { _e: [], ready: function(f){ t._e.push(f) } });
              }(document, "script", "twitter-wjs"));
      &lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;div id = "container" &gt;&lt;/div&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p> </p>
  
  <p>and my contactUS page is like,</p>
  
  <pre><code> &lt;script&gt; $(document).ready(function() { 
        twttr.widgets.load();  
   });
   &lt;/script&gt;
   &lt;div id= "twitter_div"&gt;
          &lt;a class="twitter-timeline" href="https://twitter.com//XXXX" data-widget-id="XXXXXX"&gt;Tweets by @@XXXX&lt;/a&gt;
   &lt;/div&gt;   
  </code></pre>