# 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:

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

Combining with other features:

```html
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:

```html
<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:

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

### 2. Enhanced Markup

Basic avatar implementation:

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

Alternative layout (avatar first):

```html
<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:

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

## 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