How To Show IP Address & Geolocation Of Website Visitors in Blogger or WordPress

Privacy and freedom are two values that no one should compromise. From anonymous web browsing with VPNs or proxy servers to anonymous electronic transactions with cryptocurrencies, online freedom is a major pursuit for internet users today.

Achieving complete anonymity online is challenging but not impossible, thanks to developers who tirelessly create new tools and apps. Most are familiar with hiding their IP address using a VPN, Tor browser, or a proxy server. However, it may be more intriguing to learn how to detect your website visitors' IP addresses and geolocation using client-side JavaScript and an HTTP API.

What is an IP Address?

An IP address, which stands for Internet Protocol address, is a unique sequence of numbers separated by periods that identifies each computer communicating over a network using the Internet Protocol. An IP address is a unique numerical label assigned to your computer by your Internet Service Provider (ISP). Every computer connected to the internet has a unique IP, and its internet activity can be tracked through this IP address.

Currently, you can retrieve client IP addresses using WebRTC, supported by browsers like Firefox, Chrome, and Opera. For comprehensive details of a user's IP address, numerous free services offer a public HTTP API.

These APIs utilize a database of IP addresses linked to cities, along with additional information such as time zone, region, postal 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 www.theinfinitescoop.in 
           
   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.