Geolocation Click Redirection

One of the affiliate offers I participate in redirects visitors to their website to their country specific based websites which is great for the user, not so great for me because when the user is redirected the affiliate cookie is lost and I don’t get credit for the sale. Each country has their own affiliate program so it is possible to get credit for any sales that happen on those country specific sites, but the redirect has to happen before the user visits the main company website where they redirect the user.

While it is possible to create country specific landing pages for each country there is always the chance that a visitor from one of those other countries will still click on a link that would take them to the main company website. To prevent this from happening I have installed a script to check geolocation and redirect the user to the appropriate country specific website instead of them going to the main companies website and being redirected.

Eric Nagel has a PHP script you can use to do something similar, and while his method would work the thought of having to maintain the IP Geolocation database, even through a cron job, just sounds like trouble to me. Not to mention some shared web hosts don’t allow you to run cron jobs or to run a cron job that unzips a file.

The solution I came up with relies on the service Cloudflare. I wrote a post about Cloudflare earlier this year. Cloudflare has this neat little feature called Geolocation where they will add in a server variable that you can access with PHP calle $_SERVER[“HTTP_CF_IPCOUNTRY”]. Once you turn the feature on in Cloudflare all the requests to your Cloudflare enabled website will contain the country code of the user.

All you have to do then is create a PHP redirect script that checks for the Cloudflare variable and redirect the user to the correct link.

Here is a copy of what I use to redirect users.


<?php

$country_code = $_SERVER["HTTP_CF_IPCOUNTRY"];

if ($country_code=="UK") {
$link = 'Insert UK Link';
}
elseif ($country_code=="FR") {
$link = 'Insert France Link';
}
elseif ($country_code=="DE") {
$link = 'Insert Germany Link';
}
else {
$link = 'Insert Default Link';
}

header("location:$link");
exit;

?>

A word of warning, for some users in the UK their country code is returned as UK and others are GB so you might want an extra check for both codes.

I was already redirecting people through this link to help manage my links, this just adds an extra level to that redirect. It has already paid off making sure that users from the countries I specified were redirected to the correct website for them. I currently have this redirect installed on a shared server with the website added to Cloudflare.

If you need to know specific country codes Wikipedia has a list that you can use.

This is a pretty simple method and Cloudflare takes care of maintaining the IP Geolocation database for you. Of course you could do more sophisticated things than this but this gets the job done for me.

Blocking WordPress Blog Spam with .htaccess

While I am a fan of Monty Python’s Spam skit, I am not a fan of automated WordPress spam, and it seems to be getting worse every day. Of course the large majority of WordPress comment spam is just automated comments posting directly to the WordPress wp-comments-post.php file. I have used different methods in the past but recently came across a way to help keep the spammers away.

While there are many very good plugins available for WordPress to help keep spam down, sometimes the best method is to use your we server to block it in the first place. Thanks to a very helpful post on the V7N forum here is a way that you can block a large portion of automated comment spam using your .htaccess file.

Before you add these six lines of code to your .htaccess file on the root of your WordPress installation be sure to make a copy, just in case something goes wrong. The wp-comments-post.php file is located in the root of your WordPress install so you need to add this code to the main .htaccess file. If you have pretty permalinks turned on you probably will not need the “RewriteEngine On” line, since pretty permalinks already turns that on.

RewriteEngine On
RewriteCond %{REQUEST_METHOD} POST
RewriteCond %{REQUEST_URI} .wp-comments-post\.php*
RewriteCond %{HTTP_REFERER} !.*yourdomain.com.* [OR]
RewriteCond %{HTTP_USER_AGENT} ^$
RewriteRule (.*) http://%{REMOTE_ADDR}/$ [R=301,L]

Anyways the code basically does this. It checks for someone posting directly to the wp-comments-post.php file, which automated spam bots do, and if the referrer is not your domain it redirects that request back to the IP address of of where the request came from.

