Hi everyone! This is my first development contribution on Utopian.io, and I'll be introducing a STEEM Price Widget I created here. It's an open-source HTML-based widget that allows you to add a Steem ticker to your website easily.
To use the widget, simply add this line of code anywhere on your website:
<iframe src="https://mooncryption.github.io/steem-price-widget/widget.html" width="200px" height="150px" frameBorder="0"></iframe>
Right off the bat, you can customize the width and height to make it blend more with your site, however, width must be at least 200px and height must be at least 150px for optimal results.
Even more, you can change more in-depth properties such as the border, background, text, and more using URL Parameters as shown here.
Currently, the widget looks like this:
As you can see, it's a blue-bordered rounded rectangle with a repeating/faded STEEM logo as the background. The price of STEEM is shown, centered, in a monospace/code font. The sources, credits, and terms are available at the bottom.
However, it's highly customizable. This means, by tweaking just a few URL Parameters as shown here, you can make it look like any of these:
Additionally, it's backwards-compatible. By adding the code shown above to your website, not only will the widget always work, but it will also automatically update itself when I add new releases. This means you'll always get the most pretty, most efficient, and highest performance widget.
The price algorithm is easy to change, but currently I'm relying on what I think is a uniquely accurate algorithm. The algorithm factors in unweighted price queries from three sources:
Bittrex.com - 1st Largest Steem ExchangePoloniex.com - 2nd Largest Steem ExchangeCoinmarketcap.com - Price Aggregate (factors in unpopular exchanges and more)The algorithm then outputs an unweighted average of these prices, rounded to the nearest $0.001.
With automatic/live updating, the price shown in the widget is always the most accurate representation. Every few seconds, the widget automatically queries these sources again for the most accurate and recent price, and computes the average price again. Additionally, you can click on the widget to manually force it to check these sources and compute the price again.
Of course, the widget's an active work in progress and more work is to come soon! Remember that adding the widget to your site right now means that when more updates are pushed out, you'll receive it automatically too!
border and background of the widget can be easily customized with URL Parameters, but there's more to come. Soon, the background image itself will be available to change, and the fonts of the price and text as well.i") button. When you hover over that button, the credits/sources will pop out.mooncryption/steem-price-widget and write anything you want about it. All feedback is appreciated, and contributions/pull requests are even more gracious.To learn more about how to use the widget for your website, visit the widget's site here! Thanks to Utopian you can easily add contributions to my project and help us all succeed even more!
Thanks for reading,
— 
image sources: first, all
proof of work: widget website includes link to