Infinite Scrolling provides a seamless experience by automatically loading in new content as the user scroll down the page. Research findings consider it to be a superior implementation in comparison to pagination because it allows the user to view much more content smoothly and without the need for unnecessary and redundant interactions in form of loading in new content. Vuukle provides a solution for integrating with your Infinite Scrolling implementation so that it is possible to load multiple instances of Vuukle comments and Emotes widget on a single page.
How to integrate Vuukle with your Infinite Scrolling implementation
The following steps would help you integrating Vuukle with your Infinite Scrolling implementation –
1. Add the following code in each of your stories. This is used for rendering the Vuukle Comments and Emotes widgets. Make sure to add unique identifiers across stories (in the form of
id attribute) to the Emotes and comment section.
<div class='tags'>Tag1, Tag2</div> <div class="emote" id="emoteStory1"></div> <div class="story" id="story1" data-article-id="article_id_1"></div>
Note: The Vuukle comments are rendered by the div tag with class
data-article-id attribute on it is used as the unique ID assigned by your backend to each story.
Note: Replace the dummy values in the options with your backend specific tags so that they are automatically substituted by actual values on each page. Also, make sure that the CSS selector in the
invokeVuukleComments function match with the
id attributes in the previous steps code.
render complete callback (This callback will be fired after the HTML content of the new story has been rendered by the browser) provided by your implementation.
invokeVuukleComments($('.Selector-For-Vuukle-Comment-Section-Of-Newly-Loaded-Story'), API_KEY_VUUKLE, $('.Selector-For-Tags-Of-Newly-Loaded-Story'), $('.Selector-For-Article-Title-Of-Newly-Loaded-Story'), LANGUAGE_VUUKLE, CHAR_COUNT_VUUKLE, COLOR_VUUKLE, $('.Selector-For-Vuukle-Emotes-Section-Of-Newly-Loaded-Story'));
To provide a more concrete example, if your website uses the jQuery’s Infinite AJAX Scroll plugin, then the code would look like –
Note: You will notice that the selectors being used for targeting the elements to be used for rendering Vuukle are the
class attribute as seen in Step 1
You can check the working demo of the above code to better understand it.