Showing the webring

Tinylytics allows you to embed a webring to your site, using a simple link. The webring is hand curated by us and is intended for personal sites only.

Embedding the webring will fetch one random website that can be linked to.

It's super simple to set up. All it requires, is that you amend your embed script a little, and add an extra parameter at the end of .js.

To enable the webring feature, add the following parameter: ?webring.

So your embed script url should look like this now: https://tinylytics.app/embed/YOUR_EMBED_CODE.js?webring

If you have other features enabled, like kudos, or others, you can do it like this: https://tinylytics.app/embed/YOUR_EMBED_CODE.js?kudos&hits&webring

This will bring back a little bit extra data to your site. Next up, we need to add an element on your site, wherever you want.

Add the following anywhere on your site:

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

Keep the href empty as this will be replace by the random site url. Also note that the contents, i.e: 🕸️💍, of the link can be anything you like, so feel free to play around.

Once the embed code is loaded, it'll look for a class of tinylytics_webring and if it finds it, it will add the link to the random site.

Showing site avatars:

In addition to grabbing the URL, all sites in the webring have the ability to upload a site avatar that can be surfaced when grabbing a site from the webring.

This requires additional markup and a slight change to your embed code. First change the embed code, like below:

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

Note that we added a parameter value to the webring of "avatars": webring=avatars.

That will tell tinylytics to also fetch the avatar of the site, if available.

Next up we need to change the markup of our webring container. It's pretty much the same, but we need to add an additional img tag:

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

The above is just an example and you can change the markup to suit your needs. You may want to add an image first, or last, it's really up to you. For example:

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

The important part is that you add the img tag with a class of tinylytics_webring_avatar:

<img class="tinylytics_webring_avatar" src="" style="display: none"/>

When tinylytics finds the image tag, and also a corresponding avatar for the site in the webring, it will change the src attribute to point to the avatar on our CDN, we'll also set a srcset for retina quality images. Then it will also remove the display: none from the style attribute.

Having it hidden as default avoids any issues with a "not found" placeholder showing up.

We will serve an image at a maximum of 100px by 100px, in addition we'll also add a retina image at 2x (200px * 200px @2x). That'll keep it looking sharp and clear.

Styling is up to you, so please style it as you seem necessary for your own site.

Try it:

🕸️💍