It's so simple I might as well show how to setup for it.
Create a page for your webring. Make a list of links, put
data-linkcircle onto that list, download the script above, and then link it in a script tag.- you.example.com/webring.html
<script src="/linkcircle.min.js"></script> <ol data-linkcircle> <li><a href="https://member.example.com">Some member</a></li> <li><a href="https://cool.example.com">Cool website</a></li> <li><a href="https://awesome.example.com">Awesome website</a></li> </ol>
Congrats! You now have a webring. Just change the list whenever you want to add/remove someone.
A member can simply link as you would do similarly with Hotline Webring.
- member.example.com/links.html
<a href="https://you.example.com/webring.html?prev">Back</a> <a href="https://you.example.com/webring.html?random">Random</a> <a href="https://you.example.com/webring.html">Nice Webring</a> <a href="https://you.example.com/webring.html?next">Next</a>
Q&A
Specifically, how does it detect members?
In whatever you put an
data-linkcircle onto, it'll detect any <a>s and put them into the webring. For example, this...- you.example.com/webring.html
<div data-linkshuffle> <a href="https://cool.example.com">Website</a> <h2>God forbid I put a heading in here</h2> <div class="blah"> <a href="https://awesome.example.com">bbbbbbbbbbbbb</a> </div> </div>
...will resolve to:
"No referrer".
Their
Referrer-Policy is likely set to omit the referrer. In short, their website is preventing Linkcircle from seeing that they were the one that had the link on their page.No worries, if they can't/won't change it, you can get around it by using slugs. Give their link a unique ID like so:
- you.example.com/webring.html
... <a href="https://awesome.example.com" data-lc-slug="awesome">Awesome</a> ...
Now, when they link to the webring, they'll have to include that slug like so:
- awesome.example.com/links.html
<a href="https://you.example.com/webring.html?prev=awesome">Back</a> <a href="https://you.example.com/webring.html?random=awesome">Random</a> <a href="https://you.example.com/webring.html">Nice Webring</a> <a href="https://you.example.com/webring.html?next=awesome">Next</a>
If you commonly run into this error, leave a comment. It's likely that depending on the referrer may be too iffy, so I might change the tutorial at the top to include slugs.
"Not a member".
Linkcircle didn't detect your website to be on the member list. Make sure that the URL is correct; if you point to a specific page on their website, Linkcircle may not detect their website if it's coming from another page on their website.
If you're still having problems, try using slugs as described here.
It's showing my page for a split second
If this is too much of an issue (ex: you have something autoplaying), you can fix this by making Linkcircle run on a different mostly-blank page. Don't worry, your member list can stay where it is. Just follow these steps.
On your
webring.html, remove the script tag, but keep the data-linkcircle:- you.example.com/webring.html
<ol data-linkcircle> <li><a href="https://cool.example.com">Cool website</a></li> <li><a href="https://awesome.example.com">Awesome website</a></li> </ol>
Make a new page, like
webring-go.html for example. Add the script tag, but point to the page with the member list on it using data-list:- you.example.com/webring-go.html
<script src="/linkcircle.min.js" data-list="webring.html"></script>
You're done. Linkcircle will function on
webring-go.html, but will get the member list from webring.html.Now your members will instead have to link
webring-go.html for using the webring:- member.example.com/links.html
<a href="https://you.example.com/webring-go.html?prev">Back</a> <a href="https://you.example.com/webring-go.html?random">Random</a> <a href="https://you.example.com/webring.html">Nice Webring</a> <a href="https://you.example.com/webring-go.html?next">Next</a>
It's not detecting that I've updated the member list
Linkcircle "caches" the member list for 12 hours so it doesn't have to check for it every time.
In short, instead of waiting for the entire page to load to get the list of members every time, it does this: save it the first time, and then just depend on that for 12 hours. It's so it can get out of there ASAP.
To have it check for the list of members again, simply just go to the webring's page. It'll see the member list and update it.
If you just don't want this, put
data-nocache onto the script element:- you.example.com/webring.html
<script src="/linkcircle.min.js" data-nocache></script>
It's just not detecting the member list
Make sure that it's directly in the .html file with the member list in it. It may not catch zonelets or frames.
If you're still having issues, feel free to message me.
Why not onionring.js?
You have to add a
<script> tag to your website to join an onionring.js webring.Personally, adding a script tag to someone else's website has always made me feel uneasy. I'm essentially putting trust that they won't be malicious or get their website compromised.
Also, the presentation of it requiring Javascript is kinda meh. Sure, Linkcircle also requires you to have Javascript, but that's just to function. It'll still look nice on a member's page because it's just something you link to.
And finally, making a list of members in HTML is way more easier than having to edit Javascript that's not yours.
How can I hide my member list?
Just put
display: none on it:- you.example.com/webring.html
<ol data-linkcircle style="display: none"> ... </ol>
Yes, really. There's no way to make your member list private. Linkcircle is Javascript, so the user's computer is the one processing it, so there's no way to stop the member list from getting into people's hands.
Advanced Q&A
What in the world is that query?
Just having a word in there may look weird, but I wanted a method that's easy to use for someone new to web development, and able to become server-side without having to make all of your members change the link.
You're still able to add more parameters to it, and Linkcircle will parse it just fine. All it's looking for is a parameter with a key of next/previous/random.