Twitch for website

So i have been trying to find a way to add people streams to my website. I am using, i’m not a huge fan but it works, I dislike that it shows the profile pic of the stream (makes the image to large). Now is what I would like to do is make it so that whoever is live shows at the top of the list. Or maby even doing a small box on the homepage that shows only the 5 streamers that are live. Or something to that effect. I have found some small bits of coding but cant seem to get it to work. Any help is much appreciated.



This code i have found and put together. It just doesnt seem to work, I have little knowledge of javascript and im pretty good with HTML.

1 Like

Any help at all?

Your iframes are missing the id attribute? I’m not exactly sure what you’re trying to accomplish.

Yea im not the best coder, Im just trying to get it so that i can add some code to the website so that when a streamer is live it will show on the main page in a lil box. but i would like it to show like in order. So lets say that there are 5 streamers iv added…the streamer that is live goes on top of the rest.

Or if i added more that 5, it would only show the top 5 live streamers on the main page. Something to that affect.

Adjust the variables ‘displayMax’ and ‘streamers’ to your needs. Styling is up to you.

<!DOCTYPE html>
    <link rel="stylesheet" href="" />
    <link rel="stylesheet" href=",700,800" />
      #streamers {
        width: 500px;
        color: #ccc;
        background-color: #2b2b2b;
        font-family: 'Open Sans',sans-serif;
        font-weight: 400;
        margin-bottom: 5px;
      #streamers a {
        color: #b9a3e3;
      #streamers {
        font-weight: 700;
      #streamers div.status,
      #streamers div.viewers {
        font-size: .75rem;
      span.icon_online {
        background: red;
        border-radius: 50%;
        display: inline-block;
        height: .7em;
        line-height: 1;
        width: .7em;
    <script src=""></script>
      var displayMax = 5;
      var streamers = ['Ace3707', 'emongg']; // Twitch API says channel names are case-sensitive, but I cannot confirm that.
      var api_kraken_streams = ''; // returned object only contains streams that are live/online
      function reload() {
          url: api_kraken_streams + streamers.join(','),
          dataType: 'jsonp',
          type: 'get',
          success: function(data) {
            var divs = [];
            var online = [];

            // create new DIVs for online streams
            for (var i = 0, len = data.streams.length; i < len; i++) {
              var stream = data.streams[i];
              var nameLC =;
              var div = jQuery(' \
                <div id="' + nameLC + '" class="streamer"> \
                  <div class="name"><a href="' + + '">' + + '</a></div> \
                  <div class="status"><strong>LIVE</strong> <span class="icon_online"></span> playing ' + + '</div> \
                  <div class="viewers"><i class="fa fa-eye"></i> ' + stream.viewers + '</div> \
                </div> \

            // create new DIVs for offline streams
            for (var i = 0, len = streamers.length; i < len; i++) {
              var name   = streamers[i];
              var nameLC = name.toLowerCase();
              if ($.inArray(nameLC, online) == -1) {
                var url = '' + nameLC;
                var div = jQuery(' \
                  <div id="' + nameLC + '" class="streamer"> \
                    <div class="name"><a href="' +  url + '">' + name + '</a></div> \
                    <div class="status"><strong>Offline</strong></div> \
                    <div class="viewers"></div> \
                  </div> \
            // replace old DIVs
            $('#streamers div').remove();
            for (var i = 0, len = divs.length; i < len; i++) {
              if (i < displayMax) {
      $(document).ready(function() {
        window.setInterval('reload();', 15 * 1000);
    <div id="streamers"></div>
1 Like

OMG i love you. Thank you so much for the response. I greatly greatly appreciate it!!!

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