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 ist mein eigenes Spiel Astrosphere
Die Spiele ID von Astrosphere ist schon um einiges länger, da Half-Life 2 aus den Anfangszeiten von Steam stammt.
<iframe src="https://store.steampowered.com/widget/2722160" 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/2722160" 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%;
}