"Likes" module, issue when loaded twice for the same post

[pixedelic]

Hi, I'm using a jQuery carousel to display posts on my front page. To generate infinite looping it clones some posts and this generates an issue with "Likes" module that, as far as I can see, don't allow the presence both of the original and the cloned post at the same time.

Here is a basic example with the original post and, below, its clone: http://www.pixedelic.com/sandbox/

Don't know if that's a bug, however carousels are quite popular so it would be useful to find a workaround... or maybe I'm only missing something, in this case, well, sorry, and thank you in advance.

Manuel :-)

[jeherve]

Could you provide us with the code you use, so we can take a closer look? Thanks!

[pixedelic]

Hi and thank you... do you mean the code to clone the posts? On the real site I use owl.carousel plugin, but on the example I simply used:

    jQuery(function(){
        var $hentry = jQuery('.hentry'),
            $clone = $hentry.clone();
        $hentry.after($clone);
    });

If I remove the original post after cloning it, in this way:

    jQuery(function(){
        var $hentry = jQuery('.hentry'),
            $clone = $hentry.clone();
        $hentry.after($clone).remove();
    });

everything seems to work fine. Let me know if you need more info, and thank you.

[jeherve]

Thanks. So you're trying to clone specific posts via jQuery to display them in a carousel. Have you thought about making an additional query instead, much like most Carousel plugins and themes do today?

You could also Jetpack's Featured Content module to do that for you:
http://jetpack.me/support/featured-content/

Here are a few themes using Jetpack's Featured Content module:

• http://wordpress.org/themes/superhero
• https://wordpress.org/themes/meta_s2
• http://wordpress.org/themes/untitled

And here is a tutorial:
http://kwight.ca/2013/04/11/putting-posts-on-a-pedestal-with-jetpacks-featured-content/

[pixedelic]

Thanks,

I already use that, for the main slideshow (here is a shot: https://dribbble.com/shots/1693635-WIP-Scroll-drag-and-read?list=users&offset=0), but the sliding post below the main slideshow in the shot, for instance, clones the content of the post to display it in a series of columns with a specific height and in that case the "Like" button creates problem as well. And, however, owl.carousel or bxslider or all the carousels that doesn't stop at the last slide but create an infinite loop, often clone the last or the first slide to make the carousel, well, endless. I've tried different solutions, but it seems that if the post is repeated on the page the "Likes" button doesn't work as expected (also if the post is repeated via PHP).

[jeherve]

We already have some code in place to avoid this issue when a post appears more than once on the page:
https://github.com/Automattic/jetpack/blob/3.1.1/modules/likes.php#L676

Unfortunately that won't apply to posts duplicated with jQuery.

You might want to try to remove the Likes with code in this tutorial, and add them back after .hentry, in a container that is not duplicated.

Let me know how it goes.

[pixedelic]

I guessed a solution wasn't available but I tried, nevertheless :-)

Thank you for your precious time, I think I'll move the Likes by following the tutorial... or simply remove it from the front page, even if that's a shame. Thank you, have a nice day (we may consider the issue closed, do you agree?).

Manuel :-)