How to make your own webring

Reading time: 5 minute(s)

Here is a guide on how to make your own webring that plays nice with other webrings – and that you can run/use on a static website like Neocities.

For full disclosure, I used https://mxb.dev/blog/webring-kit/ as a template for the ring, and then I added some extra stuff to jazz it up.

Notes

  • This webring uses Javascript. I do not know how to make it work without JS.
  • Because of the nature of Javascript you might need to CTRL+F5 to view the changes you make to your webring, if a regular refresh doesn’t work.

Create files

  • Create four files in the same directory/folder:
    1. webring.js – this is your main logic
    2. webring.json – this is where the webring members go
    3. test.html – this is for testing
    4. members.html – this is where webring members are publicly displayed
  • Generate a new webring code here and paste it in webring.js.

Set up webring.json

  • Edit webring.json and copy the below code.
  • After copying, change the url to match the live website URL you are currently working on.
Remember to include a / at the end of your URL unless it is going to a specific page (.html/.htm).
[
     {
        "name": "Test Name",
        "url": "https://yourwebsite.neocities.org/",
        "owner": "Test Owner"
    } ,
    {
      "name": "sadgrl.online",
      "url": "https://sadgrl.online/",
      "owner": "Sadness"
    }
]
  • This is where you will add new members. You can change/remove the ‘owner’ value, but name/link is pretty important.
I added two just to show what it looks like with more than one entry. Every entry is wrapped in brackets { } and is followed by a comma- except for the last entry.

Set up webring.js

  • Open webring.js
  • Change the URL in the very first variable (below) to the full URL of your webring.json file (your variable name won’t match the example below- it’s by design to avoid conflicts!)
const p8x9p4 = `https://yourwebsite.neocities.org/webring.json`;
  • Scroll to the bottom of webring.js
  • Look for this code:
window.customElements.define("ring-574", p1k5w7);
  • Copy the ring-XXX value, you’ll need it in a few.

Test your webring

  • Open test.html
  • Paste this code:
<script src="https://yoursite.neocities.org/webring.js"></script>
<ring-xxx site="https://yoursite.neocities.org/"></ring-xxx>
  • Replace the script-src URL with the full URL of your webring.js file.
  • Replace the site URL with the full URL of your site (matching what’s in the JSON file).
  • Replace ring-xxx with the ring number you grabbed in the previous step.
  • When done, save your page and reload. (Remember, if it doesn’t show up you may need to press CTRL+F5.)

Customize webring badge text

  • Open up webring.js
  • Scroll down or ctrl+f to where it says const cp – it looks like this:
const cp = `
          <div class="title">Webring Title</div>
          <div class="extratext">
          <p>
            Here is some text!<br><br>
            This site is: <strong><a href="${matchedSite.url}"> ${matchedSite.name} </a></strong><br><br>
            This site is owned by: ${matchedSite.name}
          </p>
          </div>
          <p class="nav">
            
            <a href="${sites[nextSiteIndex].url}">[Next]</a>
            <a href="${sites[prevSiteIndex].url}">[Previous]</a>
            <a href="${sites[randomSiteIndex].url}">[Random]</a>
            <a href="https://yesterwebring.neocities.org/members.html">[Members]</a>
          </p>
        `;
  • The text inside of the backticks is the text on your widget. On the example widget, I have a title, a phrase, and four links: next, previous, random, members.
  • These should be in my template but here’s a breakdown of the variables:
    • matchedSite.url = the URL of the current site
    • matchedSite.name = the current site’s name
    • matchedSite.owner = the name of the owner of the site
    • (P.S. It pulls this stuff from the JSON file, so if you change the names of the areas there, be sure to change them here too!)
  • Then there are the webring link variables:
    • ${sites[nextSiteIndex].url} = the next button
    • ${sites[prevSiteIndex].url} = the previous button
    • ${sites[randomSiteIndex].url} = the random button
  • Don’t worry about the members URL just yet, we’ll get to that.
  • Save and preview at test.html

Styling your webring

Your webring can have a default style which means you get to design how it looks. If interested, you can also allow your webring members to customize the code too.

  • Open webring.js
  • Locate or ctrl+f for the rootVars variable. It looks like this:
