Archive for the ‘HowTos’ Category

How To Locate Your Website Visitors Via IP

Tuesday, October 13th, 2009

More and more websites are using a geolocation service to show advertisements and offers near a visitor’s location. Using such a service on your own website is quite easy. This post only focuses on using the MaxMind GeoIP City database based on IP addresses and using it with PHP because I have already implemented this solution on one of my websites and wanted to share this tutorial because I think it may be helpful for my visitors.

This tutorial requires that you are able to compile PHP extensions on your system which means that you must have root access to your server and need to be able to access it from the Linux command line.

Although the price you have to pay for the MaxMind database may appear high at first glance you may not need the full database but may just purchase a database for a single country - just as I purchased the German database only. There is also a free GeoLite City database available from MaxMind which has a worldwide coverage and has an accuracy of 79% for US cities.

There are just 6 simple steps for you to perform - I will cover using the German database on an Ubuntu Linux system only but only the file name is different with versions for other countries so you need to adjust some values in the examples below.

  1. Purchase and download the database (choose the API version, not the CSV file)
  2. Unpack the file and move the contents to the appropriate directories:

    tar -xvzf GeoIP-132de_20090901.tar.gz
    mkdir /usr/local/share/GeoIP
    mv GeoIP-132de_20090901/GeoIPCityde.dat /usr/local/share/GeoIP/GeoIPCity.dat
  3. Install the header files for the library:
    apt-get install libgeoip-dev
  4. Install the geoip extension for PHP:
    pecl install geoip

    If you’re getting an error like this

    checking for LGPL compatible GeoIP libs... wrong version
    configure: error: You need version 1.4.0 or higher of the C API

    you can fix this by downloading the C files directly from MaxMind and compiling them manually:

    wget http://geolite.maxmind.com/download/geoip/api/c/GeoIP-1.4.6.tar.gz
    tar -xvzf GeoIP-1.4.6.tar.gz
    cd GeoIP-1.4.6
    ./configure
    make
    make check
    make install
    apt-get remove libgeoip-dev
    pecl install geoip

  5. Load the new PHP extension - add these lines to your php.ini:
    extension=geoip.so
    geoip.custom_directory=/usr/local/share/GeoIP
  6. Restart your (Apache) web server

You can now use all of the PHP functions the geoip extension offers such as:

<?php var_dump(geoip_record_by_name($_SERVER['REMOTE_ADDR'])); ?>

In the next post I’ll cover using the GeoLocation object available in JavaScript in Firefox 3.5 and using it to get even more detailed locations.

How To Hide Links To Avoid NoFollow PageRank Sculpting Issues

Saturday, June 6th, 2009

Just recently Google’s Matt Cutts announced a change in how Google handles NoFollow attributes in links thus making a “rel=nofollow” useless on your JavaScript-enabled onClick event handlers. The best method in this case would be to hide links on your page that you would normally have used “nofollow” on so you could only show them via JavaScript.

Instead of using “rel=nofollow” on your links as you did previously you may want to hide the links completely and only make them appear when JavaScript is enabled. You should also show a user which does not have JavaScript enabled that there is a link but it is not enabled. So I decided to create a small JavaScript which converts <span> elements with a specific class name to links when the user has JavaScript enabled. If there is no Ja

vaScript the “links” will look like this:
followlink_1

If JavaScript is enabled and the page has finished loading the links will look like this:
followlink_2

This is the HTML code for the <span> tag which will be converted into a link which needs to be given as the title attribute of the element:

<span class="hiddenJSLink" title="http://www.saschakimmel.com/">Hidden Link</span>

This is how the link will look after the script has been executed:

<a href="http://www.saschakimmel.com/">Hidden Link</a>

You can also add both an id and additional classes to the source <span> - they will be copied to the final link.

The script requires the prototype.js JavaScript framework - I am using this because I know that many websites are already using it on their pages.

This is some code of an example HTML page - you can download it and the JavaScript file in a package below.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
<head>
<title>Hidden Links</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="hiddenLinks.css" type="text/css" />
<script type="text/javascript" src="prototype-1.6.0.3.js"></script>
<script type="text/javascript" src="hiddenLinks.js"></script>
</head>
<body>
<ul>
<li><a href="http://www.saschakimmel.com/">Normal Link</a></li>
<li><span class="hiddenJSLink" title="http://www.saschakimmel.com/">Hidden Link</span></li>
</ul>
</body>
</html>

So in essence the only thing you need to do is to add these three lines of code to the <head> section of your HTML file after you have downloaded the JavaScript/HTML/CSS package below:

<link rel="stylesheet" href="hiddenLinks.css" type="text/css" />
<script type="text/javascript" src="prototype-1.6.0.3.js"></script>
<script type="text/javascript" src="hiddenLinks.js"></script>

Acessibility Notice!

Please note that from an accessibility standpoint using JavaScript is not recommended as it renders the links useless on screen readers. But currently there seems to be no other way to hide links from Google for legitimate PageRank sculpting.

License

Creative Commons License
This code by Sascha Kimmel is licensed under a Creative Commons Attribution-Share Alike 3.0 Unported License. This means that if you are using it on your site (personal and commercial sites are ok) you need to add a link somewhere (only on one page)  as provided here:

HiddenLinksJS by <a href="http://www.saschakimmel.com/" target="_blank">Sascha Kimmel</a>

If you don’t want to add a link to your site you can donate any amount to my PayPal account which will entitle you to use the HiddenLinkJS on any page without any requirement for adding a link:


View hiddenLinks.js
View hiddenLinks.css
View hiddenLinks.html demo page

dlnow

How To Use The Bing Webmaster Tools To Get Info On Your Site

Monday, June 1st, 2009

Just today bing.com, Microsoft’s new search engine, has launched. Surely you have already checked out the search results and checked positions of your favorite keywords. But have you also checked out all the tools Microsoft now offers webmasters to analyze their websites?

Verify Ownership Of Your Website

Just go to the Bing Webmaster Center and click on the “Add a site” button to add your website. In the form that is shown enter the URL of the website you wish to add. Bing even allows you to provide an email address ” to contact you if [they] encounter specific issues with your site” which sounds very interesting because Google does not provide that feature. Only the following weeks and months will show what the result of using that email feature will be.

bing-scr01

After submitting the form you have to add some verification code to your site (or your server). In contrast to Google which only requires you to create an empty file with a specific name Microsoft wants you to add an XML file to your server which a specific content. You can also choose to add a META tag to your site but I recommend using the XML file because it’s much simpler - you only need to upload it once to your server whereas you’d have to add the META information to the homepage template.

bing-scr02

After you have added the META tag to your homepage or uploaded the XML file click on the “Return to list” button. You’ll see your website in the list. Just click on the domain name.

Bing will access your website immediately and check for both the META tag or the XML file. If you have done everything correctly you will be taken to the site summary page which provides a wealth of information on your site as seen by Bing.

bing-scr03

Site Summary And Domain Score

The site summary shows you when your site was last crawled by the Bing crawler, the number of indexed pages, whether Bing has been blocked from accessing your site (if you have blocked it via the robots.txt file for example) and a domain score which is shown as five boxes. Microsoft writes here:

“Domain Score provides a measurement of how authoritative Bing views your domain to be, with five green boxes being the highest rating and five empty boxes being the lowest. This is based on many of the same factors Bing uses to determine static rank, but isn’t directly comparable.”

Luckily this blog has a domain score of 5/5 at the time of writing.

Bing also shows you the top 5 pages of your site.

Your Profile

When selecting “Profile” from the top navigation you can change the settings you have already seen when you added your site. You can also see the current verification method Bing is using to verify your site ownership.

Crawl Issues

This section shows you crawling issues that may have occurred on your site such as pages that Bing could not find (404 error) or pages blocked by the robots.txt file.

It also shows you a list of long dynamic URLs Bing has flagged because they think it might lead the crawler into an infinite loop trying to crawl the dynamic URLs and may also lead to duplicate content.

The Crawl Issues page also tells you whether the crawler found pages on your site which it believes to be infected with malware or using unsupported content types.

bing-scr05

Backlinks

