DEV Community

K3K
K3K

Posted on

๐Ÿš€ Steam MiniProfile: A Real-Time, Embeddable Steam Widget for Your Website

Hey everyone! I built Steam MiniProfile to make it super easy to display your Steam profile on any website. Whether you're a gamer, streamer, or just want to add a personal touch to your site, this lightweight widget lets you showcase your Steam avatar, username, online status, and recent gamesโ€”all in real time!

โš ๏ธ Disclaimer
This project is not affiliated with, endorsed, or sponsored by Steam or Valve Corporation. Steam MiniProfile simply fetches publicly available Steam profile data and does not use any proprietary APIs or require authentication.

๐Ÿš€ Try It Out!

I'm excited to share this with the community, and I'd love for you to try it out. You can grab the code from GitHub and integrate it into your website in minutes:

โžก๏ธ GitHub Repo: gamer2810/steam-miniprofile

๐ŸŽฎ Introduction

I wanted a simple, customizable, and fast way to embed my Steam profile without dealing with complex APIs or slow-loading widgets. Most existing solutions were either outdated or clunky, so I decided to build my own.

Perfect for gaming communities, streamers, and personal websites, this widget seamlessly integrates your Steam presence, making your site more interactive and engaging.

โšก Features at a Glance

๐Ÿ”’ Secure & No API Keys Needed โ€“ Steam MiniProfile does not require your Steam API key or credentials, making it safer to use.
โœ… Real-Time Steam Data โ€“ Fetches and updates your profile info automatically.
๐ŸŽจ Customizable UI โ€“ Modify colors, layout, and design to match your site.
๐Ÿš€ Lightweight & Fast โ€“ Optimized for performance, ensuring fast load times.
๐Ÿ”ง Easy Integration โ€“ Just drop the widget on your site and configure it with your Steam ID.
๐ŸŒ Supports Public Profiles โ€“ Works with any Steam account that has a public profile.

๐Ÿ”„ How It Works
Steam MiniProfile retrieves your Steam data using a proxy server to bypass CORS restrictions. The diagram below explains how it operates:

sequenceDiagram  
User->>+gamer2810.github.io: Get Steam Miniprofile  
loop Every 5 minutes  
    Note right of Pipedream: Glitch shuts down the CORS Server<br>every 5 minutes, so we schedule a request<br> to keep it active, ensuring fast response times.  
    Pipedream->>CORS Server: Wake up  
end  
gamer2810.github.io->>-User: Return loading miniprofile  
Note right of User: Wait for real profile to load  
gamer2810.github.io->>+CORS Server: Get real profile HTML  
Note right of CORS Server: https://glitch.com/~steam-miniprofile-cors  
CORS Server->>+Steam: Fetch profile HTML  
Steam->>-CORS Server: Return profile data  
CORS Server->>-gamer2810.github.io: Return profile HTML with CORS headers  
gamer2810.github.io-->User: Display real Steam profile
Enter fullscreen mode Exit fullscreen mode

Got feedback? Have feature requests? Found a bug? Open an issue on GitHub, and letโ€™s make this even better together!

If you integrate this tool into your site, drop a link in the comments / in the GitHub discussionโ€”Iโ€™d love to check it out!

Happy gaming! ๐ŸŽฎ

Top comments (0)