Followers API - Embed on website

Hello,

I am trying to use the below to pull the current follower count on my website but I think I am missing something or I might have done something wrong.

Would someone be willing to take a quick look and suggest a change if needed?

Darklytetv has <span id="followers"></span> followers
<script>
var ve = document.getElementById('followers');
setInterval(_ => {
    fetch('https://api.twitch.tv/kraken/channels/darklytetv', {
        headers: new Headers({
            'Client-Id': 'removed',
            'Accept': 'application/vnd.twitchtv.v5+json'
        })
    }).then(response => response.json()).then(data => {
        ve.textContent = data.stream.followers;
    });
}, 10000);
</script>

Thank you in advance!

There are a few things wrong here…

  1. v5 uses IDs, not names, the URL should be .../channels/116300654 for v5 channels endpoint
  2. channels response doesn’t contain a stream, that’d be .../streams/116300654.

You can use https://api.twitch.tv/kraken/channels/116300654 and access via data.followers in your code.

You won’t get new data every 10 seconds though, so I’d change the interval to a few minutes.

1 Like

I think it was your code I actually used! I saw that interaction with the other umm “gentleman” you handled that well.

Thank you for that original example btw, it helped me figure out a direction on how to make this work.

Do I have it correct below now?

darklytetv has <span id="followers"></span> followers
<script>
var ve = document.getElementById('followers');
setInterval(_ => {
    fetch('https://api.twitch.tv/kraken/channels/116300654', {
        headers: new Headers({
            'Client-Id': '//',
            'Accept': 'application/vnd.twitchtv.v5+json'
        })
    }).then(response => response.json()).then(data => {
        ve.textContent = data.followers;
    });
}, 10000);
</script>

Should work.

1 Like

Amazing

Thank you very much 3ventic for your help!

One last question if you have a moment.

Is there a benefit in using Curl for this kind of thing?

Doing it server side allows you to cache it yourself, which may improve performance and reliability.

It appears that something I did has created a wonky outcome.

Below is the code for the 4 API items i am trying to pull. It does pull 3 of the 4 (for some reason recent follower isn’t displaying). However, all the data is only appearing under the last in the list “Followers” rotating between each item.

Or is there a better way to do what I am trying to do? I’m understanding the API better each day, and I am also curious if this could be done better with curl.

Example (bottom of page) : http://www.darklyte.tv/

<div style="display: inline-block;"><img class="top" src="http://s.jtvnw.net/jtv_user_pictures/hosted_images/GlitchIcon_purple.png" alt="title" width="49" height="49" align="center">&nbsp;Title:</div>
<div id="status" style="display: inline-block;">Offline</div>
<script>
        var ve = document.getElementById('status');
        setInterval(_ => {
            fetch('https://api.twitch.tv/kraken/channels/116300654', {
                headers: new Headers({
                    'Client-Id': '//',
                    'Accept': 'application/vnd.twitchtv.v5+json'
                })
            }).then(response => response.json()).then(data => {
                ve.textContent = data.status;
            });
        }, 10000);
        </script>

<div style="display: inline-block;"><img class="top" src="http://s.jtvnw.net/jtv_user_pictures/hosted_images/GlitchIcon_purple.png" alt="game" width="49" height="49" align="center">&nbsp;Playing:</div>
<div id="game" style="display: inline-block;">Offline</div>
 <script>
        var ve = document.getElementById('game');
        setInterval(_ => {
            fetch('https://api.twitch.tv/kraken/channels/116300654', {
                headers: new Headers({
                    'Client-Id': '//',
                    'Accept': 'application/vnd.twitchtv.v5+json'
                })
            }).then(response => response.json()).then(data => {
                ve.textContent = data.game;
            });
        }, 10000);
        </script>

<div style="display: inline-block;"><img class="top" src="http://s.jtvnw.net/jtv_user_pictures/hosted_images/GlitchIcon_purple.png" alt="game" width="49" height="49" align="center">&nbsp;Latest Follower:</div>
        <div id="name" style="display: inline-block;">Offline</div>
        <script>
        var ve = document.getElementById('name');
        setInterval(_ => {
            fetch('https://api.twitch.tv/kraken/channels/116300654/follows?direction=DESC&limit=1', {
                headers: new Headers({
                    'Client-Id': '//',
                    'Accept': 'application/vnd.twitchtv.v5+json'
                })
            }).then(response => response.json()).then(data => {
                ve.textContent = data.name;
            });
        }, 10000);
        </script>