The backlinks page shows you all of the backlinks Bing has found to your domain together with the page score, language and region of the page linking to your content. I really like the inclusion of the page score because it may be used to find “bad neighborhoods” linking to your site although Microsoft says that the score isn’t directly comparable.

The page will only show the first 20 backlinks but you can download the complete list as a CSV file to your system.

bing-scr04

Outbound Links

This page will show you all of the links on your site Bing has found that are leading to other websites. Just like on the backlinks page it shows you the page score, language and region as well and even allows you to show your outbound links to malware sites - let’s hope you don’t have any on your site.

Just like before you can also download the complete list as a CSV file.

Interestingly all of the links on my page leading to Twitter (the source of which is a Twitter plugin for Wordpress which shows the latest tweets on my blog) have a page score of 5/5. Does that mean that Bing sees Twitter as an authoritative site?

bing-scr06

Keywords

This page allows you to see “how your site performs in search results for searches using specific keywords” although I don’t quite understand the results. You can enter a keyword in the text field provided and it will show you the page on your site, the page score of that page and once again the language, region, last crawl date and whether the Bing crawler was prevented from accessing the page.

bing-scr07

It is interesting but I had expected to see SERP positions for the given keyword which would be a great feature. Entering “wolframalpha” shows a page score of 5 for my article on WolframAlpha yet when searching for “wolframalpha” on bing.com that page is not listed in the first 100 results.

More (Not So) Interesting Stuff

You can also add your sitemap directly by clicking on the Sitemaps tab.

The “Related Tools” section in the navigation on the left side lists some links that sound interesting at first but in my opinion they are a bit disappointing. If you thought that by clicking on the Robots.txt validator link you would be able to analyze the robots.txt file for your current site you’re wrong. You can copy the contents of any robots.txt file there to check it for incompatibilites with the MSNBot but that’s all. Slightly disappointing.

Likewise the HTTP Verifier and Keyword Research Tool links lead you directly to the default pages on the Microsoft website.

Bottom Line…

I recommend that you add your site(s) to the Bing Webmaster Center so that you can access the interesting statistics they provide - I’m sure many more tools will be provided in the future.

You should also check out the forum for many interesting discussions.

I’m amazed that Microsoft provides these features just from the launch day on.

We’ll see what else will be provided in the future.

How To Add A DZone.com Button To Your WordPress Blog Posts Automatically

Saturday, May 30th, 2009

After previously adding the DZone.com voting buttons manually to each post (which you really don’t want to do every time as you need to set the post URL manually for the index page) I have modified the JavaScript provided by DZone and integrated some code into the WordPress files so that a button is added automatically on each post now just like the button to the left of this text.

Uploading The Modified JavaScript File

I noticed that DZone isn’t currently sending a cache header on every JavaScript request and that the snippet you are given to integrate into your post redirects via a 302 header to the real file. If you have 5 DZone buttons on your blog’s homepage (if you are displaying 5 posts) that means 10 additional HTTP requests to DZone.com that take time and delay the page loading process.

If you have already integrated the JavaScript snippet provided by DZone you should remove it now otherwise you will get two buttons per post. Just download this file and upload it to a directory of your choice on your server. You may even use the WordPress uploader but write down the final path to the JavaScript file as you need to enter it in the next step.

Now open Appearance > Editor in the WordPress Admin Panel on the left hand side and click on header.php on the right hand side. Add the following line somewhere within the <head> of the document:

<script src="/js/dzone.js" type="text/javascript"></script>

Replace “/js/dzone.js” by the path where you have uploaded the dzone.js file before. Then click on “Update File“.

Adding The Button To Every Post

After saving click on the link “single.php” on the right side just as you did before with the header.php file. Depending on your chosen WordPress theme the HTML code may look more or less like this:

<div class="entry">
<?php the_content('<p class="serif">Read the rest of this entry &raquo;</p>'); ?>

Just between the opened <div> tag and the following <?php tag insert the snippet code:

<span style="float:left;margin:0 10px 10px 0"><script type="text/javascript">dzone_show_linkbox('<?php the_permalink(); ?>', '<?php the_title(); ?>', null, 1);</script></span>

Thus the modified code will look like this:

