Steam Widgets

  
<script
  src="https://strawberrysnails.github.io/steam-widgets/js/steam-lastplayed.js?steamid=YOUR_STEAM_ID"
  class="default">
</script>
  

  
<script
  src="https://strawberrysnails.github.io/steam-widgets/js/steam-mostplayed.js?steamid=YOUR_STEAM_ID"
  class="default">
</script>
  

  
<script
  src="https://strawberrysnails.github.io/steam-widgets/js/steam-lastplayed.js?steamid=YOUR_STEAM_ID"
</script>
  

  
<script
  src="https://strawberrysnails.github.io/steam-widgets/js/steam-mostplayed.js?steamid=YOUR_STEAM_ID"
</script>
  

  
<script
  src="https://strawberrysnails.github.io/steam-widgets/js/steam-lastplayed.js?steamid=YOUR_STEAM_ID"
  class="win98">
</script>
  

  
<script
  src="https://strawberrysnails.github.io/steam-widgets/js/steam-mostplayed.js?steamid=YOUR_STEAM_ID"
  class="win98">
</script>
  

  
<script
  src="https://strawberrysnails.github.io/steam-widgets/js/steam-lastplayed.js?steamid=YOUR_STEAM_ID"
  class="terminal">
</script>
  

  
<script
  src="https://strawberrysnails.github.io/steam-widgets/js/steam-mostplayed.js?steamid=YOUR_STEAM_ID"
  class="terminal">
</script>
  

This is a version I created using iFrames so that Neocities users with free accounts can embed the widget as well!

Please note that if you have a supporter account, it is better and more stable to use the javascript version.

Themes are unavailable for this version, however, you can customize it as much as you want.

Unstyled:

  
<iframe
  src="https://strawberrysnails.github.io/steam-widgets/iframe-ver/?steamid=YOUR_STEAM_ID&type=lastplayed"
  frameborder="0"
  scrolling="no"
  width="400"
  height="30"
  allowtransparency="true"
  title="Steam Last Played"
 ></iframe>
  

  
<iframe
  src="https://strawberrysnails.github.io/steam-widgets/iframe-ver/?steamid=YOUR_STEAM_ID&type=mostplayed"
  frameborder="0"
  scrolling="no"
  width="400"
  height="30"
  allowtransparency="true"
  title="Steam Most Played"
 ></iframe>
  

Styling Examples:

You can style the widget by wrapping it in a div, or by passing style params in the URL.

Available URL parameters:

• steamid: your Steam ID (required)
• type: lastplayed or mostplayed
• color: text color, e.g. %23ff0000 (note: encode # as %23)
• font-family: e.g. Arial, Georgia, monospace
• font-size: e.g. 14px
• center: set to 1 to center the text

For borders, backgrounds, and other container styles, wrap the iframe in a <div> and style that instead!

With a border and background:

<div style="border: 1px solid #c8a2c8;
  border-radius: 6px;
  padding: 4px 10px;
  display: inline-block;
  background: #1a1a2e;">
  <iframe
    src="https://strawberrysnails.github.io/steam-widgets/iframe-ver/?steamid=YOUR_STEAM_ID&type=lastplayed&color=%23c8a2c8&font-family=monospace&font-size=14px"
    frameborder="0"
    scrolling="no"
    width="380"
    height="40"
    allowtransparency="true"
    title="Steam Last Played"
  ></iframe>
</div>

Centered with custom font:

<div style="border: 1px dashed #888; padding: 6px; text-align: center;">
  <iframe
    src="https://strawberrysnails.github.io/steam-widgets/iframe-ver/?steamid=YOUR_STEAM_ID&type=mostplayed&color=%23ffffff&font-family=CourierNew&font-size=13px&center=1"
    frameborder="0"
    scrolling="no"
    width="100%"
    height="30"
    allowtransparency="true"
    title="Steam Most Played"
  ></iframe>
</div>