Introduction
The Webringu webring system was created in 2024 by Petra (aka PetraPixel) an Austrian student. By 2026, around 6% of all modern webrings were using it. This system is very versatile because what is does is just build the webring previous, next and random site links.
All the webring owner who uses Webringu has to do is maintain the list of sites. The design of the widget that appears on the site pages can be determined by the webring owner or even left to the individual sites in their webring.
As Petra's code simply creates the links, any sort of widget diplay code can be used, SVG image, image map, table, plain text - anything!
Example
For this example I copied Petra's JavaScript file to my site. I renamed it to webringu-brisray.js and it can be found in my JS folder. The code to run it is:
<script src="js/webringu-brisray.js"></script>
I also put the script to create the list of members in this page. That script is:
<script> // List of members. You need to update this by hand.
const members = [
{
url: "https://brisray.com/web/webringu.htm",
title: "Ray's Miscellany",
},
{
url: "https://example.com/",
title: "example.com"
},
{
url: "https://example.net/",
title: "example.net"
},
{
url: "https://example.org/",
title: "example.org"
},
];
</script>
Other dtaa couples can be added to the members code such as blinkie location and so on.
Plain Text
The simplest way to use Webringu and to illustrate how it works, is a plain text script:
<div style="text-align:center;">
<a href="https://brisray.com/web/webringu.htm"><b>Brisray's Test Webring</b></a><br />
<a href="https://brisray.com/web/webringu.htm?action=previous">previous</a>
<a href="https://brisray.com/web/webringu.htm?action=random">random</a>
<a href="https://brisray.com/web/webringu.htm?action=next">next</a>
</div>
Which gives:
What happens is that the code goes to webring home page which runs the JavaScript which produces the links, and then goes to the website site page. You may see the screen flash a little as all of this is done.
As Petra's code simply creates the links, any sort of widget diplay code can be used, SVG image, image map, table, plain text - anything!
Listing the sites
To add things such as the number of sites in the ring and a list of the rings then the webring home page needs two extra containers added to it, one with the id of webringucount and the other with the id of webringulist. This is described on Petra's Webringu page.
As provided by Petra, the webring list can use three fields, or pieces of data, about each site in the ring. These are url, title and if included in the members list constant, description.
There are in this webring.
In the above table I added a new field called NSFW to tell if a site is safe for work or not, other fields could be whethe rthe site contains things like flashing images, plays sounds in the background, display a blinkie and so on.
To do this in the members list add the new field in the format used for the others, for example, nsfw: "yes",
Then, download Petra's webringu.js file and open it in an editor, then
Find the line:
const hasDescription = members[0].description ? true : false;
and add a new one:
const hasNSFW = members[0].nsfw? true : false;
Find the line:
${hasDescription ? `
and add a new one:
${hasNSFW ? `
Find the line:
${hasDescription ? `
and add a new one:
${hasNSFW ? `
Of course, editing Petra's webringu,js file means that you have to host it yourself. That means you may miss out on any improvements Petra may make in the JS file she hosts.