Share your repls and programming experiences

← Back to all posts
🎈 View Counters! 🌐
h
Battledash2 (79)

🎈 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 webviews.home.kg or https://ezurl.tk/webviews

It should look like this:

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

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!

Here's an example of it in use:
https://viewcount.battledash2.repl.co/v/M7Mf5SSd43679Z4DC8Cn1RyI44055o2f
https://viewcount.battledash2.repl.co/u/M7Mf5SSd43679Z4DC8Cn1RyI44055o2f

Comments
hotnewtop