WordPress.org

Ready to get started?Download WordPress

Forums

Jetpack by WordPress.com
Infinite scroll break the loading of some buttons (37 posts)

  1. utnalove
    Member
    Posted 1 year ago #

    Hello, the problem happens in the multi post pages. For example on tags and categories pages.

    For example this one.

    As you can see after the content of every post there are social buttons in a light blue background.

    However if we load other/older posts via infinite scroll, we can see that these buttons do not show anymore.

    Could you please help?
    Thanks

    http://wordpress.org/extend/plugins/jetpack/

  2. Jeremy Herve
    Happiness Engineer
    Plugin Author

    Posted 1 year ago #

    Did you use a plugin to add these social buttons to your posts? If so, you will want to contact the plugin author to let them know about the problem. They can follow the recommendations here to update their plugin to support Infinite Scroll.

    In the meantime, you could switch to the Jetpack Sharing buttons, as they should be properly loaded in Infinite Scroll.

  3. utnalove
    Member
    Posted 1 year ago #

    No, this is normal html code. I had a plugin that used to put this data, but I put my own code manually.

  4. Jeremy Herve
    Happiness Engineer
    Plugin Author

    Posted 1 year ago #

    Could you try to add the buttons once the posts are loaded, by catching the post-load event as explained here:
    http://jetpack.me/support/infinite-scroll/#javascript-events

  5. utnalove
    Member
    Posted 1 year ago #

    Thanks for your quick reply. In the link you gave it's said what needs to be done:

    To make use of this event, simply catch the post-load event when it fires on document.body
    , but it's not explained. There's no example at all.

  6. Jeremy Herve
    Happiness Engineer
    Plugin Author

    Posted 1 year ago #

    You can have a look at how we do it in the jetpack sharing module if you need an example:
    http://plugins.trac.wordpress.org/browser/jetpack/trunk/modules/sharedaddy

  7. utnalove
    Member
    Posted 1 year ago #

    Does it mean that I have to change:

    <script type="text/javascript">
      (function() {
        var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
        po.src = 'https://apis.google.com/js/plusone.js';
        var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
      })();

    to something like

    <script type="text/javascript">
      (function() {
        var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
        po.src = 'https://apis.google.com/js/plusone.js';
        var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
      })();
    
    890	                                jQuery( document.body ).on( 'post-load', function() {
    891	                                        gapi.plusone.go();
    892	                                });
    </script>

    [Please post code & markup between backticks or use the code button. Your posted code may now have been permanently damaged by the forum's parser.]

    not sure, I didn't get it...

  8. Jeremy Herve
    Happiness Engineer
    Plugin Author

    Posted 1 year ago #

    The library will always be available if you add it to wp_footer. The buttons themselves should be added after IS posts are appended, like in the Jetpack sharing buttons:

    http://plugins.trac.wordpress.org/browser/jetpack/trunk/modules/sharedaddy/sharing.js#L51

  9. utnalove
    Member
    Posted 1 year ago #

    Hello, then it looks like that everything is alright. But it's not working.

    Please take a look at the tags.php here: http://pastebin.com/d10YeNBc
    especially the <!-- start social stuff --><!-- end social stuff -->

  10. Jeremy Herve
    Happiness Engineer
    Plugin Author

    Posted 1 year ago #

    You do not seem to be using the post-load event in that example.

    Since you want to insert a Facebook Like button, a Tweet button, and a Google+ button to the bottom of your post, I would suggest that you enable the Jetpack sharing buttons on your site. You can use all three buttons, and you won't have to make any changes to your theme.

  11. utnalove
    Member
    Posted 1 year ago #

    If I enable the jetpack buttons, will they appear in the same way? The same view, css, etc? Is it customizable?

  12. Jeremy Herve
    Happiness Engineer
    Plugin Author

    Posted 1 year ago #

    Yes, you will be able to customize them through CSS. You can also choose to use the official buttons, like on your site today.

  13. utnalove
    Member
    Posted 1 year ago #

    Thank you for your help.
    I am testing the share buttons as you can see from the site.

    I am a little concerned about having those buttons on the homepage - I don't see any options to disable it only from the homepage.

    I am wondering whether the big files from FB, G, pinterest, etc are (eg. big .js) are downloaded once or they are downloaded for every like button?

    Eg. if in 1 page there are 10 posts and 10 like buttons. Will the facebook js files be downloaded only once to make all the like buttons work, or a different file needs to be downloaded for every button?

    Pleasee understand, I'd like to have the site load as fast as possible so I am wondering if having those buttons on the homepage just slows down the site, or slows down it a lot.

    Thanks

  14. Jeremy Herve
    Happiness Engineer
    Plugin Author

    Posted 1 year ago #

    I am a little concerned about having those buttons on the homepage - I don't see any options to disable it only from the homepage.

    You can control where the buttons appear by going to Settings > Sharing in your dashboard.

    I am wondering whether the big files from FB, G, pinterest, etc are (eg. big .js) are downloaded once or they are downloaded for every like button?

    The sharing libraries are only loaded once.

    I noticed that the Pinterest button was not displayed properly though. It seems that your theme or one of your plugins loads an old version of jQuery instead of using the version that comes bundled with WordPress.

    It can create multiple conflicts with WordPress and with other plugins like Jetpack. You can read more about it here:
    http://wordpress.org/support/topic/troubleshooting-wordpress-35-master-list?replies=4#post-3547424

    Try switching to a different theme for a few minutes, and check if that solves the issue; if it does, you'll want to look for the function loading jQuery in your theme's header.php file, or in the functions.php file. Once you find that function, you can remove it and enqueue the proper version of jQuery as explained here:
    http://codex.wordpress.org/Function_Reference/wp_enqueue_script

    If the issue is not related to your theme, please try to disable all your plugins, one at a time, until you find the one that causes the conflict. You can then enqueue jQuery using the method I linked to above.

    You can also contact the theme or plugin author and ask them to solve the issue.

  15. utnalove
    Member
    Posted 1 year ago #

    Hello, I can see my theme is loading this:

    <a href="http://glamourina.pl/wp-content/themes/celebritypress5/js/jquery.min.js">jquery.min.js</a>
    <a href="http://glamourina.pl/wp-content/themes/celebritypress5/js/jquery.aw-showcase.js">jquery.aw-showcase.js</a>

    [Please post code & markup between backticks or use the code button. Your posted code may now have been permanently damaged by the forum's parser.]

    Is one of these the wrong one you talk about?

  16. Jeremy Herve
    Happiness Engineer
    Plugin Author

    Posted 1 year ago #

    jquery.min.js is indeed the one I am talking about.
    http://glamourina.pl/wp-content/themes/celebritypress5/js/jquery.min.js

    As you can see, this file is jQuery 1.4.2, while WordPress uses 1.8.3 at the moment.

  17. utnalove
    Member
    Posted 1 year ago #

    so if I just replace this jquery file with the new one everything should work fine, or it may break something?

  18. Jeremy Herve
    Happiness Engineer
    Plugin Author

    Posted 1 year ago #

    You can follow the recommendations here to find out how to enqueue jQuery properly:
    http://codex.wordpress.org/Function_Reference/wp_enqueue_script

  19. utnalove
    Member
    Posted 1 year ago #

    Not sure if I did well.

    Even if I replace

    <script src="http://glamourina.pl/wp-content/themes/celebritypress5/js/jquery.min.js"></script>

    with

    <?php
    if( !is_admin() ){
    wp_deregister_script('jquery');
    wp_register_script('jquery', ("http://code.jquery.com/jquery-latest.min.js"), false, '');
    wp_enqueue_script('jquery');
    } ?>

    it doesn't resolve the problem with the pinterest button...
    do you see any errors?

    And in addition it breaks the infinite scrolling :(
    So I reverted back to

    <script src="http://glamourina.pl/wp-content/themes/celebritypress5/js/jquery.min.js"></script>

    ================

    I've also tried to change the href link in the header to: <script src="http://code.jquery.com/jquery-latest.min.js"></script> but it also doesn't make it work....

  20. Jeremy Herve
    Happiness Engineer
    Plugin Author

    Posted 1 year ago #

    You can remove all this code, and only use wp_enqueue_script('jquery'); to enqueue the version of jQuery that is currently bundled to your WordPress installation.

  21. utnalove
    Member
    Posted 1 year ago #

    Hmm, it looks like there are two jquerys in my site.

    I have commented this:

    <!--<script src="http://glamourina.pl/wp-content/themes/celebritypress5/js/jquery.min.js"></script>-->

    But as you can see from the site, there is now a newer jquery in the header, that WP adds automatically.:

    <script type='text/javascript' src='http://glamourina.pl/wp-includes/js/jquery/jquery.js?ver=1.7.2'></script>

    and if I check the header.php there is nothing about that. I see only:

    <?php wp_head();?>
    </head>
    <body>

    So few questions:

    1. If I leave the above commented, the old jquery should be disabled?
    2. Is it safe to comment/delete the above and leave the one that WP is adding automatically?
    3. Why WP is adding the new jQuery automatically in the header, and other people have to use the enqueue??
    4. Even if I leave the jQuery v1.7.2 that WP adds automatically, the pinterest button is still broken.

    P.s. I have disabled temporarily the minify, so that the code is better readable.

  22. Jeremy Herve
    Happiness Engineer
    Plugin Author

    Posted 1 year ago #

    But as you can see from the site, there is now a newer jquery in the header, that WP adds automatically.

    That's the version of jQuery that comes bundled with WordPress, so it's perfectly ok to leave it there.

    WordPress will automatically enqueue jQuery if your theme of one of your plugins requires it, and will only enqueue it once. That's the benefit of using wp_enqueue_script.

    Even if I leave the jQuery v1.7.2 that WP adds automatically, the pinterest button is still broken.

    The Pinterest button works on my end:
    http://i.wpne.ws/NlFC

    Could you try to clear your browser cache, and see if that helps?

  23. utnalove
    Member
    Posted 1 year ago #

    My pinterest buttons work at first loading, however the pinterest button that appear in the bottom thanks to infinite scrolling are broken.

    I am trying with Chrome incognito mode, FF, different computers, etc. So it looks like it's not a cache issue :(

  24. Jeremy Herve
    Happiness Engineer
    Plugin Author

    Posted 1 year ago #

    I noticed another Javascript error on your site. Could you locate this line:

    <script src="http://glamourina.pl/wp-content/themes/celebritypress5/js/jquery.aw-showcase.js"></script>

    it's currently loaded before the wp_head call, thus before jQuery. Could you place it after the wp_head function?

    If you still experience issues with the Pinterest button, could you update to the latest version of WordPress?

  25. utnalove
    Member
    Posted 1 year ago #

    Still the same, I'll try to upgrade WP and let you know.

  26. utnalove
    Member
    Posted 1 year ago #

    Hi, I have done the following:

    -updated WP to 3.5.1
    -checked if the pinterest button works - it does not
    -I have disabled ALL the plugins but jetpack
    -I can see that the pinterest button is still broken
    -I have tried in other browsers, using incognito and invisible mode, deleting cache and cookies, but still the same
    -re-enabled all the other plugins

    what can we do now to repair the pinterest button?

  27. Jeremy Herve
    Happiness Engineer
    Plugin Author

    Posted 1 year ago #

    Could you try to switch to a different theme like Twenty Twelve for a few minutes, to make sure the problem is not linked to your theme?

    Thanks!

  28. utnalove
    Member
    Posted 1 year ago #

    If I switch the theme will all my widgets come back to their places when I will switch back, or they may be lost?

    Thanks

  29. Jeremy Herve
    Happiness Engineer
    Plugin Author

    Posted 1 year ago #

    They won't be lost, but you might have to drag them back from the "Inactive Widgets" area (at the bottom of the Widgets page) to your sidebar.

  30. utnalove
    Member
    Posted 1 year ago #

    Hi, I did it. Unfortunately with twenty twelve there is the same problem.

    Please take a look here:
    http://img854.imageshack.us/img854/1516/2012pt.png

Topic Closed

This topic has been closed to new replies.

About this Plugin

About this Topic

Tags