Loading Widgets On Other Pages

Almost all of our widgets support a data-path or data-url attribute which points to the canonical URL for that widget's page. Specifying the data-path or data-url attribute on a widget will cause the widget to load the data for the specified page.

The following widgets support both infinite scroll and data-path or data-url:

We strongly recommend against using data-path or data-url to implement infinite scroll! Instead, review the method described on the [Infinite Scroll Documentation Page](doc:continuous-scroll-setup. We recommend only using the data-path or data-url method if you need to render widgets for different pages on a non infinite scrolling page, for example, if you would like to load the comment counts for a different page.

If the data-path or data-url attribute is given on an infinite scroll page, it will override the new page being loaded and display the page specified by the attribute.

If there are multiple canonical urls for a widget, then container IDs should also be added. However, we generally encourage the use of a single canonical url for all widgets rather than employing the container ID system. Please refer to the Viafoura Container ID documentation for details.

Example:
To show the number of comments on the /news.html page

<div class="viafoura">
     <span class="vf-counter vf-widget" data-widget="counter" data-path="/news.html"></span>
</div>