Corrupted display when reading balloon button in Jetpack Infinite Scroll

Asked 2 months ago, Updated 2 months ago, 1 views

I built a site with Wordpress, set Infinite Scroll on JetPack, and view the summary of each article on the front page, but when I scroll from the first 7 articles and read the next 7 articles, the SNS balloon button doesn't display well and the display is a little corrupted.

I am still not familiar with JavaScript and PHP, and I do not know how to solve it, so I would appreciate it if you could let me know how to deal with it.

javascript php

2022-09-30 14:04

1 Answers

First of all, the problem is that div.entry-meta is closed because the HTML in the likes button on Facebook is <div/> but there is <div>.

<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>;

Modify to

Also, you can solve the problem of asynchronous social buttons by reading the following Javascript:

    $( document.body).on('post-load', function(){
        FB.XFBML.parse(); // Facebook
        twttr.widgets.load(); // Twitter
        ! function(d, i) {varj=d.createElement("script");;j.src=""; varw=d.getElementById(i); d.body.appendChild(j);}( document, "pocket-btn-js"; // Pocket

    } );
} (jQuery);

Note: Redraw Facebook and Twitter buttons loaded asynchronously -Qiita *Each script was preloaded, so you may need to add action when it is not loaded like a link.
P I try to reload the Pocket as it seems that the loaded one cannot be reused.

2022-09-30 14:04

If you have any answers or tips

© 2022 OneMinuteCode. All rights reserved.