Skip to content
Sign upLog in
← Back to Community

🎈 View Counters! 🌐

Profile icon
Battledash2

🎈 View Counters! 🌐

Hey!

A while ago I made a view counter which lets you show how many times your webpage / post was viewed..

Reasons for use:

  • You wanna see how many times your content was viewed
  • You wanna show your users how many times your website was viewed
  • You wanna show your viewers that your site is trust worthy

Features:

  • Use JavaScript to control views (client-sided)
  • SVG images
  • Intuitive (easy to use)

So.. How do we use it?

First of all, go to https://viewcount.battledash2.repl.co/

It should look like this:

couldn't load image.. sorry!

Now you click Create. This will send you to a new page with all the available links. It should look like this:

couldn't load image.. sorry!

Now we have those links... But what do they do?

The first one (View counter) is the link to an svg to view your counter. This is mainly for MD. You can use it like this: ![error](https://viewcount.battledash2.repl.co/v/generated_id)

This will show your counter.
The second one (Add to counter) is fetchable (no cors) so you can use fetch to add to the counter. This also returns an svg but if you use fetch it'll work as well.. The SVGs height/width is 0 so you won't be able to see it, but it does add to the counter. You can use it like this: ![error](https://viewcount.battledash2.repl.co/u/generated_id)
Now you can display and add to the counter!

The third one (JS Api) is what it says, an api. This allows you to add and view the counter from Javascript. To add the script to your code use <script src="https://viewcount.battledash2.repl.co/s/generated_id"></script>.

To add to the counter use:

Counter.add(); // 'Counter' is generated by the script

To get the counter (in plain text) use:

Counter.get((data)=>{ // 'data' is the result (like 1, 2, 3, 4, etc.) })

That's all for the api. Now...

Last but not least, the last (4th) one (Plain text). This is fetchable (no cors) so you can use fetch to get it. This is already included in the Javascript Api (Counter.get). You can use this with an XMLHttpRequest or the fetch api. You can use it like this:

fetch("https://viewcount.battledash2.repl.co/t/generated_id").then(data=>{ data.text().then(count=>{ // count is the counter }); });

That's all! I hope this helps you in your coding!

You should know, because repl.it is slow sometimes, the counter might not update immediately. (also this does not have sync because it uses SVG. If you want sync, you have to make it yourself using Counter.get)

Great! Now you have counters in your websites with barely any work!

Voters
Profile icon
Mrllafazani
Profile icon
DenisaIuliana
Profile icon
Battledash2
Comments
hotnewtop
Profile icon
[deleted]

amazing

Profile icon
Battledash2