Nero’s Simple Webring Code

I keep meaning to put this up somewhere so other people can use it. This is the code that the Adult Artist Webring members use! It’s something I put together very early on in learning how to run a webring (in like, 2018, lol), so it may not be the best fit for a very large or modern one- AAW itself may outgrow it, oops. Regardless, here it is:

What is a webring?
For organizers: setting up your ring
For members: adding the widget to your site
Platform-by-platform instructions
Customizing the look
Removing the random button
Keeping the code up to date
Troubleshooting
The code

What is a webring?

For the unfamiliar: a webring is a group of websites linked together in a circle… A ‘ring’, as it were. Each member puts a small spot on their site with three elements:

A ← Prev link to the previous member’s site.
A Next → link to the next member’s site.
Optionally, a Random button that jumps to a random site in the ring.

Visitors can hop from site to site and discover everyone in the ring. Webrings are a great way to build community and send traffic between independent websites!

For organizers: setting up your ring

As the organizer, you’ll need to maintain the member list and send each person their personal code snippet. As mentioned at the top, it might be a little unwieldy for a large group, as I made this before the AAW blew up. Regardless!

1. Decide on your member order

A webring is a loop. Write out your members in order- this determines who each person’s Prev and Next neighbors are. For example:

Asmodeus → Belial → Dantalion → Murmur → Asmodeus (loops back)

In this example, Asmodeus’s Prev is Murmur and her Next is Belial. For the AAW, the order was just of who was accepted when.

(These are the names of my old rats, by the way.)

2. Create your ring’s homepage

You need a central page where people can learn about the ring, see the rules, and view the full member list. The widget on every member’s site will link back here. This can be as simple as a single page with a description and a list of links.

3. Create your logo image

Make a small banner image for the ring- something around 200×40px to 400×80px works well. I like squares, so the AAW one is 200×200. Export it as a .png or .jpeg and host it somewhere stable (your ring’s homepage is a good choice). Every member’s widget will display this image.

4. Build the member list in the code

Open the template (see The code section at the bottom of this page) in your editor of choice. Find the section that looks like this and replace the placeholder URLs with your real member URLs:

const links = [
  "https://member-one.com",
  "https://member-two.com",
  "https://member-three.com"
];

NOTE: The order of URLs in this list only affects the random button- it picks randomly from the whole list. The Prev/Next order is set separately per member.

5. Send each member their personal snippet

For each member, make a copy of the template and fill in their four placeholder values:

Placeholder in the code	What to put here
`RING_HOMEPAGE_URL`	Your ring’s central homepage URL – same for everyone
`RING_LOGO_URL`	The direct URL to the ring’s logo image – same for everyone
`PREV_ARTIST_URL`	The URL of the member directly before this person in the ring order
`NEXT_ARTIST_URL`	The URL of the member directly after this person in the ring order

Save each copy as a separate file (e.g. webring_code_ASMODEUS.html) and send the right file to each person.

6. When you add new members

When someone new joins, you need to:

Add their URL to the links list in the code (for the random button)
Insert them into the ring order and update the Prev/Next for the two members they slot between
Send the updated code to all members- the full list changes for everyone

📋 NOTE: Let your members know when updates go out and give them a deadline to install the new code. A stale widget with broken Prev/Next links makes the ring feel broken. I try to process applications a couple times a year so that members don’t get annoyed with constant emails.

For members: adding the widget to your site

Your ring organizer will send you a personal file. It already has your Prev and Next links filled in- you just need to get it onto your website.

Step 1 – Open your code file

Open the file in a text editor – not by double-clicking it. Double-clicking opens it in your browser as a broken preview.

Windows: Right-click the file → “Open with” → Notepad (or Notepad++ for easier reading)
Mac: Right-click → “Open with” → TextEdit. Then go to Format → Make Plain Text before doing anything else.

Once the file is open, press Ctrl+A (Windows) or Cmd+A (Mac) to select all the text, then Ctrl+C / Cmd+C to copy it.

Step 2 – Fix the logo image URL

The widget displays the ring’s logo image. Your webring organizer may have already filled in the logo URL for you. If you still see RING_LOGO_URL in the code, ask your organizer for the image link.

If you are hosting the image yourself (e.g. uploaded it to your site), find its public URL – it will look like https://yoursite.com/images/ring-logo.png. Then find this line in the code:

<img src="RING_LOGO_URL" alt="Webring Logo">

Replace RING_LOGO_URL with the actual image URL.

Step 3 – Add the widget to your site

See the platform-specific instructions below.

Platform-by-platform instructions

WordPress

