2013-10-30 2 views
2

내 페이지에 사회적 아이콘에 이상한 문제가있다. G +가 완벽하게 작동하지만 내 HTML 페이지로드가 완료되면 Twitter 공유 버튼 + FB Like 버튼이로드되지 않습니다.사회적인 아이콘 트위터와 페이스 북이 완전히로드되지 않는다

트위터 :

여기
<a href="https://twitter.com/share" class="twitter-share-button">Tweet</a> 
<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';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script> 

I에서만 볼 수있는 일반 텍스트 (링크로) "트윗"때 페이지 완료로드. 실제 트위터 버튼이 아닙니다.

<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_US/all.js#xfbml=1&appId=......."; 
     fjs.parentNode.insertBefore(js, fjs); 
    }(document, 'script', 'facebook-jssdk'));</script> 

<div class="fb-like" data-href="<%= request.original_url %>" data-width="100" data-colorscheme="light" data-layout="button_count" data-action="like" data-show-faces="false" data-send="false"></div> 

재미있는 점은 다음과 같습니다 :

페이스 북, 여기에 아무것도 표시되지 않습니다 (현재 URL을 표시하기 위해 여기에 몇 가지 레일 코드를 사용하여) 페이지가로드 된 후와 나는 새로 고침 버튼을 쳤을 때 (CMD + R), 아이콘이 완벽하게 나타납니다!

해당 문제를 해결하는 방법을 모릅니다. 문서로드가 완료되었지만 해결되지 않은 경우에만 JS를 사용하여 내용을 표시하려고했습니다.

답변

2

터보 링크 보석으로 인해 문제가 발생했습니다. 여기에이 끝을 따라 해결

: http://reed.github.io/turbolinks-compatibility/twitter.html

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

+0

가 그 해결책은 내 경우에는 작동하지 않았다는 - 완전히 버튼을 끊었다. 가장 좋은 해결책은 fb/twitter 버튼이있는 페이지를 가리키는 모든 링크에 'no-turbolinks'를 넣거나 앱에서 터보 링크를 완전히 제거하는 것입니다. – JosephK

0
<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/fr_FR/all.js#xfbml=1"; 
     fjs.parentNode.insertBefore(js, fjs); 
    }(document, 'script', 'facebook-jssdk')); 
</script> 

<div class="fb-post" 
    data-href="https://www.facebook.com/photo.php?v=10153444775720220" 
    data-width="550"> 
    <div class="fb-xfbml-parse-ignore"> 
     <a href="https://www.facebook.com/photo.php?v=10153444775720220"> 
     Publication</a> de 
     <a href="https://www.facebook.com/tsahalfr"> 
     Tsahal-Armée de Défense d&#039;Israël</a>. 
    </div> 
</div> 
관련 문제