By default, each page URL is treated as a separate page with separate comments, even if two different URLs show the same content. However, you can control how HashOver treats the page URL by using either or both of the methods below.
By default, HashOver will use a canonical URL when one is present. You
can add one by placing a
Canonical Link Element
in the <head>
element of your website, if you do this properly
HashOver will show the same comments for URLs that show the same content.
Here is an example of a Canonical Link Element...
A canonical URL is designed to be the same for all URLs that show the same content, normally this is done by removing unimportant queries from the normal URL before using it as the canonical URL. This is done on the server-side, by using PHP for example, so by the time HashOver sees the page the URL in the Canonical Link Element should have already been processed.
You can make HashOver ignore unwanted URL queries by either adding them
on the admin "URL Filtering" page, or by adding them to the
/hashover/config/ignored-queries.json
file. Adding a query
name without a value will cause that query to be ignored no matter what
its value is. Adding a query name with a value (ie. name=value) will
cause only that specific query with that specific value to be ignored.
Ignoring specific URL queries allows URLs that are otherwise the same to
get treated as the same page by HashOver. For example, a website that has
content in multiple languages might have a URL query named "lang" that
decides what language to use. By default, HashOver will treat URLs like
https://example.com/page.html?lang=en
and
https://example.com/page.html?lang=jp
as separate pages, but if
you add the "lang" query to the ignored-queries.json
file these
URLs will be treated as being the same page and display the same comments.
Assuming everything is setup properly, HashOver should "just work", it will automatically detect what page it is on and show comments for that page, it will automatically add the theme CSS to the page, among other things.
However, this automatic setup is not useful for every situation, such as displaying multiple comment forms on a single page, displaying comments from a different page, or adjusting the language based on what language is set on your website.
To do these things you need to use the loader script instead...
This script allows you to pass various information to HashOver before it appears on page. It allows you to specify where to display the comments, what page or thread to show comments for, and it even lets you override a limited number of settings.
Unlike the comments.php
script, the loader script does not
display comments until you instantiate an instance. This allows you to
dynamically load comments when an element is clicked or a certain element
is scrolled into view for example, it also allows you to display the comments
for a specific page when that page is loaded dynamically via JavaScript.
You may instantiate an instance manually like this...
You may tell HashOver to place the comments in a specific element like this...
You may load comments from a different page by passing the URL and title in the second parameter...
You may override various settings by passing them as an object in the second parameter...
This example sets the interface language to German, sets the primary
comment form position to below the posted comments, and disables the
website field. The settings
object's key names can be
hyphenated or camelCase. Some settings cannot be adjusted from the
frontend like this for security reasons, see the
Settings
page for more information about each setting.
id
hashover
and is automatically suffixed with a dash and the
instance number for every instance except the first. This parameter
expects a string
value.
options
An object containing the following information.
Name | Type | Description |
---|---|---|
title
|
string
|
A page title. This title appears before the primary comment form. If omitted, the title of the page HashOver is being used on will be automatically detected and used instead. This title is collected as metadata for use in the various APIs that don't have direct access to the page they are showing comments for. Here's an example...
<script type="text/javascript">
var hashover = new HashOver ('hashover', { title: 'Super Cool Article Title' }); </script> |
url
|
string
|
A page URL. This URL is used to differentiate the comments on each page from each other. This option allows you to display comments from a different page by passing in a different URL. If omitted, the URL of the page HashOver is being used on will be automatically detected and used instead. This URL is collected as metadata for use in the various APIs that don't have direct access to the page they are showing comments for. Here's an example...
<script type="text/javascript">
var hashover = new HashOver ('hashover', { url: 'https://example.com/super/cool/article.html' }); </script> |
thread
|
string
|
The internal name of a comment thread. This option decides the
name of the thread's directory under Here's an example...
<script type="text/javascript">
var hashover = new HashOver ('hashover', { thread: 'super-cool-article' }); </script> |
website
|
string
|
A website domain name. This is used to differentiate between
comment threads that may have the same name but are on
different websites. This option decides the name of the
website's directory under This option is only used when support for multiple websites is enabled. If omitted, the domain name will be automatically extracted from the client's request to your server. Here's an example...
<script type="text/javascript">
var hashover = new HashOver ('hashover', { website: 'example.com' }); </script> |
canonical
|
boolean
|
Whether to pull the page URL from a
Canonical Link Element
in the Here's an example...
<script type="text/javascript">
var hashover = new HashOver ('hashover', { canonical: false }); </script> |
settings
|
object
|
An object of settings to override. The key names can be
hyphenated or camelCase. Not all settings are supported. For
a complete list of all available settings see the
Settings
page for more information. If omitted, the default settings
or those set in the Here's an example...
<script type="text/javascript">
var hashover = new HashOver ('hashover', { settings: { language: 'de_DE', formPosition: 'bottom', websiteField: 'off' } }); </script> This example sets the interface language to German, sets the primary comment form position to below the posted comments, and disables the website field. |
instance
1
and
automatically increases each time a new HashOver instance is
instantiated. This parameter expects a number
value.