<div class="entry"><span style="float:left;margin:0 10px 10px 0"><script type="text/javascript">dzone_show_linkbox('<?php the_permalink(); ?>', '<?php the_title(); ?>', null, 1);</script></span><?php the_content('<p class="serif">Read the rest of this entry &raquo;</p>'); ?>

Save the file by clicking on “Update File” afterwards.

Repeat this step for the index.php file and you’re done.

If you are using the WP Super Cache plugin or any other caching plugin you may need to clear the cache otherwise you won’t see the modified pages. When using WP Super Cache select Settings > WP Super Cache on the left side and then on the “Delete Cache” button on the page.

After reloading your blog’s homepage or any article page you will now see a DZone button just like this article does.

How To Install Apache, MySQL and PHP (WAMP) On Windows Manually

Friday, May 29th, 2009

If you are using Windows as your operating system when developing your websites you should always test your websites on your local system before you upload the files to your live server.

Although there are several pre-packaged Apache-PHP-MySQL (WAMP) packages available for download when using these you are bound to their release cycles and the structure of the directories they are using.

This article describes how you can install Apache, PHP and MySQL manually on your local system with maximum flexibility because you can quickly update one program if the need may arise, e.g. if a new PHP version has been released.

This method also shows you where specific files are located which you may need to edit when changing settings so you can dive a bit deeper into the configuration files which may be quite helpful if an error occurs.

WAMP Setup

In this tutorial I’m assuming the following:

  • Apache, PHP and MySQL are installed to subdirectories of d:\webserver
  • The document root is d:\webroot
  • the first test domain is www.webserver.local
  • the document root for that VirtualHost is d:\webroot\www.webserver.local\htdocs which will contain all documents accessible via the browser

Installing The Apache Server

First of all you need to download the latest Windows distribution of the Apache HTTP server from the Apache download page. Pick the MSI installer including OpenSSL which is named something like „Win32 Binary including OpenSSL 0.x.x (MSI Installer)” and is listed under the section named something like “Apache HTTP Server 2.2.xx is the best available version”.

After launching the setup program pick the „Custom” setup and choose the directory d:\webserver\Apache as the installation path. Enter the information as shown in the screenshots below.

apache-install

apache-install-2

Installing PHP

Dowload the latest (stable) PHP 5 version from the PHP download page. Choose the „PHP 5.x installer”. After download and launching the file when prompted to select a directory choose d:\webserver\PHP

php-install

Webserver Setup - “Select the Web Server You Wish To Set Up” select “Apache 2.2.x”.

php-install-2

When prompted for the Apache configuration directory select d:\webserver\Apache\conf.

php-install-3

On “Choose Items To Install” select the extensions you’d like to install.

If you don’t know which might be useful you may use the following list to find some suggestions:

  • cURL (good for accessing HTTP servers)
  • EXIF (if you’re dealing with photos and wish to extract meta information)
  • GD2 (image creation and manipulation)
  • Multi-Byte String (mbstring, for i18n, e.g. conversion from ISO-8859-1 to UTF-8)
  • mcrypt (for encryption)
  • mysql, mysqli
  • other database extensions you might be using (postgreSQL etc.)
  • OpenSSL (for accessing https URLs)
  • PDO, PDO_Mysql, PDO_SQLITE
  • SOAP (if you’re planning to access SOAP resources or create you own SOAP server)
  • SQLite

Installing MySQL

To download the MySQL server visit this MySQL website and download the Windows MSI Installer package under „Community Edition”.

To ease administration and creation and editing of tables and databases I encourage you to download and install the MySQL GUI tools as well.

In the MySQL setup dialog pick the custom installation and select the directory d:\webserver\MySQL as the installation directory.

mysql-install-1

mysql-install-2

When configuring the MySQL server use the detailed configuration.

mysql-install-3

Use “Developer Machine” as your server type

mysql-install-4

Select “Multifunctional Database” in the database usage dialog:

mysql-install-5

Keep the default InnoDB tablespace settings and click Next:

mysql-install-6

Select “Decision Support” on the next dialog:

mysql-install-7

Keep the default values on the next screen:

mysql-install-8

When prompted to select a character set use the one that fits best, I’m using UTF-8 as the default charset.

mysql-install-9