Method A – Inside a page or post

Edit the page or post where you want the widget to appear.
Click the + button to add a new block, then search for Custom HTML and select it.
Paste your code into the Custom HTML block.
Click Update or Publish.

Method B – In your footer or sidebar

Go to Appearance → Widgets in your WordPress dashboard.
Find your Footer or Sidebar area and click + to add a block.
Add a Custom HTML widget and paste your code in.
Click Update.

⚠️ NOTE: WordPress may block the random button. Some security plugins (like Wordfence) or themes remove JavaScript from posts for safety reasons. If the button does nothing after you install the code, see the “Removing the random button” section below. The Prev/Next links will still work fine.

Wix (!!!! I DO NOT ADVISE USING WIX, AS THEY ARE ON THE BDS BOYCOTT LIST !!!! If you have a website with them, PLEASE look at switching ASAP!)

⚠️ NOTE: The random button uses JavaScript that Wix often blocks. If it doesn’t work after following these steps, remove the button (see below). The Prev/Next links will work fine.

In the Wix Editor, click Add (+) → Embed → Embed a Widget (or “HTML iFrame”).
Paste your code into the HTML box and click Apply.
Drag the element to wherever you want it on the page.

Squarespace

Edit the page and click where you want to add the widget.
Add a Code Block (found under “More” in the block menu).
Paste your code in. Make sure “Display Source” is turned off.
Save the page.

Neocities / Plain HTML Sites

Open your site’s HTML file in a text editor.
Paste the widget code wherever you want it to appear – for example, just before the </footer> or </body> tag.
Save and upload your file.

Cargo, Format, and other portfolio hosts

Most portfolio site builders have some version of a custom code or embed block. Look for terms like Custom Code, HTML Embed, Code Injection, or Embed Block in your platform’s help documentation. Paste the widget code there.

If your platform doesn’t support any custom HTML at all (I would be surprised…), the widget won’t be installable without switching hosts.

Customizing the look

The widget defaults to a black background with white text. Members are free to change colors (or anything else about it) to match their own site- the only requirement is that it links back to the ring’s homepage somewhere.

To change colors, find these parts in the code and swap out the color values:

What to change	What to look for in the code
Background color	`background-color: #000000`
Text and link color	`color: #ffffff`
Button border color	`border: 1px solid #ffffff`

The #000000-style codes are called hex colors. You can pick any color and get its code at htmlcolorcodes.com.

💡 For organizers: Consider including suggested colors or a brief style guide when you send out the widget code, so the ring has a cohesive look while still giving members room to personalize.

Removing the random button

If the random button doesn’t work on a member’s platform, they can remove it without breaking the Prev/Next links. Delete these two sections from the code file:

Section 1 – the button itself:

<p>
  <input
    type="button"
    value="Random site!"
    onclick="webringRandom()"
    style="...">
</p>

Section 2 – the JS at the bottom:

<script>
  function webringRandom() {
    const links = [ ... ];
    const randomIndex = Math.floor(Math.random() * links.length);
    window.location = links[randomIndex];
  }
</script>

Keeping the code up to date

Every time a new member joins the ring (or an existing member leaves or changes their URL), everyone needs a new code file. The random button’s member list needs to stay current, and any two members adjacent to a change will also need updated Prev/Next links.

A ‘workflow’ for organizers when sending updates:

Send updated files to all members any time the list changes- not just the ones directly affected. I keep everyone’s files in a folder that I link them too so I don’t need to worry about mixing up email attachments.
Give members a clear deadline to install the new code (e.g. “please update within 2 weeks”).
Keep a master copy of your up-to-date template so it’s easy to generate each member’s file.
Consider adding a version number or date in a comment at the top of the file so members can tell if they have the latest one.

For members receiving an update, the process is the same as the initial install: open the new file, copy it, and replace the old code wherever you pasted it before. Easy!

Troubleshooting

Problem	Likely cause	Fix
Logo image not showing	The image URL is wrong or the image isn’t publicly accessible	Paste the image URL into a browser – if it doesn’t load there, it won’t load in the widget either
Random button does nothing	JavaScript is being blocked by the platform or a security plugin	See “Removing the random button” above
Code shows as plain text on the page	Code was pasted into a regular text/paragraph block, not an HTML block	Make sure you’re using a Custom HTML block, not a Paragraph block
Widget looks very different from expected	The site’s theme CSS is overriding the widget’s styles	The member can adjust the widget’s inline styles; their host’s support team can also help
Prev/Next links go to the wrong sites	Member has an outdated version of the code	Resend the current code file to that member
Clicking Prev/Next lands on a dead site	A member’s site moved or went offline	Organizer should update the ring order and send a new code batch to everyone

The code

Copy everything in the box below. This is the base template – organizers will need to fill in the member list and generate a personal copy for each member as described above.

<!--
  ====================================================
  NERO'S SIMPLE WEBRING CODE - Template for Webring Members
  ====================================================
  INSTRUCTIONS FOR MEMBERS:
  There are only 4 things to fill in, all marked below.

  1. RING_HOMEPAGE_URL  - the webring's main website
  2. RING_LOGO_URL      - the full URL to the ring's logo image
  3. PREV_ARTIST_URL    - the URL of the member BEFORE you in the ring
  4. NEXT_ARTIST_URL    - the URL of the member AFTER you in the ring

  Your ring organizer will give you all four of these. You can remove this commented text after reading.
  ====================================================
-->

<div style="background-color: #000000; display: inline-block; color: #ffffff; text-align: center; padding: 4px;">

  <!-- Logo - links back to the webring's homepage -->
  <a href="RING_HOMEPAGE_URL">
    <!--              ^ CHANGE THIS -->
    <img src="RING_LOGO_URL" alt="Webring Logo" style="display: block; margin: 0 auto;">
    <!--   ^ CHANGE THIS -->
  </a>

  <!-- Prev / Next navigation -->
  <p>
    <a href="PREV_ARTIST_URL" style="padding: 4px 6px; color: #ffffff;">← Prev</a>
    <!--     ^ CHANGE THIS -->
    <a href="NEXT_ARTIST_URL" style="padding: 4px 6px; color: #ffffff;">Next →</a>
    <!--     ^ CHANGE THIS -->
  </p>

  <!-- Random member button - see the script below -->
  <p>
    <input
      type="button"
      value="Random site!"
      onclick="webringRandom()"
      style="background-color: #000000; border: 1px solid #ffffff; color: #ffffff; padding: 4px 6px; cursor: pointer;">
  </p>

</div>

<script>
  /* --------------------------------------------------
     WEBRING RANDOM - Full Member List
     Replace the example URLs below with your actual
     member list. Add or remove lines as needed.
     Keep the format exactly as shown (with quotes and
     a comma after each URL except the last one).
  -------------------------------------------------- */
  function webringRandom() {
    const links = [
      "https://member-one.com",
      "https://member-two.com",
      "https://member-three.com",
      "https://member-four.com",
      "https://member-five.com"
      // Add more members here - no comma after the last one
    ];

    const randomIndex = Math.floor(Math.random() * links.length);
    window.location = links[randomIndex];
  }
</script>

Nero’s Simple Webring Code

Contents

What is a webring?

For organizers: setting up your ring

1. Decide on your member order

2. Create your ring’s homepage

3. Create your logo image

4. Build the member list in the code

5. Send each member their personal snippet

6. When you add new members

For members: adding the widget to your site

Step 1 – Open your code file

Step 2 – Fix the logo image URL

Step 3 – Add the widget to your site

Platform-by-platform instructions

WordPress

Method A – Inside a page or post

Method B – In your footer or sidebar

Wix (!!!! I DO NOT ADVISE USING WIX, AS THEY ARE ON THE BDS BOYCOTT LIST !!!! If you have a website with them, PLEASE look at switching ASAP!)

Squarespace

Neocities / Plain HTML Sites

Cargo, Format, and other portfolio hosts

Customizing the look

Removing the random button

Keeping the code up to date

Troubleshooting

The code

Leave a Reply Cancel reply

Contents

What is a webring?

For organizers: setting up your ring

1. Decide on your member order

2. Create your ring’s homepage

3. Create your logo image

4. Build the member list in the code

5. Send each member their personal snippet

6. When you add new members

For members: adding the widget to your site

Step 1 – Open your code file

Step 2 – Fix the logo image URL

Step 3 – Add the widget to your site

Platform-by-platform instructions

WordPress

Method A – Inside a page or post

Method B – In your footer or sidebar

Wix (!!!! I DO NOT ADVISE USING WIX, AS THEY ARE ON THE BDS BOYCOTT LIST !!!! If you have a website with them, PLEASE look at switching ASAP!)

Squarespace

Neocities / Plain HTML Sites

Cargo, Format, and other portfolio hosts

Customizing the look

Removing the random button

Keeping the code up to date

Troubleshooting

The code

Related Posts

3rd Anniversary Merch Announcement!

Hourly Comics Day 2026

Parallel Publishing: A comics lecture at Jupiterfab

Leave a Reply Cancel reply