Coinbase bitcoin price ticker website widget

[WhiteBeard]

I was using a bitcoin price ticker widget to display the current bitcoin price on my website, but it stopped working, so I made my own. 

After showing them a mock-up of my plan, I got permission from coinbase to use their logo in this context.

Here is a screenshot of the final product:

After posting this on my site and announcing it to some friends, I was requested to make a narrower version.  Here is a screenshot of it:

You can view it live at Whitebeard's Cottage or get it for your own site at get widget link.

[1715017682]

1715017682

[1715017682]

1715017682

[NyeFe]

Great project,  I like your style.

Would their be a future option to customise the background colour?

[WhiteBeard]

Would their be a future option to customise the background colour?

I'll add that...

[Boosterious]

I was using a bitcoin price ticker widget to display the current bitcoin price on my website, but it stopped working, so I made my own. 

After showing them a mock-up of my plan, I got permission from coinbase to use their logo in this context.

Here is a screenshot of the final product:

After posting this on my site and announcing it to some friends, I was requested to make a narrower version.  Here is a screenshot of it:

You can view it live at Whitebeard's Cottage or get it for your own site at get widget link.

this is good news,currenctly i used bitcoin price widget from my local exchange,and now i can use coinbase bitcoin price widget,its awesome and you doing good with better appearance from my old widget,thanks.

[Pursuer]

this looks cool and simple, I liked it.
I suggest you also add different background color to it, it looks so plain in white. maybe a darker background like this can make it look better:

but in the end I prefer Coindesk widget which also has a very cool looking line on it showing the price movement of the last 60 minutes.

[WhiteBeard]

Added ability to have custom background color.

Code:

<iframe id="wbc-coinbase-ticker" src="https://www.whitebeardscottage.com/pictures/iframes/coinbase/" style='height:98px;width:222px;border:none;overflow:visible;' scrolling="no"  allowTransparency='true' tickerbackground="#fff" ></iframe>

You may customize the background color of the widget by editing the tickerbackground attribute to any legal color name, hex color number, or rgb color combination.

This info is posted on Whitebeard's Cottage for both versions.

[WhiteBeard]

Nice widget, but i have few suggestion :
- I think your widget doesn't need refresh button because i think widget should refresh bitcoin price automatically every few seconds.
- Maybe "Go to coinbase" button can be removed and make "coinbase" words become hyperlink which redirected to coinbase exchange.
- Maybe different background color or different text styles

Thanks for the suggestions!

I will add auto-update as an option.  It was not added in this version because of expressed concerns about how many instances might be polling the coinbase api at any given time, but if a site really needs that functionality, it should be there.

The title image is already a link to coinbase.com.  The "go to coinbase" button is there to make sure a user is aware that they can get to coinbase via the widget.

I will add custom font options, so it can appear native to the environment it appears in.

These are all good suggestions!  Thanks again!

[WhiteBeard]

this is good news,currenctly i used bitcoin price widget from my local exchange,and now i can use coinbase bitcoin price widget,its awesome and you doing good with better appearance from my old widget,thanks.

I hope you find it useful!  Thanks for the feedback...

[davinchi]

