Show IP Address & Geolocation Of Website Visitors Via JavaScript

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.

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.

1. 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>         

2. 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. :)

SHARES

Share

Pin it

Tweet

Share

Share

Print

Buffer

If you don't want to get yourself into Serious Technical Trouble while editing your Blog Template then just sit back and relax and let us do the Job for you at a fairly reasonable cost. Submit your order details by Clicking Here »

Mohammad 2/14/2018