Corrupted display when reading balloon button in Jetpack Infinite Scroll

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.

http://soundrope.com/

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:

(function($){
    $( document.body).on('post-load', function(){
        FB.XFBML.parse(); // Facebook
        twttr.widgets.load(); // Twitter
        gapi.plusone.go();//Google+
        ! function(d, i) {varj=d.createElement("script"); j.id=i;j.src="https://widgets.getpocket.com/v1/j/btn.js?v=1"; 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

Popular Tags

python x 4647

android x 1593

java x 1494

javascript x 1427

c x 927

c++ x 878

ruby-on-rails x 696

php x 692

python3 x 685

html x 656