자바 스크립트를 통해 Twitter 공유 버튼을로드 할 수 없습니다.

Question

jQuery를 통해 Twitter 공유 버튼을로드하려는 div가 있습니다. 페이지로드시 스크립트가 실행될 때 작동합니다. 하지만 그 후에 수동으로 스크립트를로드하지 않는 것 같습니다.

원래 버튼 :

<a href="https://twitter.com/share" class="twitter-share-button" data-via="givestreamuk">Tweet</a> 
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script> 

난 그냥 jQuery를 통해 전체 버튼 (링크 플러스 스크립트를)로드 시도했지만 작동하지 않았다, 난 그냥 링크를 얻었다. 대신에 나는이 같은 DOM에 스크립트를 삽입하는 시도했다 :

여기

내 JS는 다음과 같습니다

var twitter = '<a href="https://twitter.com/share" class="twitter-share-button" data-url="http://customer-url" data-via="givestreamuk" data-hashtags="socialgiving">Tweet</a>'; 
jQuery('#twitter_share').html(twitter); 

var jstext = '!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");'; 

var script = document.createElement("script"); 
script.type = "text/javascript"; 
script.text = jstext; 
jQuery('#twitter_share').append(script); 

내 DIV 버튼이 배치됩니다 :

<div id="twitter_share"></div> 

이 작동 할 때 스크립트 페이지로드시 실행되지만 그 후에는 링크 만 div에 표시됩니다.

누구든지이 단추를 수동으로 DIV에로드하고 스크립트를 실행하여 단추가 생성되도록 제안 할 수 있습니까?

Answer 1

프로젝트에 Turbolinks, PJAX 또는 기타 유사한 보석을 사용하고 있습니까? 그렇다면,이 스레드를 참조하십시오

https://github.com/rails/turbolinks/issues/25 

그리고 이러한 솔루션 :

http://www.blackfishweb.com/blog/asynchronously-loading-twitter-google-facebook-and-linkedin-buttons-and-widgets-ajax-bonus 

http://reed.github.com/turbolinks-compatibility/facebook.html 

Answer 2

당신이 dinamically 트위터 스크립트를 수정해야합니다 내용을 삽입하는 경우는, 같은 첫 번째 위젯이 제대로로드됩니다.

새 Twitter 버튼의 경우 ID가 twitter-wjs 인 스크립트 태그가 이미 있고 if(!d.getElementById(id))은 false을 반환합니다.

그냥 새로운 요소를 감지하는 트위터 위젯 개체를 강제하기 위해 그 if에 else 문을 추가 :

<script> 
!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'; 
     js.parentNode.insertBefore(js,fjs); 
    } 
    else 
    { 
     twttr.widgets.load(); 
    } 
}(document, 'script', 'twitter-wjs'); 
</script> 

출처 : 내가이 일을하려는 이유 경우 https://dev.twitter.com/web/javascript/initialization