I have been testing this out for a few days now and I am pleased to say that the amount of spam that has made it through is significantly down. It is not all gone, and there is still some making it through, but the percentage has decreased significantly. You will still need to run Akismet to catch the spam that is done by real people but this can help lower the load on your WordPress site from the automated spam bots.

If spam has your WordPress website swamped give this a try and see if it helps to turn the tide in your favour a little bit.

After you have done that take a break and enjoy the Monty Python Spam skit.

Htaccess Tools

If you want to save some time editing your .htaccess file check out Htaccess Tools. It has some great .htaccess generators to help save you some time. Generators include:

  • Htpasswd Generator
  • Htaccess Authentication
  • Hotlink protection of images
  • Block IPs with .htaccess
  • Block hitbots with .htaccess
  • Error Document
  • Redirection by Language

While you can do all of these things without using an online generator, I have found that for some people using an online generator like the ones available here enables people to manage their websites more. Perhaps one of the most useful generators available on the site is the hotlink image protection. By using hotlink image protection you will be able to save on your bandwidth and prevent other websites using your images directly.

LGR Photo Discontinued

Many years ago I wrote a quick PHP script to help me create a simple HTML photo gallery from JPG images. I released it as LGR Photo and gave it away for free. It was a great little gallery and did what I needed it to do. I made it mainly for my own purposes but many others downloaded it and found it useful. I have been wanting to rewrite the script for quite sometime now, but it never seemed to make it onto the list of things to do. That being said I think it is time to simply retire LGR Photo.

If people are interested in using the script I will offer it here still for download. You are welcome to use it, rewrite it, play with it etc, but I can no longer offer support for it.

Download LGR Photo

If you want to know more about the script here is some information that I had up about the script.

Features

LGR Photo Gallery is a photo gallery script written in PHP. The current version has the following features:

  • Easy Installation. A basic install on LGR Photo using the defaults should only take as long as it takes you to download it, unzip it, and upload it and some photos to your web server.
  • Uses the GD Libraries to dynamically create thumbnails from your photos.
  • Reads EXIF comment information from photos and displays the comment under the photo.
  • Next and Previous thumbnail images when browsing photos.
  • Table columns and rows adjustable.
  • Cascading Style Sheet used for presentation.
  • Easy to insert your custom header and footer files for complete web site integration.
  • Easy to insert into an existing web site. Allows for many different layout configurations.
  • Can use Javascript to pop open photos in a new window.
  • Creates albums from folder structure. Number of sub albums only limited by the operating system.
  • Not bloatware! Only two files for a quick and easy install. Perfect for home networks and to share photos with friends and family over the internet.
  • Simple slideshow component included with a basic install.
  • Valid XHTML and CSS in default install.
  • FREE! What more can you ask for.

Requirements

The following are the requirements to run LGR Photo on your server/computer.

  • A web server that supports PHP.
  • Any operating system that can run a web server and PHP.
  • PHP Version 4.3.3 and up.
  • GD Libraries are required to create thumbnails.
  • EXIF support enabled if you want to display EXIF comment information.
  • Currently only supports jpg files.

To make LGR Photo blend in more with your web site you will need to have some knowledge of:

  • XHTML
  • Cascading Style Sheets (CSS)
  • Some time to sit and play with it.

Basic HTML – ASCII HTML Codes

I am always amazed at how often I come back to a table of ASCII HTML codes that I have on my computer. ASCII HTML codes allow you to enter characters into a web page that are not found on you keyboard. The codes can also be very useful for entering characters for other languages, special characters and you can use them just for fun. You can even use many of the these ASCII HTML codes on Twitter so you can send that special some one a ♥ on Valentines Day or their Birthday.

Hope this reference helps you. I usually only use the HTML codes so that is what I have in the table.

Symbol HTML Number HTML Name Description
 

!

#

$

%

&

(

)

*

+

,

.

/




&#32;

&#33;

