Showing the Webring

Tinylytics offers a unique webring feature that connects personal websites together. The webring is hand-curated by us and displays random websites from our community. It’s a great way to discover and connect with other personal websites!

Basic Setup

1. Modify Your Embed Script

Add the webring parameter to your embed script:

https://tinylytics.app/embed/YOUR_EMBED_CODE.js?webring

Combining with other features:

https://tinylytics.app/embed/YOUR_EMBED_CODE.js?kudos&hits&webring

2. Add the Webring Link

Add this HTML element where you want to show the webring:

<a href="" class="tinylytics_webring">🕸️💍</a>

Note: - Keep the href empty - it will be populated automatically - The link content (🕸️💍) can be customized to your liking

Advanced: Showing Site Avatars

1. Enable Avatar Support

Modify your embed script to include avatars:

https://tinylytics.app/embed/YOUR_EMBED_CODE.js?webring=avatars

2. Enhanced Markup

Basic avatar implementation:

<a href="#" target="_blank" class="tinylytics_webring">
  🕸️<img class="tinylytics_webring_avatar" src="" style="display: none"/>💍
</a>

Alternative layout (avatar first):

<a href="#" target="_blank" class="tinylytics_webring">
  <img class="tinylytics_webring_avatar" src="" style="display: none"/>
  🕸️💍
</a>

How Avatars Work

The avatar system: - Automatically populates src and srcset attributes - Removes display: none when avatar is loaded - Serves images at 100x100px (200x200px for retina) - Includes retina support via srcset

Styling Tips

Avatar images are max 100x100px (200x200px @2x)
Hidden by default to prevent placeholder flashing
Fully customizable with CSS
Consider hover states for better interactivity

Example

Try it out:

🕸️💍

Best Practices

Place the webring in your footer or sidebar
Consider adding hover effects for better UX
Use appropriate spacing around the webring
Make it visually consistent with your site’s design
Consider adding a title or description near the webring

Notes

The webring is curated for personal websites
Each click shows a random site from the ring
Avatars are optional but add visual interest
All sites in the ring are manually reviewed

Navigation