Close

September 5, 2016

How to enable Vuukle to work with Infinite Scrolling

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 story. The data-article-id attribute on it is used as the unique ID assigned by your backend to each story.

2. Now include the JavaScript code for rendering Vuukle on the page –

<script src="//vuukle.com/js/vuukle.js" type="text/javascript" />
<script src="//vuukle.com/js/endlessVuukle.js" />
<script>
var API_KEY_VUUKLE = "a4d9ed9b-77e2-48c4-8e1f-181aa80378bf";
var LANGUAGE_VUUKLE = "en";
var CHAR_COUNT_VUUKLE = "1000";
var ARTICLE_TITLE_VUUKLE = "Article Title";
var ARTICLE_TAGS_VUUKLE = "Tag1, Tag2";
var COLOR_VUUKLE = "";
invokeVuukleComments($("#story1"), API_KEY_VUUKLE, ARTICLE_TAGS_VUUKLE, ARTICLE_TITLE_VUUKLE, LANGUAGE_VUUKLE, CHAR_COUNT_VUUKLE, COLOR_VUUKLE, $("#emoteStory1"));
</script>

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.

3. Lastly, to render the Vuukle Emotes and Comment widget on stories loaded by the Infinite Scrolling implementation, add the following JavaScript code into the 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 –

<script type="text/javascript">
ias.on('rendered', function(items) {
var $items = $(items); // Gives an instance of the newly loaded story
invokeVuukleComments($items.find('.story'), API_KEY_VUUKLE, $items.find('.tags').text(), $items.find('h1.title').text(), LANGUAGE_VUUKLE, CHAR_COUNT_VUUKLE, COLOR_VUUKLE, $items.find('.emote'));
})
</script>

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.

Ravi Mittal

Founder & CEO, Vuukle

Latest posts by Ravi Mittal (see all)