How to add CoinMarketCap widgets to your webpage


Alright, Welcome back!
This video is created in response to the request from Suman Kumar
to create a website using
coinmarketcap widgets
So, lets get started
Before we begin, I just want to mention that you don’t have to
cal me Sir. You can just call me Karthik
and that should be fine.
again, am just a random guy on the internet. So,
you dont have to call me sir, you can just call me by my name.
That should be fine.
Alright, this is the website where you can create your,
customize your widget so to speak
you must already be familiar with this
if not I’ll walk you through all the options.
So this is how the widget would look like when you embed it on your page.
The way it would work is you would have to customize all these options here.
and you would get a real time
view of how the widget would look like on this section.
and this is the code for these options
okay, so let”s try to change
let’s try to add different settings
so, I’ll select Ethereum.
yeah, I’ll select ETH and
you can see that it immediately changed to Ethereum.
and the rank is 2.
If you don’t want to show the rank, you can deselect this option.
andit automatically disappears.
and …. yeah …. you can play around with these settings.
and this is how the final page would look like. I’ll show you how you can embed
this on your own website. okay.
Alright, am using “Brackets” as my
text editor but you can do it anywhere.
Let me create an empty html file. I’ll call it index
dot html.
and then I’ll just initialize my html page.
That’s it.
and
I need a head tag
Again, there are easier alternatives available
in the market, for free but this
is how I do it and this is what am used to.
So, I’m just initializing all the different tags.
and I just need a script tag.
So it’s going to be really straight forward. All you have to do is
just copy this code and paste it
on your website. So, this is my webpage.
so I can just paste it here. and
if you observer closely there are two tags. I should not do it in the script tag,
sorry! I have to do it inside
the body tag or head tag
If you observer closely, there are two tags.One is a script tag
and the other one is a div tag.
Let me separate these out so that you see it clearly.
Okay, so this is script tag and the other one is div tag.
The script tag is common for any
ticker that you add, So you don’t have to copy this
every single time. So you can just cut it
and paste it in the header section.
So you only have to copy this div tag
whenever you want to add a new
widget on your website.
That’s it. It’s that simple.I’ll just add
I’ll just open this page in the browser and show you
How it would look like.
Okay. I have the page open in the browser.
And this is how the ticker looks like.
Its actually quite similar
but you can see that that its quite stretched out. and it doesn’t
have the same dimensions
same width and height as shown here.
So you can customize those settings. I’ll show you in a minute how to do that.
So
Typically, what I use to customize the layout is bootstrap 4.
or you can use the materialize design. In this video
I’ll show you how you can use bootstrap 4 and
quite easily you can customize the layout.
and you can add several widgets on the same page.
so , let me do that.
Okay, first thing that am going to do it add some
add all bootstrap related
CDNs. CDN is nothing but a javascript
library that supports
that is built specifically for a particular module.
So bootstrap is a module, if you ware not
familiar with what Bootstrap is, its nothing but a module
that allows you to customize front end layouts
So am going to show how to use bootstrap
to customize the layout. All you have to do is
include these libraries first as I did on the top.
and then you can create rows and columns
using simple div tags.
First, I’ll just create a div tag
and the first tag should be container.
Okay.
Inside that, create another div tag.
and I’ll call it row. class=”row”
So the way bootstrap works is we specify these different different classes
and the libraries that we specified here
would take care of all the layout.
design internally. So all we have to do it pass the
appropriate class and appropriate tag
and everything else is taken care by these CDNs.
or these libraries that we added.
By default we create a container and then
we create a row. Inside that we
add these
tickers.

This is a row. right ? You must be familiar with what rows and columns are.
If you are familiar with table structure, you have different rows
and different columns. So I want to create
let’s see
I have a 1920*1080p monitor.
Let me try to add 5
Five tickers in 1 row.
Let me just copy this and paste it 5 times.
okay.
Let me refresh this.
Its not fitting in. I’ll just add 4.
sorry, I’ll just have to delete this.
refresh.
that’s it.
These are added. And you can change these
indicators. For E.g. all you see is Ethereum, right ?
If I want to add something else, I can just select Bitcoin.
Okay. And …I’ll select this.
I just have to copy the div class.
not the script tag.
I’ll just replace it with this one
Let me refresh the page
Now you’ll see Bitcoin on the right hand side. So you can add any
indicators sorry, tickers that you want over here.
And they will show up on your webpage.
One thing to keep in mind is that these are not
refreshed automatically. So you have to reload the page
every few seconds.
In order to have the recent or the most updated
values. And … to do that its quite simple.
we can do that in just 1 line of code.
so lets try to do it.
In the script tag.
am going to
create something called SetInterval and
In “Set Interval” we can pass a function that
runs every few secs. So am going to pass an
anonymous function
and inside the function, I’ll say
location.reload()
and, it takes in another parameter.
which is the frequency.
and this is specified in milliseconds.
I want to refresh the page every , lets say, 15 secs.
15 times. each second is
1000 milli seconds. So I’ll put in 1000

So what this line of code means is that
it executes this function every
15 secs, and inside this function
we are reloading the page. So, what it means is that
every 15 secs the page gets reloaded.
I’ll change it to 3 secs to demonstrate how this works.
Let me refresh the page. And,
You should notice that after 3 secs the page should be reloaded automatically.
yeah, it just happened.
depending on your requirement, you can put in
appropriate refresh timer, and
you can add different rows and columns in this way.
Let me try to add another row. This is one row. right ?
I can add another row by just copying and pasting here.
Now you should see 2 rows of data,
See, its that simple.
Alright, one last thing that I want to explain is that
this code
would work
only when you don’t have
Ad Block plus extension installed in your browser.
I want to walk you through
some steps that you have to do, if you have
Ad Block Plus(ABP) installed. Let me turn on ABP
and come right back. and show you what happens
when you have that extension installed. Alright, ABP
in ON. Now when I refresh
the page, you would see that these tickers
would not appear. So let me refresh.
You can see that nothing comes up and if I click F12
which is the debugger console, you can see that these are blocked
by the client. So whats happening is that ABP
is treating these tickers as
spam or add and its trying to
block these requests. So we have to find a way to
exclude or filter out these
urls from ABP. Am going to show you how to do that.
So these are the 3 urls that you have to include
in your exception filter in ABP.
For the tickers to work. Now, you might wonder
How did I come up with these urls ? How do I know
these are the ones that I have to enable. Its simple.
What I do is I refresh the page and whenever I see some url
here, I just filter it out. It’s that simple.
So let me try to do it manually so that you would understand how I came up with these
and if you don’t really care about these, I’ll leave
all these 3 urls in the description box.
so that you can access them directly.
So first when I refresh the page, I see this url.
I’ll just copy this.
let me try to zoom in so that you can see
the url clearly.
you can see the url now. I’ll just copy the url.
and
Go to ABP
left click on it and then go to “Settings”
then go to “Advanced” and on the bottom
you see “My Filter List”. click on
“Start Creating my Fillter List”. Here the way to specify is
@@ …
It’s just the convention. I just read some documentation. You have to
two @s before starting the url.
That is my first filter. Am going to
save it.
Let me refresh the page.
Click on “Refresh”.
We got some new urls.
We have to exclude these. Let me copy this
first one, you can see that,
All these 4 urls are the same, but
you see
you see 4
errors because we have added 4
tickers on the page. So am just going to.
this one and edit the filter
@@ and paste the url.
Now you can see that it looks like a REST api call. right ?
you can see the reference=”WIDGET’ and convert=”USD”.
and the ticker is 1027 something, so
There are thousands of
coins on coinmarketcap. You should not.
paste this entire url. Instead, you have to
filter from here.
The reason I truncated the url is because
the url contains several filters. So if we
include the full url and try to add another widget
That would fail because the url would be different for that
that ticker. So when we truncate it to here.
it includes all the urls
all the filters or all the parameters that fall under
widgets.coinmarketcap.com. I hope it is clear.
Let me save it.
Let me refresh the page.
Okay, now we can see
the tickers , but
the image is not showing up. right ? That’s because there is
another url that we have to enable. Let me
zoom out a little bit.
Let me copy this.
and go to the filters.
Edit filter=>@@ + paste
same thing here. We have to remove
a portion of the url
I’ll do it up to here.
click on Save.
Refresh the page.
Awesome, we don’t see any errors now. Close the console.
It works!
Even if you have
ABP installed, all you have to do is just
paste these three urls in your filter list.
and this should work automatically.
and inorder to have the latest data, you have to
reload the page every few seconds.
That’s it for this video. I hope you found this informative.
If you have any requests or
any questions, leave them in the comment section.
If you want to send any video requests you can send them to me
at y email address that is about to
pop up on the screen. Alright, have a good one!
Talk to you in the next video. Bye for now!

Add a Comment

Your email address will not be published. Required fields are marked *