Nice! You just quite did a free publicity for Coinbase (as if they aren't famous enough already).

P.S. That wasn't sarcastic.
That's really simple and beautiful.

- Just like ETFbitcoin said, "go to coinbase" kind of makes it lazy. Maybe replace it with a simple "Coinbase" to make it look more professional.

- Maybe the "get widget" could go at the bottom right corner, at the smallest font size possible and a color that will not attract. I don't see it necessarily important in the widget so it could probably just go there.

[iram66680]

I like the design style as it is clean and makes it look more simple to the eyes without any distractions like wild colors or flashy flare which I think most don't appreciate anyways.
I usually just goto preev to get a price during the day but will welcome this ticker as my goto in the coming months when the price will definitely be on my mind. I am a coinbase user as well so this will help me so I don't have to fiddle around looking at other exchange's prices.

[grapevinebitcoin]

That is too cool. How hard would it be to add, say, 1% or whatever amount to what's shown? I sell bitcoins through various non-traditional methods and charge a small markup for my serviced.

[WhiteBeard]

Okay, I finally got around to adding the autoupdate option.  When autoupdate is activated the refresh button disappears, and the prices are updated every 15 seconds.
I, also, tweaked the styling a bit so it inserts more neatly into the page.
I decided not to have an option to change the font, because properly sizing fonts would require a complicated attribute structure on this simple widget.



If you wish to include this widget on your website, copy and paste the following code into a properly positioned div element:

Code:

<iframe id="wbc-coinbase-ticker" src="https://www.whitebeardscottage.com/pictures/iframes/coinbase/" style='height:90px;width:212px;border:none;overflow:visible;' scrolling="no"  tickerbackground="#fff" autoupdate="false"></iframe>

or



If you wish to include this widget on your website, copy and paste the following code into a properly positioned div element:

Code:

<iframe id="wbc-coinbase-ticker" src="https://www.whitebeardscottage.com/pictures/iframes/coinbase_narrow/" style="height:90px;width:150px;border:none;overflow:visible;" scrolling="no" tickerbackground="#fff" autoupdate="false"></iframe>

You may customize the background color of the widget by editing the tickerbackground attribute to any legal color name, hex color number, or rgb color combination.*

You may turn on automatic updating of the prices by editing the autoupdate attribute to "true". Case is important. Any other value or case will evaluate as false.*

*These attributes are optional. If they are not included, defaults of "white" and "false" will be used respectively.

This info is posted on this page at Whitebeard's Cottage or go to whitebeardscottage.com > Tools > Coinbase Website Ticker Widgets

[BitcoinNewsMagazine]

Another option is to use the CoinGecko widget:

Code:

<iframe id='widget-ticker-preview' src='//www.coingecko.com/en/widget_component/ticker/bitcoin/usd?id=bitcoin' style='border:none; height:125px; width: 275px;' scrolling='no' frameborder='0' allowTransparency='true'></iframe>

[WhiteBeard]

Another option is to use the CoinGecko widget:

If you want a general/overall price widget, yes the CoinGecko widget is a good one, as is the Coindesk widget, mentioned previously.

This widget is an exchange specific widget.

I have other widgets in development, which will give other exchanges' data.  Once I have several done I will make an exchange overview page on Whitebeard's Cottage that will include a general market widget to give an instant view of the market overall and on specific markets/regions.

[BitcoinNewsMagazine]

Another option is to use the CoinGecko widget:

If you want a general/overall price widget, yes the CoinGecko widget is a good one, as is the Coindesk widget, mentioned previously.

This widget is an exchange specific widget.

I have other widgets in development, which will give other exchanges' data.  Once I have several done I will make an exchange overview page on Whitebeard's Cottage that will include a general market widget to give an instant view of the market overall and on specific markets/regions.

It is hard to find generic auto updating bitcoin price widgets that do not advertise exchanges hence the plug for CoinGecko.

[WhiteBeard]

Okay, another improvement to make dark backgrounds more feasible, I added a pricecolor attribute.

See this page at Whitebeard's Cottage for details.

[WhiteBeard]

Was having some trouble with cross-domain loading of attributes, so I re-vamped the code.

Code:

<iframe id="wbc-coinbase-ticker" src="https://www.whitebeardscottage.com/pictures/iframes/coinbase/?tickerbackground=fff&pricecolor=000&autoupdate=false" style='height:90px;width:212px;border:none;overflow:visible;' scrolling="no"></iframe>

or for the narrow version:

Code:

<iframe id="wbc-coinbase-ticker" src="https://www.whitebeardscottage.com/pictures/iframes/coinbase_narrow/?tickerbackground=fff&pricecolor=000&autoupdate=false" style="height:90px;width:150px;border:none;overflow:visible;" scrolling="no"></iframe>

If you have been using the widget on your site or for configuration details, the updated code and details are available here:
https://www.whitebeardscottage.com/pictures/iframes/coinbase/embed.html

If you have been to this page before, you may need to force a re-load from the server.

[WhiteBeard]

Nice overview widget!  Their website http://www.coinrates.info/ doesn't say how to get this image, but it does have some nicely presented data available.

[cloverme]

I've been looking for a code snipet for a client-side conversion calculator, similar to this:
https://tools.bitcoin.com/


If anyone has run across the code, I'd be mighty obliged if you could share it. 

Thanks,
C

[Monnt]

You have an image equivalent of this, like the btc-priceimg one? This will allow us to use it on the forum. (Especially in currency exchange).