Steam Spiel als HTML-Widget in Webseite einbetten

Veröffentlicht von mario am

Wenn du ein Spieleentwickler bist oder einfach ein Steam Spiel auf deiner Webseite präsentieren willst, kannst du das mit nur wenigen Zeilen HTML einfach einbetten.

Hier im Beispiel wird Half-Life 2 eingebunden. Dabei wird ein iframe verwendet, somit sind alle Informationen wie der Preis oder das Bild immer aktuell, da diese direkt von den Steam Servern kommen.

Der HTML-Code für das Widget sieht so aus:

<iframe src="https://store.steampowered.com/widget/220" width="646" height="190" frameborder="0"></iframe>

Die URL https://store.steampowered.com/widget/ bleibt dabei immer gleich, nur die Steam Spiel ID 220 gibt an um welches Spiel es sich handelt.

Die ID des Spiels findest du auf in der URL des Spiels auf der Steam Webseite, für das Beispiel Half-Life 2 ist das: https://store.steampowered.com/app/220/HalfLife_2/

Ein anderes Beispiel wäre Cyberpunk 2077

Die Spiele ID von Cyberpunk 2077 ist schon um einiges länger, da Half-Life 2 aus den Anfangszeiten von Steam stammt.

<iframe src="https://store.steampowered.com/widget/1091500" width="646" height="190" frameborder="0"></iframe>

Widget in voller Breite

Um das Widget in voller Breite anzuzeigen kannst du das iframe in einen Div-Container stecken und mit einer ID mit CSS anpassen.

<div id="steam-widget">
	<iframe src="https://store.steampowered.com/widget/220" width="646" height="190" frameborder="0"></iframe>
</div>

Der CSS-Code sieht dann so aus:

#steam-widget {
  position: relative;
  padding-bottom: 190px;
  padding-top: 30px;
  height: 0;
  overflow: hidden;
  display:block;
}
#steam-widget iframe,
#steam-widget object,
#steam-widget embed {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

0 Kommentare

Schreibe einen Kommentar

Avatar-Platzhalter

Deine E-Mail-Adresse wird nicht veröffentlicht.

16 − 5 =

*