Have you ever wanted to be able to greet visitors to your blog or project website with a personalised greeting in their own language, or to offer content or advertising links based on the country that a visitor to your site is coming from?
Although the above is pretty self explanatory I will break down exactly what is happening a little:
Firstly create a div for each language block, with its ID set to match the expected 2 char country codes. The important part is to set the style as being display:none which means by default they are all hidden. When the script runs and pulls back a country code, the case switch block will change the visibility of one of your divs from none to block and will thus make just that div visible.
How? Well, next we call the jquery API. If you are not familiar with this API, it makes things like asynchronous (background) calls to other sites and APIs so much easier. I did start out writing this test in pure javascript but quickly decided that the extra overhead of using jquery is worth it in terms of simplicity, and lets face it blogger loads so much other stuff that one more lib isnt going to break anything!
Once jquery is loaded we can then use its $.getJSON call to grab the output from https://api.ipdata.co
This grabs the visitors ipaddr (and other details) and returns it in a JSON formatted block.
if you visit https://api.ipdata.co in your browser you will see what the return is :
As commented, you get 1500 free api queries per day, so unless your site has a lot of traffic, this is pretty much fire and forget as far as the api goes. If you do, you might consider writing out a cookie with the visitors country code when they first arrive, and check for its presence before calling the api for the geodata to save traffic.
(By the way, $.getJSON('https://api.ipdata.co?api-key={your api key}', is not a typo - if you are looking for the closing bracket its down at the bottom of the script)
You are probably wondering how we get the return from that?
well the function call on the next line : function(geodata){ collects the return from the api-call and assigns the raw json object to the variable geodata.
We dump that out to the console.log for debugging purposes. Your browser will usually offer you the ability to inspect the page and give you console log data as part of its output, but that is beyond the scope of this tutorial. If you need more info about this google is your friend :)
OK, so we assume at this point (and you might want to trap some errors if you are an advanced user and make no assumptions!) that geodata is now a JSON formatted object. This means we can use simple object orientated code to get at the info that we need - ie: the country code
And to do this we assume that geodata.country_code will contain the two char international country code conforming to ISO_3166-1, and thus we can make a simple case-switch decision tree using:
switch(geodata.country_code)
and provide a case for any countries we want to serve specific content for using:
case "GB":
//country code was == to "GB"
console.log("I say old chap!");
// toggle this visibility of the GB specific content div
UK.style.display="block";
break;
for each country code. where the case statement matches the country code, the console log simply records a suitable remark to identify the country.
The important part is UK.style.display="block";
This changes the visibility of one of the divs lower down to block, meaning it suddenly becomes visible, whereas all its counterparts remain hidden.
If none of the case statements find a match, then the default scenario is launched by making the div with the "other" id visible. This allows you to have a catchall greeting/block/advert in place for visitors from parts of the world you just didn't figure would pay your site a visit.
and that's about it as far as the javascript goes.
That all sounds complicated, but really isn't
You can experiment with any of the key and value pairs eg: currency and GBP in the same way, but beware of the actual lon/lat info reported - Im certainly not in London right now, though my ISPs core switch is. If you need finer grain geolocation info then you can look at the HTML5 geolocation system, but be aware that unlike the above script which is silent, that asking for more high resolution geo loc info via html5 will bring up a prompt in the browser for a permission.
I hope that's a help getting started with your location specific greetings I will leave you with https://www.omniglot.com/language/phrases/hello.htm and the request "do no evil". This script is not to discriminate, but to make more inclusive. I have travelled through many counties in the world now, and been welcomed in all. The sooner we realise we are all citizens of earth and that artificially created boundaries and differences are meaningless, the better for all.
If so, this short tutorial post might well help you along the way with that.
You will need to be able to edit the actual HTML content of your site or be able to paste in a and HTML/Javascript block - (which blogger supports either as a widget, or as a code edit via the main interface).
You will first need to visit http://ipdata.co and click on the button to get a free api key which will allow you to make 1500 queries per day.
The code below is pretty much all you need to get started, though you will obviously need to edit it both as far as the countries codes and the actual content you want to serve goes.
You will first need to visit http://ipdata.co and click on the button to get a free api key which will allow you to make 1500 queries per day.
The code below is pretty much all you need to get started, though you will obviously need to edit it both as far as the countries codes and the actual content you want to serve goes.
<div id="UK" style="display:none"><h1>UK based content goes here</h1></div>
<div id="US" style="display:none"><h1>US based content goes here</h1></div>
<div id="FR" style="display:none"><h1>FR based content goes here</h1></div>
<div id="other" style="display:none"><h1>other language based content goes here</h1></div>
<script src="https://code.jquery.com/jquery-3.2.1.min.js">
//load jquery which makes this much easier!
</script>
<script>
// put in an API call to ipdata.co to get the users location data
$.getJSON('https://api.ipdata.co?api-key={your api key}',
function(geodata) {
// dump the result out to the console log for debug
console.log(geodata);
// now we can make some choices (you can get a fulllist of country codes here : https://en.wikipedia.org/wiki/ISO_3166-1)
switch(geodata.country_code) {
case "GB":
//country code was == to "GB"
console.log("I say old chap!");
// toggle this visibility of the GB specific content div
UK.style.display="block";
break;
case "US":
console.log("Howdy partner!");
// toggle this visibility of the US specific content div
US.style.display="block";
break;
case "FR":
console.log("Bonjour!");
// toggle this visibility of the FR specific content div
FR.style.display="block";
break;
// add more to suit if needed!
default:
// toggle this visibility of the catchall div
console.log("Hello!!");
other.style.display="block";
}
});
</script>
Although the above is pretty self explanatory I will break down exactly what is happening a little:
Firstly create a div for each language block, with its ID set to match the expected 2 char country codes. The important part is to set the style as being display:none which means by default they are all hidden. When the script runs and pulls back a country code, the case switch block will change the visibility of one of your divs from none to block and will thus make just that div visible.
How? Well, next we call the jquery API. If you are not familiar with this API, it makes things like asynchronous (background) calls to other sites and APIs so much easier. I did start out writing this test in pure javascript but quickly decided that the extra overhead of using jquery is worth it in terms of simplicity, and lets face it blogger loads so much other stuff that one more lib isnt going to break anything!
Once jquery is loaded we can then use its $.getJSON call to grab the output from https://api.ipdata.co
This grabs the visitors ipaddr (and other details) and returns it in a JSON formatted block.
if you visit https://api.ipdata.co in your browser you will see what the return is :
{
"ip": "x.x.x.x "city": "London",
"region": "England",
"region_code": "ENG",
"country_name": "United Kingdom",
"country_code": "GB",
"continent_name": "Europe",
"continent_code": "EU",
"latitude": 51.5142,
"longitude": -0.0931,
"asn": "AS60339",
"organisation": "BT Internet"; "postal": "EC2V",
"currency": "GBP",
"currency_symbol": "\u00a3",
"calling_code": "44",
"flag": "https://ipdata.co/flags/gb.png",
"emoji_flag": "\ud83c\uddec\ud83c\udde7",
"time_zone": "Europe/London",
"utc_offset": "+0100",
"is_eu": true,
"suspicious_factors": {
"is_tor": false
}
}
Essentially a list of parameters about your location - based on your public ip address, in a JSON format. If you are not familiar with json have a look at https://en.wikipedia.org/wiki/Json basically json is a language independent data format much like XML, which is very commonly used in web systems to communicate data between systems using API calls. It obeys a machine and human readable structure meaning that you can look at its output and understand it, and more importantly javascript can parse it and extract data.As commented, you get 1500 free api queries per day, so unless your site has a lot of traffic, this is pretty much fire and forget as far as the api goes. If you do, you might consider writing out a cookie with the visitors country code when they first arrive, and check for its presence before calling the api for the geodata to save traffic.
(By the way, $.getJSON('https://api.ipdata.co?api-key={your api key}', is not a typo - if you are looking for the closing bracket its down at the bottom of the script)
You are probably wondering how we get the return from that?
well the function call on the next line : function(geodata){ collects the return from the api-call and assigns the raw json object to the variable geodata.
We dump that out to the console.log for debugging purposes. Your browser will usually offer you the ability to inspect the page and give you console log data as part of its output, but that is beyond the scope of this tutorial. If you need more info about this google is your friend :)
OK, so we assume at this point (and you might want to trap some errors if you are an advanced user and make no assumptions!) that geodata is now a JSON formatted object. This means we can use simple object orientated code to get at the info that we need - ie: the country code
And to do this we assume that geodata.country_code will contain the two char international country code conforming to ISO_3166-1, and thus we can make a simple case-switch decision tree using:
switch(geodata.country_code)
and provide a case for any countries we want to serve specific content for using:
case "GB":
//country code was == to "GB"
console.log("I say old chap!");
// toggle this visibility of the GB specific content div
UK.style.display="block";
break;
for each country code. where the case statement matches the country code, the console log simply records a suitable remark to identify the country.
The important part is UK.style.display="block";
This changes the visibility of one of the divs lower down to block, meaning it suddenly becomes visible, whereas all its counterparts remain hidden.
If none of the case statements find a match, then the default scenario is launched by making the div with the "other" id visible. This allows you to have a catchall greeting/block/advert in place for visitors from parts of the world you just didn't figure would pay your site a visit.
and that's about it as far as the javascript goes.
That all sounds complicated, but really isn't
You can experiment with any of the key and value pairs eg: currency and GBP in the same way, but beware of the actual lon/lat info reported - Im certainly not in London right now, though my ISPs core switch is. If you need finer grain geolocation info then you can look at the HTML5 geolocation system, but be aware that unlike the above script which is silent, that asking for more high resolution geo loc info via html5 will bring up a prompt in the browser for a permission.
I hope that's a help getting started with your location specific greetings I will leave you with https://www.omniglot.com/language/phrases/hello.htm and the request "do no evil". This script is not to discriminate, but to make more inclusive. I have travelled through many counties in the world now, and been welcomed in all. The sooner we realise we are all citizens of earth and that artificially created boundaries and differences are meaningless, the better for all.
