Webringu

Webringu is a super simple, easy-to-use and customizable webring script so you can create your own webring today! I also use it for my own webring, the Code Collective. Webringu was inspired by other webring scripts such as OnionRing and june's webstring. The name 'Webringu' is inspired by the movie Ringu (1998) (which is the Japanese original of 'The Ring').

What it does (and doesn't)

• Webringu is super easy to use. It doesn't require any JavaScript knowledge beyond editing a simple members array.
• Webringu will work for free Neocities accounts (for both you and your members).
• Webringu doesn't require your webring's members to include a bloaty script or CSS file which would slow down their site. Just simple links.
• Webringu gives you (and your members!) complete freedom for how the webring widget looks.
• Webringu provides you with next, previous and random links to use in your widgets.
• You can edit Webringu's code to your liking if you know what you're doing.

But... Webringu doesn't update your members list automatically. You have to do that manually in the code. However, it can then automatically output the members list on your page. This way, you only have to keep one member list up-to-date (the one in the code).

Webringu vs Onionring:

Onionring is not a bad script. In fact, it partially inspired Webringu. I just created Webringu because I wasn't entirely happy with Onionring; I wanted to create something that fit me better. Which script is 'better' depends on your taste and use case.

How To Use

Your Code

First, create a page for your webring which will have all its information, rules, members list, etc. It does not matter whether this is a whole website on its own or just a singular page on your own website.

On that page, use this code:

<script>
  // List of members. You need to update this by hand. 
  const members = [
    {
      url: "https://example0.com/",
      title: "Example Website"
    },
    {
      url: "https://example1.com/",
      title: "Example Website"
    },
  ];
</script>
<script src="https://petrapixel.neocities.org/assets/js/webringu.js?nocache=1"></script>

You need to keep the members array updated, e.g. when a new member joins, when someone leaves, when someone's URL changes, etc. I suggest using Google Forms or a similar tool for member applications.

Make sure to use full urls in this list (e.g. https://example1.com/), not something like example1.com!

If you have a free Neocities account: You won't be able to use an external script (last line of the code above). Instead, download it, name it webringu.js, upload it to your website and use it like so (this replaces the last line of the code above):

<script src="/your-path-to-the-file-here/webringu.js"></script>

The rest of Webringu will work like normal, but you won't get automatic bugfixes that I make. So if you notice anything not working you can try coming back to this page and re-downloading the file to get any changes.

Member's Code

Now you can give the members of your webring a code that looks something like this:

This is the code for the widget, assuming your webring page is https://your-webring-page.neocities.org/webring:

<div>
    <a href="https://your-webring-page.neocities.org/webring"><b>Your Webring Name</b></a><br />
    <a href="https://your-webring-page.neocities.org/webring?action=previous">previous</a>
    <a href="https://your-webring-page.neocities.org/webring?action=random">random</a>
    <a href="https://your-webring-page.neocities.org/webring?action=next">next</a>
</div>

Obviously, add your real webring page URL and name (or image) in there. You can use arrows for the next/previous links (e.g. ⤻ ⤺ → ← » « ⇨ ⇦). You can remove the random link if you don't need it, and you can style the widgets however you want. I recommend simple styling that is achievable with inline CSS only; This way, your members don't have to add a CSS file to their site just to display the widget. But really, you're free to do whatever you want here as long as the URLs are correct.

Optional: Members List

If you want an automatic table of your members outputted on your webring page, just add this element:

<div id="webringulist"></div>
<noscript>Please enable JavaScript to view the member list.</noscript>

In this element, a table with all members will be rendered. It will look something like this:

Member	Website	Description
Example0	example0.com	Example Description
Example1	example1.com	Example Description
Example2	example2.com	Example Description

You can style this table however you want.

The description and website buttons will only be displayed if you defined them in the members list like so:

{
  url: "https://example1.com/",
  title: "Example1",
  description: "Example Description",
  buttonUrl: "https://example1.com/button.png",
}

To output the number of members in the webring, use <span id="webringucount"></span>, e.g.:

This webring has <span id="webringucount"></span> members.

will result in e.g. "This webring has 15 members."

That's it!

Please link back to this page if you use Webringu for your webring. I appreciate it!

Tip: Add your webring to this webring list by emailing the owner. (Mention Webringu as the code used!)

Webrings that use Webringu

• Code Collective
• Pinkcredible
• Microsoft Agent Frontier Ring
• Veggie Ring
• Gummy Ring
• Glass Beach Ring
• DUMB Ring
• Artists Online
• N7 Ring
• Off-Platform Webring
• Chat Ring
• SapphicRing
• San-Ring-O
• Queers of Faith Webring
• Rim Ring
• Femslash Fans Online
• PHIGHTRING
• Cool Christian Webring
• Sonic Webring
• The Monster Network (Monster High)
• Idol Ring
• Avant-Garde Comics Webring
• The Witching Hour Webring
• Unleashed Ring
• Digital Collections Ring
• Eggman Empire
• The FFXIV Webring
• Haotian Donghua Webring
• Webring Atelier
• Bisexual Webring
• Z.A.T.O.ring
• Cupid's Worst Nightmare
• Never Fade Away Webring
• Chuuniring
• Hellaverse Webring
• Dandy's World Wide Web
• The Lizard Webring
• Ring of an absolution
• Wordy Webring
• PonyRing
• DroidRing

Comment below if you've used Webringu to make your own webring, and I will add it to the list (eventually...)!

Comments