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!

3 thoughts on “How to add CoinMarketCap widgets to your webpage”

  1. You have not perfect diction. English is not a native language for me and it is difficult to understand your accent. Please add subtitles to your video. This will additionally help the automated promotion of your channel and expanding the audience. Due to the lack of subtitles, your video is hard to find on YouTube.

Leave a Reply

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