Tinylytics for Micro.blog

This page answers questions about my Tinylytics for Micro.blog plugin.

Configuring the Plugin

The settings below configure different aspects of the Tinylytics for Micro.blog plugin and add the options to the embedded script if enabled. I encourage you to experiment with the different settings to see what they do.

The Tinylytics for Micro.blog settings panel.

What the Settings Do

With the plugin installed and a site id entered at a minimum, Tinylytics for Micro.blog will track your site hits. If you want to display the stats on your site for others to see, you’ll want to add the footer embed code to your Micro.blog Custom Footer area (Design > Edit Footer). This requires copying and pasting this code snippet and updating your footer:

{{ partial "tinyhits/embed.html" (dict "context" . ) }}

A properly pasted embed code looks like this:

Custom Footer Embed Code

Page and Post Shortcodes

If you’d like to avoid making changes to your theme template files, you can use select shortcodes instead. To add a kudos, post view counter or country flags to a post, simply add them using the following shortcodes:

{{< tinykudos >}}
{{< tinyhits >}}
{{< tinyflags >}}

An example of using shortcodes looks something like this:

Shortcode example

Making Things Look Good

The styles below are what I use on my site. You can use them as a starting point for yours. The code should be pasted in the Custom CSS area of your Micro.blog site. If you have any questions, contact me through email. Remember, donating gets you priority support. 😁

/* Copy and paste these style into your Micro.blog "Custom CSS" settings */

.tiny_uptime,
.tiny_counter {
	display:inline-block;
}
.tiny_uptime::before {
	content: " Β· ";
}
.tiny_countries {
	display: block;
	line-height:1;
	margin:15px auto 0 auto;
}
.tiny_webring {
	display:block;
}
a.tinylytics_webring {
	display:inline;
	line-height:30px;
}
.tinylytics_webring_avatar {
	border-radius: 6px;
	width: 30px;
	height: 30px;
	vertical-align: middle;
	margin-right: 6px;
	background: #fff;
}