A Simple Webring Widget for 2023
NOTE: The sample webrings at the bottom of this page do not work correctly, they were unfortunately damaged during a site migration. The tutorial is still valid though.
This tutorial will explain how to set up a basic web ring with a centrally managed list of web sites. To host the widget, you'll need a webhost which supports PHP and HTTPS. This unfortunately rules out Neocities and other fully static free webhosts, but once you have hosting arranged, you'll be able to embed the widget anywhere you can stick arbitrary HTML.
To start with, download this PHP script and upload it to your web host. If you visit the page right now, you should see a message in the top left corner of the web page reading "This website is NOT part of the: Tutorial Web Ring". The first thing you'll want to do is give your web ring a name, you can do this by editing the 56th line of the PHP file, which should be a div with the ID "ringname". Next, you'll need to create a configuration file with a list of the websites you want to include in your web ring in the format `shortname,URL` and upload it to your web host with the name "webring.csv". The shortname will be how we'll refer to the website later when we start giving out embed codes to the ring members. Here are the contents of the webring.csv that I'll be using later in this tutorial.
tutorial,eightmegs.sdf.org/tech/webring.html
tutorial2,eightmegs.sdf.org/tech/webring2.html
tutorial3,eightmegs.sdf.org/tech/webring3.html
Once you've added all of the members to your webring, visit the webring page with your browser again, only this time put `?site=shortname` at the end of the URL, with shortname being one of the shortnames you put into your configuration file. If you've gotten the shortname right, you should now have a working widget with three links in a small table. The "Prev" link points at the previous entry in the configuration file, except when the entry is at the very beginning, in which case it points at the last entry in the configuration file. The reverse is true for the "Next" link, so once you get the widget on every website in your list, you'll have a ring! The "Random" link is fairly self explanatory and just chooses a random site from the list.
Now that your widget is (hopefully) working, we can get to embedding it in a website, this is the main reason for the short names in the configuration. You'll want to give out the code below to the people whose sites you've added to the ring and set the "src" field to the URL of your PHP file with the correct shortname on the end for each of your websites. I've posted the full code below, the only part you should have to change is the "src" field.
<iframe src="https://yourwebsite.com/webring.php?site=shortname" width="420px" height="130px" scrolling="no" title="Webring"></iframe>
All going you well, you should end up with something like this:
The widgit isn't really designed for these deeplinks and they break the formatting on some browsers, but you can get rid of the website name by commenting out the two "echo" commands on lines 48 and 49. And why stop there? Why not mess about with the CSS at the top? Maybe add a few images...