&#34;

&#35;

&#36;

&#37;

&#38;

&#39;

&#40;

&#41;

&#42;

&#43;

&#44;

&#45;

&#46;

&#47;
 
 
 
 

 

 

&quot;

 

 

 

&amp;

 

 

 

 

 

 

 

 

 
&spades;
&clubs;
&hearts;
&diams;

space

exclamation point

double quotes

number sign

dollar sign

percent sign

ampersand

single quote

opening parenthesis

closing parenthesis

asterisk

plus sign

comma

minus sign – hyphen

period

slash

black spade suit
black club suit
black heart suit
black diamond suit

Symbol HTML Number HTML Name Description
0

1

2

3

4

5

6

7

8

9

:

;

<

=

>

?

&#48;

&#49;

&#50;

&#51;

&#52;

&#53;

&#54;

&#55;

&#56;

&#57;

&#58;

&#59;

&#60;

&#61;

&#62;

&#63;

 

 

 

 

 

 

 

 

 

 

 

 

&lt;

 

&gt;

 

zero

one

two

three

four

five

six

seven

eight

nine

colon

semicolon

less than sign

equal sign

greater than sign

question mark

Symbol HTML Number HTML Name Description
@

A

B

C

D

E

F

G

H

I

J

K

L

M

N

O

&#64;

&#65;

&#66;

&#67;

&#68;

&#69;

&#70;

&#71;

&#72;

&#73;

&#74;

&#75;

&#76;

&#77;

&#78;

&#79;

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

at symbol

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Symbol HTML Number HTML Name Description
P

Q

R

S

T

U

V

W

X

Y

Z

[

\

]

^

_

&#80;

&#81;

&#82;

&#83;

&#84;

&#85;

&#86;

&#87;

&#88;

&#89;

&#90;

&#91;

&#92;

&#93;

&#94;

&#95;

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

opening bracket

backslash

closing bracket

caret – circumflex

underscore

