Powered by Microsoft Azure
Visitor Counter Badge is a simple open-source utility you can use to display the number of visitors on a web page, repository, or profile. Every request to render the visitor count badge invokes an HTTP-triggered Azure function that dynamically generates an SVG image that you can apply on a web page, profile page, or repository. You can host this service on your Azure subscription by using the ARM deployment button below.
If you are further interested in learning the internals of this service, please read the Visitor Counter Badge article on my blog. While you are there, please consider subscribing to my mailing list to receive updates on new articles on Cloud-Native and Kubernetes.
I love reading tweets. Send me your tweets, or connect with me via my blog - The Cloud Blog!
- If you are using this badge somewhere or want to show your appreciation, please add a ⭐ to the repository.
- This function runs on the Y1-Dynamic App Service Plan (a.k.a. Consumption plan) on a Pay-As-You-Go (PAYG) subscription. You can help me make this service better for everyone by making a small contribution on PayPal or sponsoring me on GitHub (coming soon). Thank you for your support!
- Please do not misuse this service. Consider hosting it yourself if you want to experiment or anticipate huge traffic. If you spot any bugs, please create an issue. I welcome your pull requests.
To use this badge, you first need to register a username. To do that, use an HTTP client of your choice, such as cURL or POSTMAN, to make a POST request to the following endpoint.
curl -X POST -d "" 'https://badge.tcblabs.net/api/hc/[Your Username]'Note: Your username must not be longer than 10 characters in length and must only contain alphanumeric characters.
This request will return either of the following two responses.
| HTTP response | Definition | Operation Status |
|---|---|---|
| 200 | OK | Username successfully registered |
| 401 | CONFLICT | Username already exists. Choose another username. |
A page is uniquely identified through a page identifier (case insensitive) and your username. You can use any unique string to identify your page within your account. The most common choices are the title of the page, a number, or a GUID. Once you select an identifier, you can apply the badge on an HTML page, such as a blog post, using the following code.
<img src="https://badge.tcblabs.net/api/hc/[Your Username]/[Page Identifier]" />Note: Your page identifier must be less than 50 characters in length and only contain alphanumeric characters, hyphens (-), and underscore (_).
If you want to apply the badge on a markdown file such as README.md or your GitHub profile, use the following code.
Most of the aspects of the badge are configurable. The configuration settings are read from the query string as follows.
https://badge.tcblabs.net/api/hc/[Your Username]/[Page Identifier]?[OptionKey1]=[Value]&[OptionKey2]=[Value]...
Following is the list of supported parameters. See the raw view of the README file for the query string values used in the examples below.
| Parameter name | Supported values | What it does | Example |
|---|---|---|---|
| IconBackgroundColorCode | Color name or hex code (incl. #) | Specify the background color of the label (left) | |
| EyeColorCode | Color name or hex code (incl. #) | Specify the color of the eye icon (left) | |
| TextBackgroundColorCode | Color name or hex code (incl. #) | Specify the background color of the label (right) | |
| TextColorCode | Color name or hex code (incl. #) | Specify the color of the counter (right) | |
| NoCount | true (default) or false | Display the count without incrementing the counter | |
| IsKmbFormat | true (default) or false | Format large numbers as K(Kilo), M(Million), and B(Billion) |
Note: Do not use the symbol
#in the value of the query string parameter. Use the URL encoded value%23instead.
You can deploy this function to your Azure subscription and customize it to suit your needs. Execute the following AZ CLI command to create a resource group in your subscription.
New-AzResourceGroup -Name <resource-group-name> -Location <resource-group-location>Click on the following button to create an Azure Function in the resource group you created.
Deploy the application code to your Azure Function. There are several ways of doing so, such as GitHub Actions, VSCode, and Visual Studio.