Show IP Address & Geolocation Of Website Visitors Via JavaScript

Posted: 14 Feb 2018 04:57 AM PST

Privacy and freedom are two things no one can compromise for anything. From anonymous web browsing using VPN or proxy servers to anonymous electronic transactions via cryptocurrencies, online freedom is the biggest quest of internet users today.

show IP address using javascript

Achieving complete anonymity online is difficult but not impossible thanks to developers working hard to introduce new tools and apps every other day. I am sure you all know how to hide your IP address using a VPN server, Tor browser or any proxy server but what may seem more appealing to you would be understanding how can you find out your website visitor's IP addresses and geolocation using plain client-side JavaScript and HTTP API.

What is IP address?

IP address stands for Internet Protocol address which is a unique string of numbers separated by full stops that identifies each computer using the Internet Protocol to communicate over a distributed network.

IP address is a unique numerical address assigned to your computer by your Internet Service Provider (ISP). Every computer connected to internet has a unique IP and its internet activity can easily be tacked through its IP address.

At present you can easily retrieve useful client IP addresses using WebRTC that is supported by browsers such as Firefox, Chrome and Opera. But to fetch full details of a user's IP address there are tons of free services that provide a public HTTP API.

These APIs uses a database of IP addresses that are associated to cities along with other relevant information like time zone, region, zip code, latitude and longitude.

How To Show Site Visitor IP address and Geolocation?

I am using the free HTTP API provided by freegeoip.net site. We will make a simple ajax call to freegeoip to fetch the JSON data and parse JSON as text in plain JavaScript. The data is requested from the server using XMLHttpRequest().

DEMO: A Yellow load bar will appear followed by a table displaying full details of your public IP address and geographical location.

Loading your location details, please wait.........

Liked it? Let's learn how to add this cool JS tool to your blogger blog or wordpress blog to show visitors data in real time.

You can show this IP table anywhere you want, may it be your blog post, a static page or blog sidebar.

Copy the code below and paste it inside the HTML editor of your blog theme or blog editor

 <style>           
#loaderip {margin:10px;padding:20px; background:yellow; font-size:30px; }           
table.custom, table.custom2{width:100%;font-family:helvetica;border-spacing: 0;border: 0px solid #bbb;}table.custom,table.custom th,table.custom td, table.custom2 th, table.custom2 td{border:1px solid #ddd;border-collapse:collapse}table.custom td, table.custom2 td{padding:15px; min-width:100px;}th{padding:7px 10px;text-align:left;font-family:oswald;font-weight:400; font-size:16px;}table.custom tr:nth-child(odd), table.custom2 tr:nth-child(odd){background-color:#f1f1f1}table.custom tr:nth-child(even), table.custom2 tr:nth-child(even){background-color:#fff}table.custom th{background-color:#333;color:#fff;border:1px solid #333}table.custom th:nth-child(even){background-color:#555}           
table.custom2 th{background-color:#7dc733;color:#fff;border:1px solid #6fc415}table.custom2 th:nth-child(even){background-color:rgba(111, 196, 21, 0.75)}           
table.custom2 td:nth-child(odd){font-family: oswald;width: 43%;}           
table.custom2 th:hover {background-color: #6fc415;}</style>       
<div id="loaderip">Loading your location details, please wait.........</div>           
<div id="demo"></div>  
<script>          
//Show IP address my mybloggertricks.com           
var hideloader = document.getElementById("loaderip");           
var xmlhttp = new XMLHttpRequest();           
xmlhttp.onreadystatechange = function() {           
    if (this.readyState == 4 && this.status == 200) {   
        var myip = JSON.parse(this.responseText);   
        document.getElementById("demo").innerHTML = '<table class="custom" border="0" cellspacing="0" cellpadding="0" width="590"><tbody><tr><td colspan="2"><p align="center"><font size="3"><b>Your IP Address is ➔</b> </font><strong><font color="#008000" size="5">'+myip.ip+'</font></strong></p></td></tr><tr><td valign="top" width="295">Your Public IP</td><td valign="top" width="295">'+myip.ip+'</td></tr><tr><td valign="top" width="295">Country Code</td><td valign="top" width="295">'+myip.country_code+'</td></tr> <tr> <td valign="top" width="295">Country</td> <td valign="top" width="295">'+myip.country_name+'</td> </tr> <tr> <td valign="top" width="295">Region</td> <td valign="top" width="295">'+myip.region_name+'</td> </tr> <tr> <td valign="top" width="295"> City </td> <td valign="top" width="295">'+myip.city+'</td> </tr> <tr> <td valign="top" width="295">Region Code</td> <td valign="top" width="295">'+myip.region_code+'</td> </tr> <tr> <td valign="top" width="295">Zip Code</td> <td valign="top" width="295">'+myip.zip_code+'</td> </tr> <tr> <td valign="top" width="295">Time Zone </td> <td valign="top" width="295">'+myip.time_zone+'</td> </tr> <tr> <td valign="top" width="295">Latitude</td> <td valign="top" width="295">'+myip.latitude+'</td> </tr> <tr> <td valign="top" width="295">Longitude</td> <td valign="top" width="295">'+myip.longitude+'</td> </tr>  </tbody></table>';      
        hideloader.style.display='none';     }    
};        
xmlhttp.open("GET", "https://freegeoip.net/json/", true);         
xmlhttp.send();   
</script>

Save your theme and you are all done!

Feel free to use it in your development projects or apps. Do share your queries or feedback in the comment box below.

Stay tuned for our biggest research paper on anonymous peer-to-peer electronic currencies i.e. Bitcoin on our coming posts. A lot of exciting tutorials are on its way. :)