Geolocate Blogger Visitor: Show Client's IP Address and Country to Blogger

Sometimes, you want to know how to show client's IP Address on your blog, whether in a sidebar or footer. Well, you can add client's IP address by using a few JavaScript lines and this article is all about it. In this article, you will learn how to get the client's IP address by using JavaScript fetch, save the IP into local storage, and display it in sidebar.

Let's understand fetch and local storage first.

Fetch

Fetch is a technique in JavaScript that functions to get the data from another page. To fetch a page using JavaScript, you need the URL of the page. In this case, we want to fetch a page (a geolocation API provider) with URL https://ipapi.co/json/. This page provides the Geolocation data of the client. Of course, the returned data is not only the IP address but also the country, country code, coordinates, and so forth. But in this short tutorial, I will show you how to get the client's IP address and country only.

Local Storage

Local Storage is, as the name suggests, is a storage provided by the client's browser where we can save a few temporary data to access later. We need to save the IP address to local storage so that we do not make request to IPAPI everytime the same client access our blogs or shift from one page to another page.

Complete Code

You can copy the following code and paste on your Blogger sidebar. Do not say that you have no idea of how to create a widget on your blog!

	

<div id="yourIP" style="text-align: center;"></div>
<script>
  if(!localStorage.getItem("myIp")){
    setGeo();
  }
  else{
    getGeo();
  }
  async function setGeo(){
    const geoURL = 'https://ipapi.co/json/';
    const response = await fetch(geoURL);
    const data = await response.json();
    const geoIp = data.ip;
    const geoCountry = data.country_name;
    localStorage.setItem("myIp", geoIp);
    localStorage.setItem("myCountry", geoCountry);
    location.reload();
  }
  function getGeo(){
    const myIpDiv = document.getElementById("yourIP");
    const thisIp = localStorage.getItem("myIp");
    const thisCountry = localStorage.getItem("myCountry");
    myIpDiv.innerHTML = "Your IP: " + thisIp + "<br>" + thisCountry;
  }
</script>

    

How the code works

First, the code creates a div with ID yourIP. Then, it checks whether local storage with a key myIp exists. If it exist, the code will call the function getGeo(). This function works to get the IP and country of the client from the local storage and display it in the div. Otherwise, it will call the function setGeo() that functions to fetch the given URL, save the IP address and country to the local storage, and reload the page.

When the page is reloaded, the client's IP address and country are already saved in the local storage so that the browser directly takes them and display them in the div. That way, the request is not repeated.

It is easy, isn't it? I hope that this short tutorial can help you to show the client's IP address on your blog sidebar.