Twitch for website

API
6

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

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" />
    <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Open+Sans:400,700,800" />
    <style>
      #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 div.name {
        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;
      }
    </style>
  </head>
  <body>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    <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 = 'https://api.twitch.tv/kraken/streams/?limit=100&channel='; // returned object only contains streams that are live/online
      
      function reload() {
        $.ajax({
          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 = stream.channel.name.toLowerCase();
              var div = jQuery(' \
                <div id="' + nameLC + '" class="streamer"> \
                  <div class="name"><a href="' + stream.channel.url + '">' + stream.channel.display_name + '</a></div> \
                  <div class="status"><strong>LIVE</strong> <span class="icon_online"></span> playing ' + stream.game + '</div> \
                  <div class="viewers"><i class="fa fa-eye"></i> ' + stream.viewers + '</div> \
                </div> \
              ');
              divs.push(div);
              online.push(nameLC);
            }

            // 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 = 'http://www.twitch.tv/' + 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> \
                ');
                divs.push(div);
              }
            }
            
            // replace old DIVs
            $('#streamers div').remove();
            for (var i = 0, len = divs.length; i < len; i++) {
              if (i < displayMax) {
                $(divs[i]).appendTo('#streamers');
              }
            }
          },
        });
      }
      $(document).ready(function() {
        window.setInterval('reload();', 15 * 1000);
        reload();
      });
    </script>
    <div id="streamers"></div>
  </body>
</html>
1 Like