Last active
October 24, 2016 00:30
-
-
Save timetocode/8012754 to your computer and use it in GitHub Desktop.
A script to display if a certain channel is currently live on Twitch.tv. To use this script on your website, paste all of the code from the "head code" into the <head></head> tag of webpage.
Then paste the one line from "body code" wherever the widget should appear.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <div id='streaming'></div> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <script src="http://code.jquery.com/jquery-latest.js"></script> | |
| <script type="text/javascript"> | |
| $(document).ready(function() { | |
| // your twitch channel name | |
| var twitchName = 'yourchannelname' | |
| // an element on your page to put the widget into | |
| var elementSelector = '#streaming' | |
| // HTML to display while waiting for data | |
| var loadingHTML = "<b class='twitchLoading'>Querying twitch.tv...</b> <a href='http://www.twitch.tv/" + twitchName + "'>http://www.twitch.tv/" + twitchName + "</a>" | |
| // HTML to display while online | |
| var onlineHTML = "<b class='twitchOnline'>*ONLINE*</b> Streaming gamedev @ <a href='http://www.twitch.tv/" + twitchName + "'>http://www.twitch.tv/" + twitchName + "</a>" | |
| // HTML to display while offline | |
| var offlineHTML = "<b class='twitchOffline'>*OFFLINE*</b> <a href='http://www.twitch.tv/" + twitchName + "'>http://www.twitch.tv/" + twitchName + "</a>" | |
| $(elementSelector).html(loadingHTML) | |
| $.getJSON( | |
| 'http://api.justin.tv/api/stream/list.json?channel=' + twitchName + '&jsonp=?', | |
| function (twitchData) { | |
| if (twitchData && twitchData[0]) { | |
| if (twitchData[0].stream_type && twitchData[0].stream_type === 'live') { | |
| // live | |
| $(elementSelector).html(onlineHTML) | |
| } else { | |
| // something other than live | |
| $(elementSelector).html(offlineHTML) | |
| } | |
| } else { | |
| // no data or invalid data from twitch | |
| $(elementSelector).html(offlineHTML) | |
| } | |
| } | |
| ) | |
| }) | |
| </script> | |
| <style type="text/css"> | |
| .twitchLoading { color: #bbb } | |
| .twitchOnline { color: green } | |
| .twitchOffline { color: #999 } | |
| </style> | |
| <div id="streaming"></div> <!-- don't put this line in the <head></head>, put it somewhere in the <body> --> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment