Infinite-scroll and AddToAny?

  • Resolved Runo

    (@runo)


    10 years, 4 months ago

    Is there a way to use AddToAny with the Infinite-scroll plugin?

    I’ve installed it, but the posts that get loaded onto the page only show empty share anchor tags without icons.

    I’ll get the twitter share for example:

    Instead of
    <a class="a2a_button_twitter" href="/" title="Twitter" rel="nofollow" target="_blank"><span class="a2a_svg a2a_s__default a2a_s_twitter"></span></a>

    I get:

    <a class="a2a_button_twitter" href="https://www.addtoany.com/add_to/twitter?linkurl=My_post_url" title="Twitter" rel="nofollow" target="_blank"></a>

    and it doesn’t show any icons.

    Is there a way to execute the script that fills the anchor tags after each page gets pulled from the database?

    I’d post an url, but the website is in my localhost.

    https://www.ads-software.com/plugins/add-to-any/

Viewing 4 replies - 1 through 4 (of 4 total)

  • Any solution for this problem yet?

    Plugin Author micropat

    (@micropat)

    AddToAny works with infinite scrolling methods that fire the <body> element’s post-load event.

    JetPack’s Infinite Scroll module set the standard, but the “Infinite-Scroll” plugin hasn’t been updated for a couple years. If possible, someone might write a hook you can add to your functions.php to make the Infinite-Scroll plugin fire the post-load event.

    To properly support AddToAny and other site components, infinite scroll scripts should fire the post-load event when a new post is added to the page.

    Hi,

    I am having the same problem as Runo with this page https://pensamientos.cc/frases/, the first posts are fine but as soon as you infinite scroll loads the 2nd set of posts we lose the sharing icons as Runo described with the twitter share example.

    Now following the advice of Micropat, I went ahead and implemented a post-load event as follow but the result still the same:

    ( function( $ ) {
    $( document.body ).on( ‘post-load’, function () {
    // New posts have been added to the page.
    // A custom “onReady” function for AddToAny
    function my_addtoany_onready() {
    a2a_config.target = ‘.share-this’;
    a2a.init(‘page’);
    }

    // Setup AddToAny “onReady” callback
    var a2a_config = a2a_config || {};
    a2a_config.tracking_callback = {ready: my_addtoany_onready};
    // Additional a2a_config properties may go here

    // Load AddToAny script asynchronously
    (function(){
    var a = document.createElement(‘script’);
    a.type = ‘text/javascript’;
    a.async = true;
    a.src = ‘//static.addtoany.com/menu/page.js’;
    var s = document.getElementsByTagName(‘script’)[0];
    s.parentNode.insertBefore(a, s);
    })();
    });
    })( jQuery );

    Hopefully you can point me in the right direction.

    Thank you.

    Plugin Author micropat

    (@micropat)

    @mseye1 AddToAny already implements all that.

    What you want is a trigger that fires a custom event called on-load after the Infinite-Scroll plugin has loaded content:

    jQuery('body').trigger( 'post-load');

    However, I see the Infinite-Scroll plugin uses the jQuery load() method with a selector expression, which means inline JavaScript is stripped out, and that includes the AddToAny script blocks that associate share buttons with posts.

    The Infinite-Scroll plugin could be rewritten to use another jQuery method that doesn’t filter out JavaScript.

    AddToAny might work around such problematic loading methods in a future release. In the meantime, an alternative or update to the Infinite-Scroll plugin is a good idea.

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Infinite-scroll and AddToAny?’ is closed to new replies.