On the next dialog you have to choose whether to install the server as a Windows service and if it shall be started automatically at boot time. This setting depends on how often you’re developing on your system. I’m keeping MySQL running in the background most of the time because it doesn’t eat that much memory.

mysql-install-10

The next dialog prompts you to select a root password. Keep this in mind.

mysql-install-11

After the installation has finished the MySQL server is already running and you can now begin to configure PHP and Apache.

Configuring Your System

For every VirtualHost (i.e. website/domain) you need to add a corresponding entry to your HOSTS file so that your browser knows that the given domain will be handled by the webserver running on your local system. Edit the file c:\windows\system32\drivers\etc\hosts with a text editor.

Windows Vista Information

On Windows Vista you have to launch Notepad as an administrator to see and edit the file.

Add a new line to your hosts file which has the following content:

127.0.0.1 www.webserver.local

Now requests to www.webserver.local from your browser will be sent to the webserver running on your local system.

Configuring The Apache Webserver

There are actually two files to edit. Please note that you always need to use forward slashes or a double backslash in path names.

General Settings

Open the file d:\webserver\Apache\conf\httpd.conf and search for the line reading

DocumentRoot "D:/webserver/Apache/htdocs"

The default document root is D:/webserver/Apache/htdocs. We now need to change this to point to the d:\webroot directory as defined above. So change this line now to

DocumentRoot "d:/webroot"

You also need to modify the line reading

<Directory "D:/webserver/Apache/htdocs">

to

<Directory "D:/webroot">

If you wish to use .htaccess files you also have to change the line reading

AllowOverride None

to

AllowOverride All

To include the VirtualHosts file which will contain all mappings of hostname to document root directory (and more) you have to change the line

#Include conf/extra/httpd-vhosts.conf

to

Include conf/extra/httpd-vhosts.conf

To enable automatic execution of an index.php file when the user accesses a directory (which you should always do) you need to add index.php to the DirectoryIndex directive just as in this example - simply add „index.php” to the end of the line:

<IfModule dir_module>
DirectoryIndex index.html index.php
</IfModule>

Creating The VirtualHosts Configuration

Open the file d:\webserver\Apache\conf\extra\httpd-vhosts.conf. Now it’s time to create a VirtualHost for our domain www.webserver.local.

Just add the following block to the end of the file.

<VirtualHost *:80>
ServerAdmin webmaster@example.com
DocumentRoot "D:/webroot/www.webserver.local/htdocs"
ServerName www.webserver.local
ErrorLog "logs/webserver.local-error.log"
CustomLog "logs/webserver.local-access.log" common
</VirtualHost>

This will tell Apache…

  • that the server administrator can be reached via webmaster@example.com (no need to enter your real email address, because on your own development system you’re the only one that would see your real email address so it doesn’t make sense
  • that the documents for www.webserver.local can be found in the directory d:/webroot/www.webserver.local
  • to log errors to the file d:/webserver/Apache/logs/webserver.local-error.log
  • to log every access to d:/webserver/Apache/logs/webserver.local-access.log

Creating The Documents

Create the directory D:/webroot/www.webserver.local/htdocs recursively and create the file D:/webroot/www.webserver.local/htdocs/index.php with the following contents:

<?php phpinfo(); ?>

Configuring PHP

The default PHP installation would not show you any errors in the browser and instead just return a 500 server error which would materialize as an empty white page.

Although this is the recommended setting for productions servers where you do not normally want to reveal any specific information like paths when an error occurs this makes life quite hard on your local development server. To enable the display of error messages in the browser open your php.ini file which is located at d:\webserver\php\php.ini and change the line

display_errors = Off

to

display_errors = On

To enable sending of emails via the mail() function you need to define a specific SMTP server name and port. You would normally enter your providers’s mail server name here. Please keep in mind that some providers use a so-called „POP-Before-SMTP” so that sending mails with PHP may fail if you have not downloaded new messages via POP3 from the server before.

Testing The Installation

Now you are ready to test your new web server. First of all you need to restart the Apache server via the included taskbar tool or via the Windows services panel.

After that open up your browser and enter http://www.webserver.local/

This should show the phpinfo() page.

And now: have fun developing!