Social Media Subscribe/Follow/Like Links Not Working For dynamically added content

Question

On Adding the dynamic content with the HTML to subscribe/follow/like the youtube channel, twitter account, facebook page,

The code for subscribe is working only for the initial static loaded content, not for the dynamic loaded content, (in the code pen I simulated the dynamic content using the timeout ).

static content is present in the page load itself, which is working correctly i.e, the code for subscribe to social media page is executed for the first time only not for the dynamic content.

CodePen : http://codepen.io/shmdhussain/pen/YWBBZw

Could any one help me on this or If you face same situation, suggest

jQuery(function($){
  
  setTimeout(function(){
    var htmlcontent1 = '<div class="g-ytsubscribe" data-channel="GoogleDevelopers" data-layout="default" data-count="default"></div>';
    var htmlcontent2 = '<a class="twitter-follow-button"   href="https://twitter.com/TwitterDev" data-show-screen-name="false" data-lang="ar"> Follow @TwitterDev</a>';
    
      var htmlcontent3 = '<div class="fb-like" data-href="https://www.facebook.com/NASA" data-width="104" data-layout="button_count" data-action="like" data-size="small" data-show-faces="true" data-share="false"></div>';
    $(".dynadiv1").html(htmlcontent1);
    $(".dynadiv2").html(htmlcontent2);
    $(".dynadiv3").html(htmlcontent3);
  }, 9000);
})

<script src="https://apis.google.com/js/platform.js"></script>
<script>window.twttr = (function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0],
    t = window.twttr || {};
  if (d.getElementById(id)) return t;
  js = d.createElement(s);
  js.id = id;
  js.src = "https://platform.twitter.com/widgets.js";
  fjs.parentNode.insertBefore(js, fjs);
 
  t._e = [];
  t.ready = function(f) {
    t._e.push(f);
  };
 
  return t;
}(document, "script", "twitter-wjs"));</script>



<div id="fb-root"></div>
<script>(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_GB/sdk.js#xfbml=1&version=v2.7";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>


<h1>static Content</h1>
<div class="staticdiv1 youtube">
<div class="g-ytsubscribe" data-channel="GoogleDevelopers" data-layout="default" data-count="default"></div>

</div>
<br />
<br />
<div class="staticdiv2 twitter">
  <a class="twitter-follow-button"   href="https://twitter.com/TwitterDev" data-show-screen-name="false" data-lang="ar"> Follow @TwitterDev</a>
</div>
<div class="staticdiv3 fb">
  <div class="fb-like" data-href="https://www.facebook.com/NASA" data-width="104" data-layout="button_count" data-action="like" data-size="small" data-show-faces="true" data-share="false"></div>
</div>
<h1>Dynamic Content</h1>
<div class="dynadiv1 youtube">

</div>
<br />
<br />
<div class="dynadiv2 twitter">

</div>
<br />
<br />
<div class="dynadiv3 fb">

</div>

me the solution.

Answer 1

You need to use FB.XFBML.parse to tell Facebook that there is new content. https://developers.facebook.com/docs/reference/javascript/FB.XFBML.parse/