Wordpress의 무한 스크롤과 함께 작동하지 않는 소셜 아이콘

Wordpress의 무한 스크롤과 함께 작동하지 않는 소셜 아이콘

우리는 고객을 위한 웹사이트를 만들고 있습니다.여기서 찾을 수 있습니다.http://ethercreative.net/studio_social/ 이것은 매우 간단한 워드프레스 주제이지만 무한 스크롤 플러그인과 소셜 아이콘 사이의 충돌로 인해 복잡성이 발생하고 있습니다.

각 게시물은 끝에 G+, FB, Twitter 소셜 아이콘이 있는 블록을 표시하도록 되어 있습니다.시작 시 최대 4개의 게시물을 표시한 후 스크롤하면 다음 세트를 로드합니다.

이 모든 것들은 작동하지만, 함께 작동하지는 않습니다.

무한 스크롤이 다음 게시물 블록을 로드하면 페이스북 좋아요 버튼만 표시되며 다른 두 개의 소셜 아이콘은 표시되지 않습니다.

하지만 이상한 점은 코드 블록을 남겨둔다는 것입니다.

<span class="icons">
                    <g:plusone size="medium" href="http://ethercreative.net/studio_social/?p=1"></g:plusone>                <iframe src="http://www.facebook.com/plugins/like.php?href=http%3A%2F%2Fethercreative.net%2Fstudio_social%2F%3Fp%3D1&amp;locale=&amp;layout=button_count&amp;action=like&amp;width=92&amp;height=20&amp;colorscheme=light" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:92px; height:20px;" allowtransparency="true"></iframe>&nbsp;&nbsp;&nbsp;
                    <a href="http://twitter.com/share" class="twitter-share-button" data-url="http://ethercreative.net/studio_social/?p=1" data-count="horizontal" data-text="Hello world!" data-via="twitter_username"></a></span>
</div>

문제가 무엇이고 왜 발생하는지는 알지만 자바스크립트를 잘 못해서 어떤 전화를 해야 할지 모르겠어요.

Wordpress 3.3.1을 무한 스크롤 플러그인(http://wordpress.org/extend/plugins/infinite-scroll/)과 소셜 아이콘용 digg digg(http://wordpress.org/extend/plugins/digg-digg/))과 함께 사용하고 있습니다.

무한 스크롤 플러그인은 새 게시물 집합을 가져온 후 실행할 onLoad 이벤트를 추가할 수 있습니다.그래서 여기에 무엇을 추가해야 할까요?

잘 부탁드립니다!좋은 하루 되세요.

---

업데이트: 조사를 좀 더 한 후 트위터도 수정했습니다.이제 Google Plus만 수정하면 됩니다.twitter에 필요한 코드는 다음과 같습니다.

!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");

다시 업데이트:Google Plus 코드도 찾았습니다.

(function() { var po = document.createElement('script'), po.type = 'text/excript', po.src = 'https://apis.google.com/js/plusone.js'; var s = document.getElementsByTagName(')'[0]; s.parentNode.Insertefore(po, s); }; ('스크립트); ); (') ;

내가 뭘 배웠지?스택 오버플로우를 묻기 전에 더 많은 구글링을 수행합니다.적어도 이것은 미래에 이 문제를 가진 사람들을 위한 해답이다.

제시하신 솔루션은 기본적으로 스크립트를 새로고침하는 것입니다.이것은 매우 비효율적입니다.이는 첫 번째 소셜 버튼 세트의 페이지 로드에 스크립트를 로드하기 때문입니다.3개의 서비스 모두 문서의 섹션 또는 전체를 해석하여 새로운 소셜 위젯을 렌더링하는 방법이 있습니다.원하는 코드는 다음과 같습니다.

var el = document.body; 

//Google Plus   
if (typeof gapi !== "undefined") { gapi.plusone.go(el); }

//Facebook
if (typeof FB !== "undefined") { FB.XFBML.parse(el); }

//Twitter
if (typeof twttr !== "undefined") { twttr.widgets.load(); }

위의 경우 el은 위젯을 보관하는 컨테이너이거나 문서화할 수 있습니다.body(모든 위젯을 재연결합니다)현재 Twitter와의 콘텍스트를 좁힐 수 있을지 모르겠지만, 그들은 그것을 추가할 것이라고 생각합니다.

Local PCGuy에서 알 수 있듯이 이를 달성하기 위해 필요한 것보다 훨씬 많은 작업을 수행해야 합니다.이상적으로는 비동기 로드 콜백의 일부가 이러한 버튼을 필요한 요소에만 삽입하는 작업을 수행합니다.또, 가능한 경우는, 그것들을 서버 측에 추가해, 클라이언트가 페이지를 준비하기 위해서 작업을 실시할 필요가 없게 하는 것이 좋습니다.적어도 솔루션을 사용하면 스크립트 파일이 캐시되므로 로드 시간이 단축됩니다.문제는 여전히 페이지를 필요 이상으로 힘들게 만들고 있다는 것입니다.페이지가 무한 스크롤되고 점점 커짐에 따라, 이 추가 작업은 점점 더 중요해질 것입니다.

이상적인 흐름은 다음과 같습니다.

1. 첫 페이지 로드
2. 필요한 JS를 실행합니다.이 단계에서는 특정 DOM 노드에 소셜 위젯을 포함하는 기능이 있는지 확인합니다.
3. 페이지 무한 스크롤, 트리거 및 비동기 요청 허용
4. 비동기 로드 시 비동기 로드 콜백이 응답을 해석한 후 DOM을 통해 각 엔트리를 위젯 만들기 함수에 전달하는 작업을 반복합니다.

그러면 원하는 효과를 얻기 위해 최소한의 작업만 수행할 수 있습니다.

JS 파일에 코드 추가...

addthis.toolbox('.addthis_toolbox');
addthis.counter('.addthis_counter');

완벽하게 작동한다.

언급URL : https://stackoverflow.com/questions/10212686/social-icons-not-working-with-infinite-scrolling-on-wordpress