

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

<http://soundrope.com/>

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


CC BY-SA 3.0
2015-01-12T16:00:42.103
4455
2016-09-26T10:54:40.830
2015-01-12T22:54:32.827
724
4761
question
javascript php
JetpackのInfinite Scrollでのバルーンボタン読み込み時に表示崩れが発生する


まず表示が崩れている問題ですが、Facebookのいいねボタンの部分のHTMLが`<div
/>`になっているのにその後で`</div>`があるためそれにより`div.entry-meta`が閉じられてしまっているようです。

[code]

        <div class="fb-like" data-href="(url)" data-layout="box_count" data-action="like" data-show-faces="false" data-share="false"/></div>
    
[/code]

を

[code]

        <div class="fb-like" data-href="(url)" data-layout="box_count" data-action="like" data-show-faces="false" data-share="false"></div>
    
[/code]

に修正してください。

また非同期でソーシャルボタンが表示されない問題は、次のJavascriptを読み込んでおくことで解決できます。

[code]

     ( 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 );
    
[/code]

* * *

参考: [非同期で読み込んだFacebook, Twitterボタンを再描画する -
Qiita](http://qiita.com/kzhrk/items/5bc39df48dc1ab8ea850)
※各スクリプトが事前に読み込まれている前提で書いたので本当はリンク先のように読み込まれていなかった際の処理を追加するべきかもしれません。  
※Pocketはロード済みのものを再利用できないようなのでロードし直すようにしています。


CC BY-SA 3.0
2015-01-13T06:48:00.583
4484
2015-01-13T17:59:29.373
2015-01-13T17:59:29.373
2376
2376
4455
answer