LOADING...

Preview

Pen ID
Unlock Campus Themeforest adv

 

Code

Original widget:

Widget from Streambadge.com:

CSS
body {
    margin: 35px;
}

.twitch-widget {
	background: #333;
	border-radius: 5px;
	color: #fff;
	display: block;
	margin: 25px 0;
	padding: 10px;	
	text-decoration: none;
}

.online, .offline {
	border-radius: 5px;
	display: inline-block;
	height: 10px;
	width: 10px;
}

.online {
	background: green;
}

.offline {
	background: red;
}

.viewers {
	color: #ccc;
	display: block;
	margin: 0 0 0 15px;
	font-size: 0.8em;
}
JS
(function() {

  var user_name, api_key, twitch_widget;
  
  user_name = "ffstv";
  api_key = "5j0r5b7qb7kro03fvka3o8kbq262wwm";
  twitch_widget = $("#twitch-widget");

  twitch_widget.attr("href","https://twitch.tv/" + user_name);

  $.getJSON('https://api.twitch.tv/kraken/streams/' + user_name + '?client_id=' + api_key + '&callback=?', function(data) {	
	  if (data.stream) {
		  twitch_widget.html(" Online! Playing: " + data.stream.game + "Viewers: " + data.stream.viewers + "");
	  } else {
		  twitch_widget.html(" Offline");
	  }  
  });

})();

Description

A simple widget to see if a user is streaming. If true the widget displays the game name and viewer count.
Term
Mon, 11/27/2017 - 21:26

Related Codes

Pen ID
Pen ID
Pen ID
Square Adv