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
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)