Wordpressでサイトを構築して、JetPackのInfinite Scrollで無限スクロールを設定して、トップページで各記事の概要を表示しているのですが、最初7件からスクロールして次の7件の記事を読み込む際にSNSバルーンボタンがうまく表示されずに若干表示が崩れてしまいます。
JavaScriptやPHPの知識がまだ疎いもので、解決方法が分からないため、対応を教えていただければ有り難いです。
Wordpressでサイトを構築して、JetPackのInfinite Scrollで無限スクロールを設定して、トップページで各記事の概要を表示しているのですが、最初7件からスクロールして次の7件の記事を読み込む際にSNSバルーンボタンがうまく表示されずに若干表示が崩れてしまいます。
JavaScriptやPHPの知識がまだ疎いもので、解決方法が分からないため、対応を教えていただければ有り難いです。
まず表示が崩れている問題ですが、Facebookのいいねボタンの部分のHTMLが<div />
になっているのにその後で</div>
があるためそれによりdiv.entry-meta
が閉じられてしまっているようです。
<div class="fb-like" data-href="(url)" data-layout="box_count" data-action="like" data-show-faces="false" data-share="false"/></div>
を
<div class="fb-like" data-href="(url)" data-layout="box_count" data-action="like" data-show-faces="false" data-share="false"></div>
に修正してください。
また非同期でソーシャルボタンが表示されない問題は、次のJavascriptを読み込んでおくことで解決できます。
( function( $ ) {
$( document.body ).on( 'post-load', function () {
FB.XFBML.parse();//Facebook
twttr.widgets.load(); //Twitter
gapi.plusone.go(); //Google+
!function(d,i){var j=d.createElement("script");j.id=i;j.src="https://widgets.getpocket.com/v1/j/btn.js?v=1";var w=d.getElementById(i);d.body.appendChild(j);}(document,"pocket-btn-js"); //Pocket
} );
} )( jQuery );
参考: 非同期で読み込んだFacebook, Twitterボタンを再描画する - Qiita ※各スクリプトが事前に読み込まれている前提で書いたので本当はリンク先のように読み込まれていなかった際の処理を追加するべきかもしれません。
※Pocketはロード済みのものを再利用できないようなのでロードし直すようにしています。
<div .../></div>
のようになってい<ul>よりも上のdivが閉じられてしまっていました…(今はまだ見てませんが…) 非同期コードについてはそのイベント内に各ボタンの非同期用メソッドを呼び出す記述をすればokかと思います。後で回答として書き直しますね。