var rootVars = `:root {
  /* background! */
  --w6h8x8-background-image:url('https://sadgrl.online/images/bgs/tile/sparklebackground.gif');
  --w6h8x8-background-color:#000;
  --w6h8x8-border:5px solid red;
  --w6h8x8-border-radius:5px;
    /* sizing */
  --w6h8x8-width:250px;
  --w6h8x8-height:250px;
  --w6h8x8-padding:1rem;
  

  /* title! */
  --w6h8x8-title-font:'Arial';
  --w6h8x8-title-color:red;
  --w6h8x8-title-size:35px;
  --w6h8x8-title-align:left;
  --w6h8x8-title-margin:10px;
  /* line height & letter spacing */
  --w6h8x8-title-height:25px;
  --w6h8x8-title-spacing:3px;
  --w6h8x8-title-weight:bold;


  /* text! */
  --w6h8x8-text-family:sans-serif;
  --w6h8x8-text-color:lightblue;
  --w6h8x8-text-size:14px;
  --w6h8x8-text-align:center;
  --w6h8x8-text-spacing:1px;
  --w6h8x8-text-height:1em;

  /* links! */
  --w6h8x8-link-family:sans-serif;
  --w6h8x8-link-color:limegreen;
  --w6h8x8-link-decoration:none;
  --w6h8x8-link-weight:bold;
  --w6h8x8-link-size:13px;
}`
Do NOT copy the above code! Every webring has a unique variable added to the beginning of each variable, to avoid conflicts! Make sure you paste the code from your webring.js
  • These variables are what you will use to style the default look and feel of your webring. You can change colors, add a background image and more!

Make a members list

  • Create a file called members.html
  • Create the page and style it how you like. Once you decide on where you want your members list to show up, paste this (keep it empty):
<div id="myData"></div>
  • Then, at the bottom of your page, add this script:
   <script>
        fetch('https://yourwebsite.neocities.org/webring.json')

            .then(function (response) {
                return response.json();
            })
            .then(function (data) {
                appendData(data);
            })
            .catch(function (err) {
                console.log('error: ' + err);
            });
        function appendData(data) {
            var mainContainer = document.getElementById("myData");
            for (var i = 0; i < data.length; i++) {
                var div = document.createElement("div");
                div.innerHTML = '<strong>Name:</strong> ' + data[i].name + '<br/>' + '<strong>URL: </strong>' + '<a href="' + data[i].url + '">' + data[i].url + '</a>' + '<br/>' + '<strong>Owner:</strong> ' + data[i].owner + '<br/><br/>';
                mainContainer.appendChild(div);
                div.classList.add("item");
            }
        }
    </script>
  • You just need to replace the URL in fetch with your webring.json file URL.
  • Save members.html and preview.
If you changed the 'owner' value (or added new ones), you can update how it displays here, under div.innerHTML

Make instructions for your members

Once you have your webring all set up, you probably want some members! Here is how to set up the info so anyone can join your ring.

  • Create a textarea so people can grab the code for your badge. Set it up like this:
<textarea>
  <script src="https://webringsite.neocities.org/webring.js"></script>
  <ring-xxx site="YOUR URL HERE"></ring-xxx>
</textarea>
  • The src part is the URL for your webring.js file.
  • The site part is for the URL of your webring member.
  • The ring-xxx part should match the same variable as in your test.html file.
NOTE!! The webring badge only works AFTER the user has been added to the JSON file.

Allow members to change webring style (optional)

If you want to let your members override your default styles, it requires just a little extra work.

  • Open webring.js
  • Copy the rootVar variables between the backticks as seen in Step 6.
  • Tell your members to paste this code into a textarea on your public page, wrapped in style tags like below and add !important next to each value before the semicolon:
<textarea>
<style>
:root {
  /* background! */
  --w6h8x8-background-image:url('https://sadgrl.online/images/bgs/tile/goldsilkbg.gif') !important;
  --w6h8x8-background-color:#000 !important;
  --w6h8x8-border:5px solid red !important;
  --w6h8x8-border-radius:5px !important;
    /* sizing */
  --w6h8x8-width:250px !important;
  --w6h8x8-height:250px !important;
  --w6h8x8-padding:1rem !important;
  

  /* title! */
  --w6h8x8-title-font:'Arial' !important;
  --w6h8x8-title-color:red !important;
  --w6h8x8-title-size:35px !important;
  --w6h8x8-title-align:left !important;
  --w6h8x8-title-margin:10px !important;
  /* line height & letter spacing */
  --w6h8x8-title-height:25px !important;
  --w6h8x8-title-spacing:3px !important;
  --w6h8x8-title-weight:bold !important;


  /* text! */
  --w6h8x8-text-family:sans-serif !important;
  --w6h8x8-text-color:lightblue !important;
  --w6h8x8-text-size:14px !important;
  --w6h8x8-text-align:center !important;
  --w6h8x8-text-spacing:1px !important;
  --w6h8x8-text-height:1em !important;

  /* links! */
  --w6h8x8-link-family:sans-serif !important;
  --w6h8x8-link-color:limegreen !important;
  --w6h8x8-link-decoration:none  !important;
  --w6h8x8-link-weight:bold  !important;
  --w6h8x8-link-size:13px  !important;
}
</style>
</textarea>
If you want to test this, try adding this same code (minus the <textarea></textarea> tags) to the bottom of your test.html and change up some of the variables - save & preview!

You’re done!

Now, when someone asks to join their webring, add them to the JSON file, and then after you’re done, tell them to put the badge on their page.