3

Wordpressでサイトを構築して、JetPackのInfinite Scrollで無限スクロールを設定して、トップページで各記事の概要を表示しているのですが、最初7件からスクロールして次の7件の記事を読み込む際にSNSバルーンボタンがうまく表示されずに若干表示が崩れてしまいます。

http://soundrope.com/

JavaScriptやPHPの知識がまだ疎いもので、解決方法が分からないため、対応を教えていただければ有り難いです。

3
  • ソーシャルボタンの挿入はブラグインですか?それともテーマに直接書き込んでますか?ajax取得分のDOMが大きく崩れているのでよく見てみるとdiv.fb-likeが閉じタグ省略になっていて結果そこでその上のdivまで閉じられているようですが......あと各ボタンの後にインラインで各ボタンのスクリプトが張られていますが完全に無駄です。同じコードを無駄に何度も呼び出している上にajaxで挿入した際は無視されるだけです。wp_footer等に一ヶ所に1回だけ置き、ajaxロード後に追加分を呼び出す(これは各スクリプトがそれ用のメソッドを用意しているはずです)ようにしてください。そのせいもあってかなくてかモバイルからのロードが半端なく重くタップミスを繰り返しました......(ここでこんなこと書くのもアレですが......普段からフォーラムで回答している身としては気になるのです......)
    – hinaloe
    Commented 2015年1月12日 20:33
  • @hinaloe 様 コメントありがとうございます。 ソーシャルバルーンボタンの表示については、テーマに直接書き込んでいます。 とりあえずご指摘いただいた各ソーシャルボタンのスクリプトを一箇所にまとめる修正を対応しました。 div.fb-like‌​の閉じタグが省略されているのは、ajaxでロード後に追加分のソーシャルボタンの要素を取得できていないことが原因ということなんですね。 要素を取得するメソッドを探してるのですが、下記の「JavaScript Events」に書いてある部分がその必要なメソッドになりますでしょうか? jetpack.me/support/infinite-scroll/#js-events
    – moro
    Commented 2015年1月13日 3:42
  • 誤解うむ表現ですみません…div.fb-likeですが、上記コメントを書いた時点で<div .../></div>のようになってい<ul>よりも上のdivが閉じられてしまっていました…(今はまだ見てませんが…) 非同期コードについてはそのイベント内に各ボタンの非同期用メソッドを呼び出す記述をすればokかと思います。後で回答として書き直しますね。
    – hinaloe
    Commented 2015年1月13日 4:08

1 件の回答 1

1

まず表示が崩れている問題ですが、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はロード済みのものを再利用できないようなのでロードし直すようにしています。

5
  • @hinaloe 様 度々、詳細なご指示ありがとうございます! 確かにdivの閉じタグがおかしくなっていましたね。恥ずかしながら見落としておりました。。こちら対応しましたらボックスの崩れは解消できました! ただ、非同期でソーシャルボタンが表示されない問題につきましては、ご指摘いただいたコードをjs/social.jsに追記したものの表示ができませんでした。 参考で教えていただいたQiitaの記事も設定して試してみましたが、ダメでした。。
    – moro
    Commented 2015年1月13日 16:23
  • 手元でコピペしたらこのまま動いてたんですけどね......なんかコンソールにエラー出てませんか?
    – hinaloe
    Commented 2015年1月13日 16:56
  • Pocketが非同期読み込みでは使い物にならない書き方をしてしまっていたのでそこは修正しました。うまくイベントハンドル出来てないのかな…とりあえずQiitaの方は一旦無視して上記コードでやってみてください… mod_pagespeedがめんどくさい…
    – hinaloe
    Commented 2015年1月13日 17:56
  • @hinaloe 様 Infinite ScrollのScriptより上に書いてしまっていたことが原因だったようです。Footerの最下部に移動したことで、無事に表示することができました。 リクエストが多すぎる点などまだまだ課題ばかりですが、ひとつずつ潰していってみます。 本当にありがとうございました!
    – moro
    Commented 2015年1月17日 8:47
  • 1
    @hinaloe 本回答で解決した場合には回答の承認をよろしくお願いします。ja.stackoverflow.com/help/someone-answers
    – tomute
    Commented 2015年2月19日 16:06

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。