<div style="display: inline-block;"><img class="top" src="http://www.darklyte.tv/wp-content/uploads/2016/10/vote.png" alt="Followers" width="49" height="49">&nbsp; Followers:</div>
<div id="followers" style="display: inline-block;">Offline</div>
<script>
        var ve = document.getElementById('followers');
        setInterval(_ => {
            fetch('https://api.twitch.tv/kraken/channels/116300654', {
                headers: new Headers({
                    'Client-Id': '//',
                    'Accept': 'application/vnd.twitchtv.v5+json'
                })
            }).then(response => response.json()).then(data => {
                ve.textContent = data.followers;
            });
        }, 10000);
        </script>

Every fetch is another request the user on your website has to make. Combine the ones that target the same URL; you’re currently requesting the same /channels/ URL 3 times when you can extract all 3 pieces of information from the first response.

As for the recent follower, take some time to learn how JSON works and how values within are accessed in JS. Here’s one illustration, assuming this object is stored in a variable called data:

Thank you for the information

I am going to be honest. I am not sure how to tackle #1. I understand for #2 i will need to learn more about JSON.

My language knowledge extends from HTML to CSS (very basic on the language scale), but i am an eager learner.

Any suggestions/example you might be willing to share?

:slight_smile:

MDN has fairly good guides to get started

Thank you for the resource! I started reading it.

Since my site went live :s would you be willing to when you have a spare moment throw me a bone and give me the code for #1? If i can get 3 of the 4 API calls working i can dig into the 4th and learn more about Java and JSON.

Totally up to you. Regardless I appreciate all the help you have given me.

<div style="display: inline-block;"><img class="top" src="http://s.jtvnw.net/jtv_user_pictures/hosted_images/GlitchIcon_purple.png" alt="title" width="49" height="49" align="center">&nbsp;Title:</div>
<div id="status" style="display: inline-block;">Offline</div>
<script>
var ve = document.getElementById('status');
setInterval(_ => {
    fetch('https://api.twitch.tv/kraken/channels/116300654', {
        headers: new Headers({
            'Client-Id': '//',
            'Accept': 'application/vnd.twitchtv.v5+json'
        })
    }).then(response => response.json()).then(data => {
        ve.textContent = data.status;
    });
}, 10000);
</script>

<div style="display: inline-block;"><img class="top" src="http://s.jtvnw.net/jtv_user_pictures/hosted_images/GlitchIcon_purple.png" alt="game" width="49" height="49" align="center">&nbsp;Playing:</div>
<div id="game" style="display: inline-block;">Offline</div>
<script>
var ve = document.getElementById('game');
setInterval(_ => {
    fetch('https://api.twitch.tv/kraken/channels/116300654', {
        headers: new Headers({
            'Client-Id': '//',
            'Accept': 'application/vnd.twitchtv.v5+json'
        })
    }).then(response => response.json()).then(data => {
        ve.textContent = data.game;
    });
}, 10000);
</script>

<div style="display: inline-block;"><img class="top" src="http://s.jtvnw.net/jtv_user_pictures/hosted_images/GlitchIcon_purple.png" alt="game" width="49" height="49" align="center">&nbsp;Latest Follower:</div>
<div id="name" style="display: inline-block;">Offline</div>
<script>
var ve = document.getElementById('name');
setInterval(_ => {
    fetch('https://api.twitch.tv/kraken/channels/116300654/follows?direction=DESC&limit=1', {
        headers: new Headers({
            'Client-Id': '//',
            'Accept': 'application/vnd.twitchtv.v5+json'
        })
    }).then(response => response.json()).then(data => {
        ve.textContent = data.name;
    });
}, 10000);
</script>

<div style="display: inline-block;"><img class="top" src="http://www.darklyte.tv/wp-content/uploads/2016/10/vote.png" alt="Followers" width="49" height="49">&nbsp; Followers:</div>
<div id="followers" style="display: inline-block;">Offline</div>
<script>
var ve = document.getElementById('followers');
setInterval(_ => {
    fetch('https://api.twitch.tv/kraken/channels/116300654', {
        headers: new Headers({
            'Client-Id': '//',
            'Accept': 'application/vnd.twitchtv.v5+json'
        })
    }).then(response => response.json()).then(data => {
        ve.textContent = data.followers;
    });
}, 10000);
</script>

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.