Linkcircle (expert guide)
HTML skill level: Beginner | Expert
Setup!
Adding the script
Upload the script to your website:
Add the script on your webring page as high as you reasonable can in your website. Please don't use async, defer, or type="module". This is critical for its performance.
Adding members
Link the pages you want to use for your members anywhere on your page:
Then, for each link, give them a unique data-slug code like so. They can be anything that can work in a URL. Just make sure your members know their data-slug; it'll be used for their webring widget!
That's all you need to do. By default, Linkcircle will scan the page for elements matching [href][data-slug]. So, you don't have to use anchors if you don't want to.
Giving them widgets
In Linkcircle, there is no set widget. Your members link your website using their data-slug, just like in Hotline Webring.
Here's a template for easy copying, for a member with the slug bob:
<a href="https://example.com/?bob-previous">Previous</a>
<a href="https://example.com/?bob-random">Random</a>
<a href="https://example.com/">Webring</a>
<a href="https://example.com/?bob-next">Next</a>Your done!
That's it! You now have a webring running on your page.
Questions??
Member Caching/The list isn't updating!
Linkcircle caches the member list into LocalStorage for 30 minutes. To quickly clear it, just visit the page normally.
For specifics, the cache invalidates:
- after 30 minutes
- when you normally visit the page
- it encounters a member it doesn't know
- it just has some error
Caching is done so Linkcircle isn't depending on the entire page loading when you casually navigate using the widget.
I wanna hide my list!
Your only option is to hide the members using CSS.
How can I use this with search queries?
Like normal. Linkcircle scans the query keys, so you could just do this.
https://example.com?bob-next&q=whateverHowever, you may want to use this explicit version for better compatibility.
https://example.com?lc=bob-next&q=whatever