Blog: Adding a BCH and BTC Price to your website

Adding a BCH and BTC price is easy as adding a text to your website, before the tutorial, what is BCH and BTC?

Bitcoin (₿) is a cryptocurrency invented in 2008 by an unknown person or group of people using the name Satoshi Nakamoto and started in 2009 when its implementation was released as open-source software while BCH or Bitcoin Cash is a cryptocurrency that is a fork of Bitcoin. Bitcoin Cash is a spin-off or altcoin that was created in 2017 (source: Wikipedia)

So let's go back to the main topic, there will be a two-method in adding a BCH and BTC price in real-time which means it changes per minutes or seconds if you want to see an example you may check my website here at https://markydaily.weebly.com.

FIRST METHOD

Free BCH/BTC Widgets (Customizable)

Bitcoin Cash and Bitcoin widget, if you search that up there will be a lot of widgets available on the internet, I will list down the top 4 best widgets of all time and they are:

• Bitcoin cash Official Widget List - Since we are talking about the BCH and BTC widgets, it is best to list this site as the first because they are focusing on the BCH and BTC, they have a list of widgets for both BCH and BTC, you can check it up by yourself or click the link here: https://tools.bitcoin.com/widgets

• Coinlore - If you want a more formal crypto prize index you should choose this site as your widget, it also gives you more option, you can change the color of text and number, you can also show or hide the rankings, market cap, and many more, the way they manage to make this easy to understand and more formal is the best for me if you want to check the site click the link here: https://www.coinlore.com/coin/bitcoin-cash/price-ticker-widget

• Coinmarketcap - this will be the third one since the widget they provide is not only BCH and BTC but also ETH and other more cryptocurrencies, you can choose whatever cryptocurrency you like to show, you can customize your widget like if you want to Show Primary Ticker Symbol?, Show Rank?, Show Market Cap?, Show Volume (24h)? or Show MCAP/Volume Ticker Symbol? all of that option is available in this website to check out the widgets click the link here: https://coinmarketcap.com/widget/ticker/

• CryptoGround - Going on number four is CryptoGround, if you want a more compact and small size of the price index, you may check this site out, it also gives you a chance to pick any cryptocurrency you want to show on your website, the only bad at this widget is that you cant customize the color and the design of it, to know more check the site here: https://www.cryptoground.com/bitcoin-cash/widgets

Tutorial

I will try my best to explain the easiest way to add free widgets from another site.

1. Copy Your Chosen Widget In choosing a widget you must know where or what kind of widget is suitablebin your website theme, the code must be look like this:

<script type="text/javascript" src="https://widget.coinlore.com/widgets/new-widget.js"></script><div class="coinlore-coin-widget" data-mcap="1" data-mcurrency="usd" data-d7="1" data-cwidth="100%" data-rank="1" data-vol="1" data-id="bitcoin-cash" data-bcolor="#fff" data-tcolor="#333" data-ccolor="#333" data-pcolor="#333"></div>

1. Paste it through embed settings If you are using a free website you can easily add embed settings in your website, for example in Weebly, on the left side I have embed settings, I will add it somewhere on my page and then simply add the code and it will show up. Photo tutorial here:

• but if you are using a website that you made, you need to locate the position where you want to see the widget, you can also add the CSS script in your header and then manually add the divider in the body. and then save it, and you're done!
  

2ND METHOD

Add BCH price index using iframe

In this method, you need at least a little bit of knowledge about HTTP or you have a logical understanding in using this iframe method, in my site I used an Iframe method since I don't want to see any website name on my site.

The code is as simple as this one

Header Code

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <style type="text/css">

#container{
width:0px ;
height:0px;
border:0px solid #fff;
overflow:hidden;
margin:auto;
}

#container iframe {
width:0px;
height:0px;
margin-left: 0px;
margin-top:0px;
border:0 solid;
}

</style>

Body Code

<div id="container">
<iframe src="website.com" scrolling="no"></iframe>
</div>

You are only allowed to edit some of the code, please refer to the instruction below

#container{
width:0px ;
height:0px;
border:0px solid #fff;
overflow:hidden;
margin:auto;
}

#container - You can customize this text to what you want to add, you can add like #bitcoinchart
width:0px ; - this is the main width outside the iframe, this will be the main width of your iframe
height:0px; - same as the main width, this will be the main height
border:0px solid #fff; you can edit the border, if you want to show the frame border just edit the 0 to 1 , you can also change the color by changing the #fff

#container iframe {
width:0px;
height:0px;
margin-left: 0px;
margin-top:0px;
border:0 solid;
}

#container iframe - make sure to change the #container if you change the the name of it
width:0px; - you can choose the width inside the iframe, its something like when you view the webpage in browser the width will possibly about 1200 - 1500 and when you view it in mobile, you need to edit the width about 500 - 600 (possible)
height:1000px; - this is the same as the width
margin-left: 0px; - this one is the proportion from left to right
margin-top: 0px; - this one is the proportion from top to bottom

You need to know the proportion of website widgets to get the right view of the widget you want.

Example:

You are using a weebly website
Hover your mouse to theme

On your left side click the edit HTML/CSS

Under header folder click header.html then simply add <head> code and make sure to add the <meta> code above the <style>

under the <head> I will add the <body> code under the logo <div>

I also added the <div id="logo"> since when I add the divider for the BCH price it destroys the whole navigation so adding a new logo divider will make the HTML code make it easier to understand where I want to add the BCH and BTC price Iframe

Once you understand that, you can easily add the code to your site. To make the two methods simpler, please read the instruction and information below

Tutorial

• Method 1
  Choose Widget
  Add embed Settings
  Paste the code

• Method 2
  Choose a site
  Choose the proportion
  Edit the code given
  Paste the <head> code inside the header
  Paste the <body> code inside the body

Strength (+) and Weaknesses (-)

• Method 1
  + The easiest way to add Widget
  + Option to edit the color, design, and crypto type
  - Noneditable size
  - with a watermark
  

• Method 2
  + No watermark
  + Customizable size
  + Customizable proportion
  - Hard to find the proportion (If you don't have background knowledge about basic HTML and CSS)
  - Cannot customize the background color
  - Cannot edit the color of the text
  - Once the website changes the theme, you need to find the proportion again

And that is my blog for today, I hope it helps you a lot.

Enjoy reading?

Please subscribe it's free and you can always change your mind, if you want to read more please kindly visit my website here: https://markydaily.weebly.com/

I'm accepting Sponsors now!