Webrings

Introduction

The webrin.ng webring system was created in 2022 and by 2025 was serving around 10% of all modern webrings. This system is unusual for modern webrings in that the code is all hosted on their server, very much like the old webring systems.

Problems

I have to admit right away that there are things I do not like about this system, including:

• The basic webring code they provide does not contain any next and previous links, just a random site link. To me, this seems to defeat the point of a webring.


• There doesn't seem to a way to save the webring owners custom widget code to the site. I can understand this as it is sometimes not safe to let people add HTML or other code to your site. This is why I think that webring owners should link to their own webring page so they can provide the code that site owners add to their page.


• There is no full list of webrings created using the system. The home page has a list of the latest rings created, but I would like to see a pge of the webrings that are available to join. This could include the names of the rings, descriptions of them, and how many sites are already members.


• There is little help on the site, such as to create the previous and next links which can easily be done.

I have other niggles about the site, but those seem to be caused by the users themselves:

• People create webrings then do not add any sites to them, not even their own.


• When people create a webring and do add their page, there's no sort of help on it, like who to contact about joining the webring, and so on.


• When people create a webring and do add their page, there's no sort of help on it, like who to contact about joining the webring, and so on.

Creating a Webring

To create a webring using netri.ng first register an account with them. All that is needed is a username, email address and password.

Once that is done then you can create your new webring. All you need to do this is your webring's name, a shortname for webring that is used on webri.ng's system and a description of the webring.

The webring details then appears on webri.ng's home page, which includes the code for the webring which only includes a random site button. Here's the code it gave me for a test webring I made:

	<div style="width: fit-content; border: 2px outset; text-align: center;">
	   <p style="margin: 0; padding: 0.1em; border: 2px inset">This site is a member of brisray's test webring.</p>
	   <div style="margin: 0; padding: 0.1em; border: 2px inset">
	      <a href="https://webri.ng/webring/brisraya/random">Random Site</a>
	   </div>
	</div>

Copying that to my page produces this:

Centre the Code

To centre the code it needs to be put inside a div with the following styling:

	<div style="text-align: center; margin: 20px auto; display: block; width: 340px;">

The code now looks like this:

Previous and Next Links

webri.ng can create the previous and next links, it's just not documented on the site how to do this. How it is done is by creating two new links in the code. For the previous link use:

<a href="https://webri.ng/webring/brisraya/previous?via=https://brisray.com/web/webri-ng.htm">[Prev]</a>

For the next link use:

<a href="https://webri.ng/webring/brisraya/next?via=https://brisray.com/web/webri-ng.htm">[Next]</a>

For each site in the ring the code after the ? must refer to that site so that the correct links can be made. So for https://example.com the links will be:

via=https://example.com

webri.ng seems to want the URL encoded, which simple simply means that characters in a URL are converted into their ASCII codes. For example https://brisray.com/web/webri-ng.htm becomes https%3A%2F%2Fbrisray.com%2Fweb%2Fwebri-ng.htm

Luckily there are any numberof sites that are able to do the conversion, among them are the ones created by Calculator, CodeShack, Dan's Tools, Formatter, MeyerWeb, and URL Encoder.

Once the URL is encoded the output looks exactly the same:

Other Designs

The webring owner does not have to use the code given on the webri.ng page. There does not seem to be a way to change the code that webri.ng displays for users, but webring owners, on their own page, can change the code to whatever they like and simply use webri.ng to provide the previous, next and random links.

If this is done then webri.ng simple provides the links so any sort of widget diplay code can be used, SVG image, image map, table, plain text - anything!

The webring owner could also provide their own CSS file for the webring widger or include it as inline styles. When creating a CSS file it should be remembered that the wisdget code will need to be in it's own names container, otherwise the CSS styles may be applied to something else on the site's page which probably will not be welcomed.

Listing the Sites

The list of sites in a webring on webri.ng can be found on the webring's home page on the site, for example on my test webring page. This page can be parsed to get a list of sites in the webring as well as how many sites there are by creating a paragraph with the id of sitenumber and an UL tag with the id of ringsites and then using the following JavaScript code:

    <script>
       async function fetchRingSites() {
       const siteList = document.querySelector('#ringsites');

       const response = await fetch("https://webri.ng/webring/brisraya/sites");
       let sitesData = await response.json();

       const numsites = sitesData.length
       sitenumber.innerHTML = "There are " + numsites + " sites in this webring";

       const siteItems = sitesData.map((ringsites) => {
       return `<li><a href=${ringsites.url}>${ringsites.name}</a></li>`;
       }).join('');

       siteList.innerHTML = siteItems;
       }
       fetchRingSites();
    </script>
	

Source Code

webri.ng has published their source code for the entire site on GitHub.

Thank You

There are not many sites that document these wering codes but one site that does is the CSS JOY (lol) webring of which I am member. The page has been a great help in crating this one.