Symbol HTML Number HTML Name Description
`

a

b

c

d

e

f

g

h

i

j

k

l

m

n

o

&#96;

&#97;

&#98;

&#99;

&#100;

&#101;

&#102;

&#103;

&#104;

&#105;

&#106;

&#107;

&#108;

&#109;

&#110;

&#111;

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

grave accent

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Symbol HTML Number HTML Name Description
p

q

r

s

t

u

v

w

x

y

z

{

|

}

~

 

&#112;

&#113;

&#114;

&#115;

&#116;

&#117;

&#118;

&#119;

&#120;

&#121;

&#122;

&#123;

&#124;

&#125;

&#126;

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

opening brace

vertical bar

closing brace

equivalency sign – tilde

(not defined in HTML 4 standard)

Symbol HTML Number HTML Name Description
 

¡

¢

£

¤

¥

¦

§

¨

©

ª

«

¬

­

®

¯

&#160;

&#161;

&#162;

&#163;

&#164;

&#165;

&#166;

&#167;

&#168;

&#169;

&#170;

&#171;

&#172;

&#173;

&#174;

&#175;

&nbsp;

&iexcl;

&cent;

&pound;

&curren;

&yen;

&brvbar;

&sect;

&uml;

&copy;

&ordf;

&laquo;

&not;

&shy;

&reg;

&macr;

non-breaking space

inverted exclamation mark

cent sign

pound sign

currency sign

yen sign

broken vertical bar

section sign

spacing diaeresis – umlaut

copyright sign

feminine ordinal indicator

left double angle quotes

not sign

soft hyphen

registered trade mark sign

spacing macron – overline

Symbol HTML Number HTML Name Description
°

±

²

³

´

µ

·

¸

¹

º

»

¼

½

¾

¿

&#176;

&#177;

&#178;

&#179;

&#180;

&#181;

&#182;

&#183;

&#184;

&#185;

&#186;

&#187;

&#188;

&#189;

&#190;

&#191;

&deg;

&plusmn;

&sup2;

&sup3;

&acute;

&micro;

&para;

&middot;

&cedil;

&sup1;

&ordm;

&raquo;

&frac14;

&frac12;

&frac34;

&iquest;

degree sign

plus-or-minus sign

superscript two – squared

superscript three – cubed

acute accent – spacing acute

micro sign

pilcrow sign – paragraph sign

middle dot – Georgian comma

spacing cedilla

superscript one

masculine ordinal indicator

right double angle quotes

fraction one quarter

fraction one half

fraction three quarters

inverted question mark

Symbol HTML Number HTML Name Description
À

Á

Â

Ã

Ä

Å

Æ

Ç

È

É

Ê

Ë

Ì

Í

Î

Ï

&#192;

&#193;

&#194;

&#195;

&#196;

&#197;

&#198;

&#199;

&#200;

&#201;

&#202;

&#203;

&#204;

&#205;

&#206;

&#207;

&Agrave;

&Aacute;

&Acirc;

&Atilde;

&Auml;

&Aring;

&AElig;

&Ccedil;

&Egrave;

&Eacute;

&Ecirc;

&Euml;

&Igrave;

&Iacute;

&Icirc;

&Iuml;

latin capital letter A with grave

latin capital letter A with acute

latin capital letter A with circumflex

latin capital letter A with tilde

latin capital letter A with diaeresis

latin capital letter A with ring above

latin capital letter AE

latin capital letter C with cedilla

latin capital letter E with grave

latin capital letter E with acute

latin capital letter E with circumflex

latin capital letter E with diaeresis

latin capital letter I with grave

latin capital letter I with acute

latin capital letter I with circumflex

latin capital letter I with diaeresis

Symbol HTML Number HTML Name Description
Ð

Ñ

Ò

Ó

Ô

Õ

Ö

×

Ø

Ù

Ú

Û

Ü

Ý

Þ

ß

&#208;

&#209;

&#210;

&#211;

&#212;

&#213;

&#214;

&#215;

&#216;

&#217;

&#218;

&#219;

&#220;

&#221;

&#222;

&#223;

&ETH;

&Ntilde;

&Ograve;

&Oacute;

&Ocirc;

&Otilde;

&Ouml;

&times;

&Oslash;

&Ugrave;

&Uacute;

&Ucirc;

&Uuml;

&Yacute;

&THORN;

&szlig;

latin capital letter ETH

latin capital letter N with tilde

latin capital letter O with grave

latin capital letter O with acute

latin capital letter O with circumflex

latin capital letter O with tilde

latin capital letter O with diaeresis

multiplication sign

latin capital letter O with slash

latin capital letter U with grave

latin capital letter U with acute

latin capital letter U with circumflex

latin capital letter U with diaeresis

latin capital letter Y with acute

latin capital letter THORN

latin small letter sharp s – ess-zed

Symbol HTML Number HTML Name Description
à

á

â

ã

ä

å

æ

ç

è

é

ê

ë

ì

í

î

ï

&#224;

&#225;

&#226;

&#227;

&#228;

&#229;

&#230;

&#231;

&#232;

&#233;

&#234;

&#235;

&#236;

&#237;

&#238;

&#239;

&agrave;

&aacute;

&acirc;

&atilde;

&auml;

&aring;

&aelig;

&ccedil;

&egrave;

&eacute;

&ecirc;

&euml;

&igrave;

&iacute;

&icirc;

&iuml;

latin small letter a with grave

latin small letter a with acute

latin small letter a with circumflex

latin small letter a with tilde

latin small letter a with diaeresis

latin small letter a with ring above

latin small letter ae

latin small letter c with cedilla

latin small letter e with grave

latin small letter e with acute

latin small letter e with circumflex

latin small letter e with diaeresis

latin small letter i with grave

latin small letter i with acute

latin small letter i with circumflex

latin small letter i with diaeresis

Symbol HTML Number HTML Name Description
ð

ñ

ò

ó

ô

õ

ö

÷

ø

ù

ú

û

ü

ý

þ

ÿ

&#240;

&#241;

&#242;

&#243;

&#244;

&#245;

&#246;

&#247;

&#248;

&#249;

&#250;

&#251;

&#252;

&#253;

&#254;

&#255;

&eth;

&ntilde;

&ograve;

&oacute;

&ocirc;

&otilde;

&ouml;

&divide;

&oslash;

&ugrave;

&uacute;

&ucirc;

&uuml;

&yacute;

&thorn;

&yuml;

latin small letter eth

latin small letter n with tilde

latin small letter o with grave

latin small letter o with acute

latin small letter o with circumflex

latin small letter o with tilde

latin small letter o with diaeresis

division sign

latin small letter o with slash

latin small letter u with grave

latin small letter u with acute

latin small letter u with circumflex

latin small letter u with diaeresis

latin small letter y with acute

latin small letter thorn

latin small letter y with diaeresis

Web Forms with Google Docs

I was working on a contact form for a client this last week, and while I have a PHP form processing script that I like to use there are other alternatives to add a contact and other forms to your website if you do not happen to know PHP or you just need a quick form to help collect information for a survey Google Docs Forms.

The form below is a sample form that I created for you to tell me what your favourite websites are. The form took only a few minutes to create and embed into this post using an iframe tag.

By submitting the form the data is automatically inserted into a Google Docs Spreadsheet that you can view, edit and of course share with the world if you like. Below is the spreadsheet that the information that the form above is saved into.

This is a very simple example of what you could do with a Google Doc Form and Spreadsheet. It makes it very easy for anyone with a website to add a web form to collect information, run surveys, polls etc with out needing to know PHP, PERL or any other server side scripting. I can see myself using a simple Google Form and Spreadsheet to manage entries from the Subscriber Bonus contests each month.

Basic HTML – Ordered and Unordered Lists

One of the easiest ways to add some organization to your blog posts is to use a list. People like lists and they can help you make your points in a post or on your website clearly and quickly. In HTML there are three types of lists:

  • Ordered lists.
  • Unordered lists.
  • Definition lists.

For this post I will only look at ordered and unordered lists because those are the two most common types of lists. Definiation lists are useful as well and I will talk about them at a latter date.

Ordered Lists

An ordered list shows the list items starting with a number in front. A basic ordered list starts with the <ol> tag and each item in the list starts with the <li> tag. At the end of each list item you should close the <li> tag with a </li> tag and when you are done your ordered list close the list with a closing </ol> tag. A basic ordered list looks like this:
<ol>
<li>Item one.</li>
<li>Item two.</li>
<li>Item three.</li>
</ol>

and it would be rendered like this:

  1. Item one.
  2. Item two.
  3. Item three.

Unordered Lists

An unordered list shows the list items starting with a bullet point in front. A basic unordered list starts with the <ul> tag and each item in the list starts with the <li> tag. At the end of each list item you should close the <li> tag with a </li> tag and when you are done your unordered list close the list with a closing </ul> tag. A basic unordered list looks like this:
<ul>
<li>Item one.</li>
<li>Item two.</li>
<li>Item three.</li>
</ul>

and it would be rendered like this:

  • Item one.
  • Item two.
  • Item three.

That is the basics of ordered and unordered lists in HTML. Lists are very flexible in HTML and can do some amazing things when combined with the correct styles in a cascading style sheet. For example the current main menu at the top of the site is actually an unordered list that is styled to display as a menu. The sidebar items are unordered list items styled without a bullet.

Visual HTML Jokes

I was surfing around a little last night and came across this visual HTML joke of the Leaning Tower of Pisa. I think you have to be a true HTML geek to think it is funny.

That photo reminded me of a couple of photos of a truck that is embedded into the ground at a small restaurant called the Black Top Cafe just south of Blaine Lake. I thought I would add the HTML to the photos and share them here with you. I could not decide which I liked better, the <i> or the <embed>. Which one do you like better?

Here are some other visual HTML joke photos I found on Flickr that gave me a smile.

HTML CANT DO THAT!

by Noah Sussman
by Noah Sussman

HTML vs CSS

by eelke dekker
by eelke dekker

<link>

by Mark.Pilgrim
by Mark.Pilgrim

<hr>

by Mark.Pilgrim
by Mark.Pilgrim

small

by Tomas Caspers
by Tomas Caspers

<strike>

by Jesper Rønn-Jensen
by Jesper Rønn-Jensen

What are your favourite visual HTML joke photos?

Basic HTML – Links

One of the great things about publishing on the Internet is the ability to link to other resources on the Internet. A basic hyperlink in the body of a page is created using the anchor tag and looks like this:

<a href="http://lgr.ca/">LGR Internet Solutions</a>

The href (Hypertext Reference) attribute is the resource on the Internet that you are linking to. The word(s) between the opening anchor tag (<a href="http://lgr.ca/">) and the closing anchor tag (</a>) are the words that will be highlighted as the link. In this case the link would look like this:

LGR Internet Solutions

That is the most basic link that you can create. If you are using WordPress there is a great tutorial on the WordPress website showing you how to create a link. It walks you through the basics of creating links with WordPress in the visual and HTML editor.

Basic HTML – Headings

If you are new to running your own website or blog you might not know a lot of HTML but there is some basic HTML that is easy to learn that will make running and managing your website and blog much easier now and in the future. By using headings in your web pages and blog posts you make it easy to style using cascading style sheets and the document is nicely formated in the event that you move to a new theme or you redesign your website. In the past I have not always used headings on the blog posts here and those are the posts that I am often going back and editing because they are not displaying properly.

How to use headings

The code to define headings in HTML are simple. Below is how headings are displayed here on this blog and the code to define them.

This is a heading one

<h1>This is a heading one</h1>

This is a heading two

<h2>This is a heading two</h2>

This is a heading three

<h3>This is a heading three</h3>

This is a heading four

<h4>This is a heading four</h4>

This is a heading five

<h5>This is a heading five</h5>

This is a heading six

<h6>This is a heading six</h6>

WordPress - Show/Hide Kitchen Sink
WordPress - Show/Hide Kitchen Sink
If you are not using the HTML editing mode in WordPress you can still use proper headings. Simply click the Show/Hide Kitchen Sink button and the format button will be shown. Simply select the text you want as a heading and choose the heading type you want.
Selecting a heading in WordPress
Selecting a heading in WordPress

Considering how well structured most WordPress themes are I am surprised that the bold button is still there on the editor and the headings are hidden in the kitchen sink. If you use something other than WordPress to manage your website, you might have to use the HTML code to insert the proper headings, but most content management systems do have an easy way of adding proper headings into a document. For example here is a screenshot of how to add headings using Joomla.

Adding headings in the Joomla HTML editor
Adding headings in the Joomla HTML editor

Why use headings?

It is easy to use bold to define sections when you are writing a blog post but by using headings you make the post or page more structured. Headings are best used to introduce sections in a document. Web browsers generally render headings in different sizes making a heading one larger than a heading two and so on. Using proper headings in your blog post can also help boost your search engine rankings. For example a blog post title is probably best displayed as a heading one, with sections inside the blog post starting as a heading two. This gives a well structured document for the search engines to index. The search engines do not have to guess at what is a heading and what is suppose to be just bold text.

It is good practice to use headings. It will make your content easier to move from one content management system to another and it will be easier to redesign the presentation of your content by simply changing your cascading style sheet. I know that I have not always used proper headings here on the LGR Internet Solutions blog, and I am continually going back and editing posts to fix how things are laid out. Better to start from scratch doing things right than spending time fixing things.