--> Show IP Address & Geolocation Of Website Visitors Via JavaScript | Experience Lab - Online business creation and development guide for bloggers and startups

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

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.

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

    #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>


    //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);



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



Affiliate Marketing,12,Announcement,34,Bing,9,Bitcoin,38,blog,7,Blogger Resources,42,Blogger Templates,4,blogger tricks,156,Blogging ethics,70,Blogging tips,198,Bugs and Errors,34,Business,9,Copyright Violation,9,CSS and HTMLTricks,95,Designs,8,drop down menu,7,eBook,12,Email Marketing,7,Events,30,Facebook,30,Facebook tricks,49,Google,157,Google AdSense,42,Google Analytics,7,Google Plus,51,Google Plus Tricks,38,Guest Posts,112,home,2,How To,77,Internet,1,JSON Feeds,25,Kitchen Recipes,2,Label Based Sitemap Themes,1,Make Money Online,108,Marketing,16,MBT Blogger Templates,7,Menus,1,News,146,Pages,1,Posts,10,presentations,15,Responsive,10,Reviews,7,SEO,307,Settings,6,Shortcode,15,Sitemap Themes,1,Social Media,155,Technology,7,Templates,1,Tips,2,Tools,1,Traffic Tips,80,Video,19,Web Designing,62,web hosting,18,Webmaster Tools,97,Widgets,199,wordpress,26,
Experience Lab - Online business creation and development guide for bloggers and startups: Show IP Address & Geolocation Of Website Visitors Via JavaScript
Show IP Address & Geolocation Of Website Visitors Via JavaScript
Experience Lab - Online business creation and development guide for bloggers and startups
Loaded All Posts Not found any posts VIEW ALL Readmore Reply Cancel reply Delete By Home PAGES POSTS View All RECOMMENDED FOR YOU LABEL ARCHIVE SEARCH ALL POSTS Not found any post match with your request Back Home Sunday Monday Tuesday Wednesday Thursday Friday Saturday Sun Mon Tue Wed Thu Fri Sat January February March April May June July August September October November December Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec just now 1 minute ago $$1$$ minutes ago 1 hour ago $$1$$ hours ago Yesterday $$1$$ days ago $$1$$ weeks ago more than 5 weeks ago Followers Follow THIS PREMIUM CONTENT IS LOCKED STEP 1: Share. STEP 2: Click the link you shared to unlock Copy All Code Select All Code All codes were copied to your clipboard Can not copy the codes / texts, please press [CTRL]+[C] (or CMD+C with Mac) to copy