Last week we published an article with different methods to hide e-mail addresses on websites. Because of several comments with suggestions on how-to solve this problem, we provide this week a solution which is “from these days” and more powerful.

Based on the idea if you don’t show an address, a spambot can’t see it, we use in our example a simple Ajax call (using jQuery) and show a tiny box with some friendly message including the link with e-mail address.
DEMO: We used the code from this tutorial on the this page.

How does it work?

First we need to create a simple php file that holds the content and the e-mail address, we use json_encode to make the string less readable:

<?php
// change the two vars below
$email = 'user@mail.com';
$html = 'Please contact us by e-mail: <a href="mailto:%%mAdr%%">%%mAdr%%</a><br /><br />
<a href="javascript:void(0);" id="hideme">Close</a>';
 
$eparts = explode('@', $email);
$data = array('ename'=>$eparts[0], 'dom'=>$eparts[1], 'htmlcode'=>$html);
echo json_encode($data);
?>

Don’t forget to block that file in your robots.txt file!

Now we need a function that will load the external content into the current page using an Ajax request.

$(document).ready(function() { 	
	$("#clickme").live('click', function() { 
    	$.ajax({
	  		url: 'glink.html',
                        dataType: 'json',
	  		success: function(data) {
				var adr = data.ename + '@' + data.domain;
	  			var newdata = data.htmlcode.replace(/%%mAdr%%/g, adr); 
				$('span#ajaxresp').html(newdata).slideDown('slow');
				return false; 				
	  		}
	  	});
	});	
	$("#hideme").live('click', function () { 	
		$("span#ajaxresp").html('').slideUp('slow');
		return false; 
	});
});

jQuery code in detail

A visitor has clicked the element with the ID “clickme” and the Ajax request for the file “glink.php” is done. On “success” parse the html string with the two other json pairs and add the result to the SPAN element with ID “ajaxresp” is filled with the response from the external file and the box will slide down. To make the elements from the Ajax content accessible, we use “live()” events instead of the “regular” click event.
The visitor need to click the element with ID “hideme” to slide an empty “Ajax box” back to the original position.

Additional we give our dynamic email box some style using CSS:

span#ajaxresp {
	margin: 5px 0;
	text-align: center;
	padding:10px;
	display: none;
	border:2px solid #CCCCCC;
	background-color:#EDECEB;
}

The following code holds the “contact” link which is using the click event and the small container where the Ajax response data is placed.

<a href="javascript:void(0);" id="clickme">Contact</a><span id="ajaxresp">

If your visitor has clicked this “contact” link the following box appears:

If you have the jQuery and CSS code in external files, it’s possible to use the function on all your pages. The best thing is that the loaded box has also room for a personal message for your visitor. It’s just a simple solution without the need of building a contact form. This was the third article of a series with solutions on how-to add the contact information to your article or website.

Similar Posts:

• E-mail links, protective solutions against SPAM
• jQuery Contact form for your website
• Ajax requests using jQuery and PHP

If you place your e-mail address somewhere visible on your website, it will be only a matter of time until your e-mail account will get more and more spam messages. There are lots of spam bots checking the Internet for email addresses on regular websites, forums, blog and mailing lists. Once caught by some spam bot your mailbox is in need of a strong spam filter or sometimes it might be better to use a new e-mail address.

In this article we show you different ways, how you’re able to show your e-mail address to human visitors and hide it for spam bots.

Don’t forget, the solutions mentioned in this article are not a total protection against spam. If you share your e-mail address online, the chance that your e-mail address get on a spammer’s list is big. We advice that if you need to share an e-mail address with your websites’s visitor, to not use your personal e-mail address.

With each solution we give a review for:

• Integration: Is this function easy to integrate even for a less experienced webmaster.
• Protection: Is the e-mail address protected against spam bots.
• User friendly: Is the solution easy to use for a website’s visitor

The simple solution, an image from your e-mail address

Just providing image version is very simple and easy. Open your image editor, create a small image from your email address and upload the image to your website.

After this you’re able to place that address in to the HTML, just on that place where you need it. It’s safe for your e-mail address and it’s simple to use that image in your website document or CMS. There is one big issue with this solution: The visitor has to type over your e-mail address to his e-mail program.

Hide the @ symbol

There are different ways to hide the format of an e-mail address. Hoe does this work? Changing the format of some email address or just hiding parts from the e-mail address makes it more difficult for spam bots to find them. For example:

1. user@email.com
2. user at email dot com

While the first one is very webmaster friendly, it’s not be the best protection for your e-mail address. The second example is used very often because this “faked” address is easy to add to your content. Both formats are recognized by smarter spam bots.

Hide your e-mail address using PHP

The following example will convert the string of some e-mail adress into unicode values:

function convert_email_adr($email) {
    $pieces = str_split(trim($email));
    $new_mail = '';
    foreach ($pieces as $val) {
        $new_mail .= '&#'.ord($val).';';
    }
    return $new_mail;
}

Use this function in your web page like:

<?php echo convert_email_adr('user@email.com'); ?>

The output in your html is like:

user@email.com

This way the e-mail address is visible to the visitor like normal. Using this format for a mailto: link will open a new window from the visitor’s e-mail program. There might be a few spam bots which are able to read this format as well.

Some JavaScript solution

The last solution is very similar to the PHP snippet and requires similar handling to add some email link to your website. Place the following function into your HTML document or include the code as an external JS file:

<script type="text/javascript">
function create_mail(naam, domain, tld, label) {
    var mail;
    mail += '<a href="' + 'ma' + 'il' + 'to:' + naam;
    mail += '&#64;' + mail + domain '.' + tld;
    mail += '">' + label + '<' + '/a>';
    document.write(mail);
}
</script>

Use this code inside the website content:

<script type="text/javascript">create_mail("user", "email", "com", "e-mail");</script>

This method is very protective against spam bots, but will not work if JavaScript is disabled in the visitors browser. On the other site this code is very flexible and easy to use.

You see there are many different ways to add your e-mail address to your website without to expose the it to spam bots. If you search Google you will find much more examples, some of them are safe and some of them might have a better usability. If you don’t like to show your email address you should use a contact form on your website. If you know some great and easy function to hide an e-mail address in HTML code, please post it below. If you like this article please share the link on twitter or facebook, thanks.Similar Posts:

• jQuery Contact form for your website
• Your e-mail address hidden with jQuery?
• Attachment Mailer class: now support for HTML mail

There are several tutorials on the Internet on how-to integrate the Google Custom search in your website, but the results are not very attractive. The older iframe version doesn’t fit perfectly in most of our templates and the style for ads and results doesn’t look good in the past. A few month Google has released some nice new features:

• Custom search element placements
• Custom styles and themes using CSS
• Promotions, set your own premium results for specific search queries
• A new AJAX powered CSE using the Google AJAX API loader

With all these new features the CSE (Custom Search Engine) becomes very attractive to use it on your own site as site search. In this tutorial we show you how-to add the custom search feature to you site using jQuery, the Thickbox plugin and the AJAX API provided by Google. To do this a result page is not necessary anymore, we show only a search box somewhere on a particular website.

Including the Google API, jQuery and the Thickbox plugin

First include the following rows to your page HEAD, you need to add them on every page where you like to show the search box.

<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<link rel="stylesheet" href="thickbox.css" type="text/css" />
<script type="text/javascript" src="thickbox.js"></script>
<script type="text/javascript" src="http://www.google.com/jsapi?key=YOURAPYKEY"></script>

To use the Google API you need to register an API key for your website, request a key here.

HTML code for the search box

Below the simple HTML code for the search form and the container for the results. Place both somewhere on your webpage.

<div id="searchcont">
	<label for="query_input">Search Query: </label>
	<input type="text" id="query_input" />
	<input type="button" value="ok" id="searchbtn" />
</div>
<div id="resultcont">
	<div id="title" style="visibility:hidden;"><a href="#">Close</a></div>
	<div id="results"></div>
</div>

jQuery code snippet

The following JS code will load the Google API and if the user has clicked the search button the customSearchControl is initiated, the Thickbox is called, the title inside the Thickbox becomes visible, the result element is prepared and at last the input element value is executed for the search query. Add this code in your page’s HEAD surrounded by some script tags.

google.load('search', '1');
$(document).ready(function() {
	$("#searchbtn").click(function () {
		var customSearchControl = new google.search.CustomSearchControl('UNIQUE_CSE_ID');
		tb_show("", "#TB_inline?height=480&width=800&inlineId=resultcont&modal=true");
		$('#title').css("visibility", "visible");   
		var drawOptions = new google.search.DrawOptions();
		customSearchControl.draw(document.getElementById("results"), drawOptions);
		customSearchControl.execute(document.getElementById("query_input").value);
	});
	$("#title a").click(function () {
		tb_remove();
		$('#title').css("visibility", "hidden");   
		$("#results").hide();
	});
});

The other click event is used to hide the Thickbox, the event will hide the title and hides also the results. The last action is needed because we show an inline element, if we don’t hide the content the results are still visible after the Thickbox is closed.

That’s all, simple or not? The code above needs of course some styling. I used a slightly modified version for my network site search on this blog. If you search for “wordpress” you see the “promotion” feature I mentioned above.

Similar Posts:

• Ajax requests using jQuery and PHP
• Your e-mail address hidden with jQuery?
• jQuery Contact form for your website

If you’re using the popular blog tool WordPress, you’re probably looking for th best possible Wordpress hosting provider. Choosing a host might be hard becaise the are a lot of them. I advise you to take your time and make sure you’re choosing the best option. WordPress doesn’t require a lot of “special” server features, one reason more why most hosting provider will offer to host your blog. You don’t need one at the top-of-the-line and don’t go for the cheapest plan you can find.

For the beginning blog a shared hosting plan should be enough, be sure an account upgrade is possible at any time. This is because you never know how fast your site is going to grow or how big it is going to get, and it’s always better to be well prepared. Check also the possibilities to move your account from a shared hosting plan to a VPS or dedicated server. You also want to avoid the smaller, lesser-known hosts. Go for the companies where a lot of people talk about, don’t host by some new company from a guy you met on forum for example.

Don’t forget, if you blog has frequent reader and traffic a hosting failure can ruin your blog site.

User and file permissions

Wordpress has great features to maintain the core system, any plugins and your Wordpress themes. While for the download and update from external files an build-in FTP function act as a kind of fall-back feature, you need the ability to edit your files right on the server. The last one requires some permissions to edit files thought the Wordpress backend. A normal webserver is configured that files have a 0644 permission and directories have a 0755 permission. Most PHP/Apache powered webserver using one user ID to process the PHP files. This permission is okay for most PHP functions but not for file based functions used to edit template or plugin files. A few hosting provider offer services where PHP scripts are executed with user ID from the web hosting account. Providing hosting accounts this way is more secure than raising the values for the file/directory permissions to 666/777. If the PHP scripts are executed by the host account user Wordpress doesn’t need the FTP fallback feature and all updates and downloads are served much faster. The file upload tool from Wordpress back-end works without any problems if PHP scripts are executed with user permissions.

Important features you need

• Your host has to provide daily backups, ask them how long each backup is stored (several days are a must to have feature, more than a week is nice)
• Host your blog in the country where you except to have the most visitors. This way most of your visitors will see your site very fast.
• Check if the database and mail service is not hosted on the same machine as the website service. Most of the the mail server can slow down a server if mail related service have to fight back a lot of spam.

More PHP related requirements

These features are not required by the Wordpress core system but many plugins: cURL, safe_mode=off, simpleXML, Socket support

WebFaction, smarter web hosting

Now that you know what to look for in a host, it shouldn’t be too hard to make a decision. If you’d like to go the fast way and skip researching, I recommend webfaction.com hosting, we use it for this blog site. WebFaction fits all of the discussed requirements, and it’s very affordable overall. It’s literally perfect for hosting WordPress sites, and if you know for a fact you are going to be a webmaster for a while, you can save a significant amount of money by pre-paying for 2-5 years. WebFaction has hosting plans ranging from 10GB to 60GB, and from $5.50 to $34.50 per month. There’s a great selection, so you can find a plan that’s perfect for your budget and your wallet.Similar Posts:

• Create custom website backups using CRON
• Website Monitoring Services: Reviews and Facts
• Sending e-mails via SMTP with PHPmailer and Gmail

These days it’s very hard to prevent your e-mail box against spam if you like to get in touch with your website’s visitors. If you place some e-mail address on your website or even a regular contact form makes you possibly a victim of spambots. There are many ways to protect your inbox against spam, spam filters and protections on your contact form page will help for sure.

In this tutorial we show how to create a modern contact form that is linked by a simple text link and opens in a fancy Lightbox where all form handling, including reCAPTCHA validations, are processed by PHP and the jQuery Ajax function. After the form submission was successful we are using the PHP Class script PHPMailer to send the message via SMTP.

Previous Tutorials we have used for this application

Create custom reCAPTCHA images using their API
We use the reCAPTCHA API to create a user validation image to protect the form against spam attacks.

Sending e-mails via SMTP with PHPmailer and Gmail
We send e-mail messages using the PHPmailer script via SMTP, the mail function from this previous tutorial is the base for this tutorial as well.

Next we use the Ajax function from jQuery to send the form variables to our PHP e-mail script. This tutorial describes how-to to use all the functions in one application, please check the other tutorials if you need more information. We will not explain the code for PHPMailer and reCAPTCHA in this tutorial. You need an API key for the reCAPTCHA service.

Thickbox jQuery Plugin

We use the Thickbox plugin for this tutorial because we think that this plugin is easy to use and very flexible. If you visit the Thickbox website you will notice some “warning” from the developer, he says that he doesn’t continue the development. If you don’t like to use the Thickbox plugin you need to use one of the other Lightbox plugins available on the Internet. Since the application is not related to the Thickbox plugin, it should be easy to use that code with most other Lightbox scripts as well.

Contact form

This page is used to collect the users input, will validate the input on the client side and will post the data to the PHP e-mail script. Create a file with this code and call it contact-form.html

<html>
<head>
<title>Contact form</title>
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="http://api.recaptcha.net/js/recaptcha_ajax.js"></script>
<script type="text/javascript">

Next we have the jQuery script block for the form validations, Ajax form submission and the code to request the challenge image from the reCAPTCHA API.

After the document is loaded the reCAPTCHA images is added. If the user has clicked the button #submit_button the Ajax function is called with:

• Options like the PHP e-mail script,
• the form data,
• the data type JSON,
• a pre-submit handler for the form field validations
• and a success handler that put the response into the #output container.

$(document).ready(function() { 	
	var RecaptchaOptions = { theme : 'custom' };
 	Recaptcha.create('your public key', 'recaptcha_image', RecaptchaOptions);
 	Recaptcha.focus_response_field();
	$('#submit_button').click(function() { 
		$.ajax({
			type: 'POST',
			url: 'email.php',
			data: $('form#myform').serialize(),
			dataType: 'json',
			beforeSend: function() {
				var resp_field = $('#recaptcha_response_field').val();
				var name = $('#name').val();
				var email = $('#email').val();
				var message = $('#message').val();
				if (!resp_field[0] || !name[0] || !email[0] || !message[0]) { 
					$('#output').html('All fields are required');
					return false; 
				}
				emailpat = /^([a-z0-9])+([\.a-z0-9_-])*@([a-z0-9])+(\.[a-z0-9_-]+)+$/i;
				if (!emailpat.test(email)) {
					$('#output').html('The e-mail address is not valid.'); 
					return false;
				}
			},
			success: function(response) {
				if (response.status == 'success') {
					$('#formcont').html();
				}
				$('#output').html(response.errmessage);
			}
		});
	});
});

The form has just a few fields for name, e-mail address and message. Note the container with the ID recaptcha_image, this DIV element holds the reCAPTCHA challenge image.

</script>
</head>
<body>
	<h1>Contact form</h1>
	<div id="formcont">				
		<form id="myform">
			<p>
				<label for="naam">Name:</label>
				<input type="text" name="name" id="name" size="30" />
			</p>
			<p>
				<label for="email">E-mail:</label>
				<input type="text" name="email" id="email" size="30" />
			</p>
			<p>
				<label for="message">Message:</label>
				<textarea rows="5" cols="30" name="message" id="message"></textarea>
			</p>
			<div id="recaptcha_image"></div>
			<p>
				<input type="text" name="recaptcha_response_field" id="recaptcha_response_field" size="20" />
				<input type="button" value="Submit" id="submit_button" /> 
			</p>
		</form>
	</div>
	<div id="output"></div>
</body>
</html>

PHP e-mail script

So far the client side code, now we need an email script called email.php with following functions:

• One that validates the submitted reCAPTCHA answer against the API,
• has some basic validations on the server side (empty fields)
• sends the e-mail message using the PHPmailer class,
• and responds (echo) the message in JSON format.

<?php
require_once('PHPMailer/class.phpmailer.php');
$resp['status'] = 'error';
$resp['errmessage'] = '';
 
if (!empty($_POST)) {
	if (!empty($_POST['email']) && !empty($_POST['message']) && !empty($_POST['name']) && !empty($_POST['recaptcha_response_field'])) {
		$answer = trim(stripslashes($_POST['recaptcha_response_field']));
		$postData['challenge'] = $_POST['recaptcha_challenge_field'];	
		$postData['response'] = urlencode($answer);
		$postData['remoteip'] = $_SERVER['REMOTE_ADDR'];
		$postData['privatekey'] = 'your private key';
		$ch = curl_init("http://api-verify.recaptcha.net/verify");
		curl_setopt($ch, CURLOPT_POSTFIELDS, $postData);
		curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
		$data = curl_exec($ch);
		curl_close($ch);
		$response = explode(PHP_EOL, $data);
		if ($response[0] == 'true') {
			$mail = new PHPMailer();
			$mail->IsSMTP(); // enable SMTP
			$mail->SMTPDebug = 0;  // debugging: 1 = errors and messages, 2 = messages only
			$mail->SMTPAuth = true;  // authentication enabled
			$mail->SMTPSecure = 'ssl'; // secure transfer enabled REQUIRED for Gmail
			$mail->Host = 'smtp.gmail.com';
			$mail->Port = 465; 
			$mail->Username = 'you at gmail dot com';
			$mail->Password = 'your gmail password';      
			$mail->SetFrom('you@website.com'); 
			$mail->Body = 'Name: '.$_POST['name'] . PHP_EOL . 
				'E-mail: ' . $_POST['email'] . PHP_EOL . PHP_EOL . 
				'Message:' . PHP_EOL . $_POST['message'];
			$mail->Subject = 'Some message from your site';
			$mail->AddAddress('Igetthe@mail.com');
			if (!$mail->Send()) {
				$resp['errmessage'] = 'Mail error: '.$mail->ErrorInfo;
				$resp['status'] = 'success';
			} else {
				$resp['errmessage'] = 'Message submitted succesfully!';
			}
		} else {
			if ($response[1] == 'incorrect-captcha-sol') {
				$resp['errmessage'] = 'The entered text from the Captcha image is wrong.';
			} else {
				$resp['errmessage'] = 'Can\'t validate the Captcha image.';
			}
		}
	} else {
		$resp['errmessage'] = 'Missing required fields!';
	}
} 
echo json_encode($resp);
?>

How-to use it on your website?

if you have finished both files you can use them on your site, upload the two created files, the jQuery library, the Thickbox plugin files and the PHPmailer class (if you don’t have those files on your server). Double check all the paths and add the jQuery library and the Thickbox plugin files to the page header from that page, where you like to place one or more Contact links:

<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="thickbox.js"></script>
<link href="thickbox.css" rel="stylesheet" type="text/css" />

You don’t need to add more jQuery code because the code is already included in the Thickbox plugin file. Use the following code for each link:

<a href="contact-form.html?TB_iframe=true&height=480&width=640" class="thickbox">Contact</a>

That’s all, if you have any questions please post them below. At the moment there is no demo but you can download the example code here.

Similar Posts:

• jQuery form plugin and PHP file uploads
• Ajax requests using jQuery and PHP
• Integrate your MailChimp Newsletter Subscription

Our last tutorial about the flickr API was an example on how-to search the flickr photo database for images using some short PHP code. This time we will use parts from the past tutorial together with some jQuery Ajax requests to show our photo search result without reloading the web page.

jQuery’s Ajax implementation

One of the most powerful jQuery functions is the Ajax function. The function provides enough options to make your XMLHttpRequest flexible enough to define;

• what type of response you need like to handle in your Ajax application (XML, JSON, HTML, script or text)
• an option about what the script need to do before the request is send (validations, set a pre-loading image, etc.)
• What to do after the request and response are successful
• and options like the request URL (f.e. your PHP script), the time-out value and more. Check the jQuery page for all available options.

The Ajax powered flickr image search

In this tutorial we will create a PHP script that will search the flickr database for posted values using the flickr API. On the client site we will use some simple HTML search form and some easy to understand jQuery Ajax code to handle the requests. If you like to test this tutorial code your should try our flickr Ajax search demo.

HTML search form

For this tutorial we create a simple form with only one search field and a button. Below the form we have a DIV container with ID result as placeholder for the images. Inside the header we need to include the latest jQuery library, download a copy from the jQuery website if you haven’t done yet.

<form>
	<div>
		<label>Enter keyword</label>
		<input type="text" name="search" id="search" value="" />
		<input type="button" name="submit" id="searchBtn" value="Search" />
	</div>					
</form>
<div id="result"></div>

jQuery Ajax functions

We use a click event to process the search if the user had clicked the forms button. Before we post the request to our PHP file getFlickr.php, we perform a test for the search field. If there is no search string we return to the document with an error message. Otherwise we send the posted value to our script for further processing. If the response is successful, we pass the data to our target container with the ID result.

$(document).ready(function(){
	$('#searchBtn').click(function() { 
		var searchVal = $('#search').val();
		$.ajax({
			type: 'GET',
			url: 'getFlickr.php',
			data: 'search=' + searchVal,
			dataType: 'html',
			beforeSend: function() {
				$('#result').html('<img src="loading.gif" alt="loading..." />');
				if(!searchVal[0]) {
					$('#result').html('<p>Please enter a keyword as search value.</p>');   	
					return false;
				} 	
			},
			success: function(response) {
				$('#result').html(response);
				tb_init('a.thickbox');
			}
		});
	});
});

PHP code for the flickr API

the following PHP snippet is based on the flickr API tutorial from the last. If you need information about the API methods, please check the previous tutorial.

<?php
class Flickr { 
	private $apiKey = 'YOUR_API_KEY'; 
	public function __construct() {
	} 
	public function search($query = null) { 
		$search = 'http://flickr.com/services/rest/?method=flickr.photos.search&api_key=' . $this->apiKey . '&text=' . urlencode($query) . '&per_page=12&format=php_serial'; 
		$result = file_get_contents($search); 
		$result = unserialize($result); 
		return $result; 
	} 
}
 
if (!empty($_GET['search'])) {
	$Flickr = new Flickr; 
	$data = $Flickr->search(stripslashes($_GET['search'])); 
	$html = '';
	if (!empty($data['photos']['total'])) {
		$html = '<p>Total '.$data['photos']['total'].' photo(s) for this keyword.</p>';	
		foreach($data['photos']['photo'] as $photo) { 
			$html .=  '
			<img src="http://farm' . $photo["farm"] . '.static.flickr.com/' . $photo["server"] . '/' . $photo["id"] . '_' . $photo["secret"] . '_s.jpg" alt="" />'; 
		}
	} else {
		$html = '<p>There are no photos for this keyword.</p>';
	}
	echo $html;
}
?>

In this script we accept only the POST GET values from the HTML form we have created. If the post GET var is empty we stop the script and shoot some default error, because the field validation was already done on the client side. Next we query the flickr API for the search value and if we have a positive result (getting some photos) we use a foreach loop to create the HTML code for the thumbnails (note the _s at the end of the image file name) At the end we echo the response in HTML format. Save this script under the getFlickr.php

If everything works fine and your search has returned some photos, you script should looks like this:

If you need more control on how your form and result should work, check the jQuery documentation. Maybe you like to use more animation effects for the results.
Similar Posts:

• Create custom reCAPTCHA images using their API
• jQuery Contact form for your website
• jQuery form plugin and PHP file uploads

This PHP tutorial will show how to create a simple PHP class to search the flickr site for some photos. To get the data we use the flickr API to run a simple search and return the results in a serialized array.

We will be using the php function "file_get_contents" to receive data from flickr. The data which we will receive will be a serialized PHP array which means all we need to do is unserialize the array and we will easily be able to use the data returned. As an alternative we can use a cURL function to get the data, for example if the function "file_get_contents" is not allowed on your web host.

API Authentication

The API methods we use in this tutorial doesn’t require any authentication, but we need to use an API key. Get your API key on the flickr web application site (You need an Yahoo account to login).

Provide some information about your application:

and obtain your personal flickr API key and secret (We need only the key in this tutorial)

Flickr PHP Class

First we create the class structure for our class, we define a private variable for the "API key", a class constructor and the function that will search later for the images.

class Flickr { 
	private $apiKey = 'YOUR API KEY HERE'; 
 
	public function __construct() {
	} 
 
	public function search($query = null) { 
	} 
}

The API method we will be using is "flickr.photos.search", which has a number of possible parameters. We are able to search by tags, full text, tell the API which user to search for, the minimum date it a photo was uploaded and many more. You can find a list of the parameters in the flickr documentation.

So we’re going to run a full text search and limit the number of results to 50.

 
	public function search($query = null) { 
		$search = 'http://flickr.com/services/rest/?method=flickr.photos.search&api_key=' . $this->apiKey . '&text=' . urlencode($query) . '&per_page=50&format=php_serial';
		$result = file_get_contents($search); 
		$result = unserialize($result); 
	}

Notice at the end of $search we have "format=php_serial" other available response formats are rest, xml-rpc, soap and json.

The data which will be stored in the variable $result is a serialized array, so simply unserialize it and return the data. Find below the complete class code and store the code in a file named "flickr.php"

class Flickr { 
	private $apiKey = 'YOUR API KEY HERE'; 
 
	public function __construct() {
	} 
 
	public function search($query = null) { 
		$search = 'http://flickr.com/services/rest/?method=flickr.photos.search&api_key=' . $this->apiKey . '&text=' . urlencode($query) . '&per_page=50&format=php_serial'; 
		$result = file_get_contents($search); 
		$result = unserialize($result); 
		return $result; 
	} 
}

How-to use our PHP class

Create a new PHP script file and add this code:

require_once('flickr.php'); 
$Flickr = new Flickr; 
$data = $Flickr->search('design inspiration'); 
foreach($data['photos']['photo'] as $photo) { 
	// the image URL becomes somthing like 
	// http://farm{farm-id}.static.flickr.com/{server-id}/{id}_{secret}.jpg  
	echo '<img src="http://farm' . $photo["farm"] . '.static.flickr.com/' . $photo["server"] . '/' . $photo["id"] . '_' . $photo["secret"] . '.jpg">'; 
}

This file simply includes the flickr class we wrote, creates a new instance of the class, runs a search for "design inspiration" and finally loops through the returned data and sends the output to the browser.

Similar Posts:

• Ajax requests using jQuery and PHP
• First steps within the Zend Framework
• Create custom backups from your website using cURL

There are so many possibilities why a website went off-line, all of them have one in common: Your visitors can’t access your site and maybe they will never come back!

Possible problems why a website might be off-line:

• Web server or network is down – A very common problem, there is so much computer technology used…
• Some web service has stopped working – It might be just one of them; MySQL, Apache or Named/Bind and your website doesn’t function for 100%
• Too much traffic on your site – Most web servers doesn’t have the capacity for a high traffic website. 500 visitors at the same time might be enough to make your site slow or that a web server crashes.
• External serving problems; a name server or DNS server is down – this one is nasty; if your DNS zone is down, it’s possible that you see the problem a day later, while others see your site down since hours.
• A script stopped working properly – If a script is written and tested everything looks fine, but what if you get some external content via RSS or by user input? Sometimes a simple, but not standard, text character can break your website.
• At last but not least “the hacker” – there are so many people on the web trying to bring a website down.

Even if you try to do anything to protect your website or application against all the trouble above, you’re not safe for a failure. You have to monitor your website and hopefully a problem is notified fast enough before you loose a lot of visitors.

Some of you will say:

“I don’t need to pay for a service, because my hosting provider is doing this for free!”

That’s right many good providers will monitor the server you’re hosting on and/or they provide tools which will monitor your server or website. If you use them, check if these tests are done by a server outside from the network where your website or server is hosted. If there is a problem in the rack or router where the monitoring server and your website is located, you will never get a message about the down-time.

Some other important feature for international websites, is the ability to do test from different locations around the world. A problem might exist for only people from some continent, if your business has to take care about this, you should know about problems happen far away from your websites location.

Website monitoring is not a protection against failures but the following features will help you to “tackle” problems very fast:

• Monitor from different locations – if one fails the bot has to use the next one
• Multiple notification options – SMS/text messages and email are required, if you can send a downtime message to more than one person, do this!
• Tests for specific content – Just a ping or HTTP header is often not enough, test for specific text on your site
• Adjustable values for a timeout – Some websites need more time than others to get loaded.

(Screenshot response times Site24×7)

If your website and server is working fine, the number of downtime messages should be very low. If you need to spend several dollars a month for SMS/text messages, it might be usefull to spend this money for better hosting. Website monitoring is to get warned if something went wrong.

Website Monitoring Service Provider

In this article we review three website monitoring service provider, all of them offer a great service product and you find them in a lower price segment. That will say, these services are acceptable for most of the websites on the Internet.

I used Site24×7 since they started offering services a few years ago. They offer anything you need to monitor your server or website; Tests on websites or server ports (you can monitor every server port) are only a view options. Visit their website for all the features they offer. They offer a free account and  15day trials for their paid services, if you use the standard or premium service you pay for each single test period  and location. If you need multiple test locations, you should use the premium plan because this plan includes 6 free locations for each test. If you need more than one website tested from multiple locations, than is this provider more expansive than others.

Hyperspin is monitoring provider who offers a lot of features and also a great reseller program. If you’re looking for a way to monetize your websites traffic, by offering your own monitoring service, you should try them. All test features are available and they have multiple locations and you can setup four of them as a global setting for all your tests. They don’t charge you for using all the locations. They offer discounts if you buy more or if you pay in upfront for a whole year. I stopped using them because their control panel was several times not accessible from my laptop (using different IP addresses).

Pingdom is the current servuice I’m using to monitor all my websites. Their control panel and website looks very modern and they offering a great plan with five tests for only $9.95/month. They offer e-mail, SMS/text message notifications and a some great integration with Twitter. Multiple test locations are included without any additional charge. I like the fast and clear interface and off course the price. I’m sure I will keep using them the next years.

While most of the features for these three website monitoring service providers are the same, is the pricing very different. I’m sure all three working great, just try them.Similar Posts:

• Is your website is down? Know before your visitors do!
• How-to choose a WordPress Hosting Provider
• .tel domain launch, the next mobile story

If you need to spam protect your contact, comment or any other public form you should think about using a CAPTCHA image. A CAPTCHA image is an image with a random text which spam bots can’t read. The visitor need to enter that text into a form field and only if there is a match the form get processed.

Try a search for “CAPTCHA image” on Google and you will find a lot of scripts, some of them are powerful and some of them are not very effective. I’m using reCAPTCHA since several years, their challenge image is very effective and safe and if people can’t read it they can listen to an audio file.

I’m sure you have seen this image before, this is the challenge image you get with their default configuration. if you don’t like this huge RED image (like me) you need a custom theme. The good news is they offer a very powerful API system for the client side and also for the server side. In this tutorial we use some jQuery code together with the reCAPTCHA ajax library to generate the challenge images. The validation process is done by a PHP script that use a simple cURL function to submit the request and response to the reCAPTCHA server to test the submitted match. We use also the jQuery form plugin to process the form fields and client side validation.

If you like to see how it looks like check this custom CAPTCHA theme demo page.

reCAPTCHA client side script

Before we start we need to register a domain name at the reCAPTCHA website to receive a public and private key. To create a custom challenge image the Ajax way, we need to include the external file recaptcha_ajax.js and we use the following JavaScript code:

var RecaptchaOptions = {
	theme : 'custom'
};
Recaptcha.create('your public key', 'recaptcha_image', RecaptchaOptions);
Recaptcha.focus_response_field();

There is only one option required for this custom function, check this link if you like to set more options.
Next we need a small HTML snippet to show the challenge image:

<div id="recaptcha_image"></div>
<p>
	<input type="text" name="recaptcha_response_field" id="recaptcha_response_field" size="30" />
	<input type="submit" value="Submit" id="submit_button" /> 
</p>

To get this working you need to create a form text field with the name and ID recaptcha_response_field, use the same ID name of the target DIV container as you used in the JavaScript function. Using both snippets in used in a HTML page will generate a neutral CAPTCHA image like:

The current code doesn’t process our CAPTCHA validation script. We do this using jQuery and the jQuery form plugin. In this tutorial we do not explain how the plugin works, we did that already in this jQuery form plugin tutorial. In the next JavaScript snippet we check if the text field is not empty and if there is a response we hide the form and show the response in the DIV container output.

$(document).ready(function() { 
	var options = { 
        target:        '#output',   // target element(s) to be updated with server response 
        beforeSubmit:  showRequest,  // pre-submit callback 
        success:       showResponse,  // post-submit callback 
        url:       'recaptcha.php'  // override for form's 'action' attribute 
    }; 
    $('#myform').submit(function() { 
        $(this).ajaxSubmit(options); 
        return false; 
    });
	var RecaptchaOptions = {
		theme : 'custom'
	};
 	Recaptcha.create('your public key', 'recaptcha_image', RecaptchaOptions);
}); 
// pre-submit callback 
function showRequest(formData, jqForm, options) { 
	var resp_field = $('input[name=recaptcha_response_field]').fieldValue();
	if (!resp_field[0]) { 
		alert('You need to enter the validation string.'); 
		return false; 
	} 
} 
// post-submit callback 
function showResponse(responseText, statusText)  { 
    if (statusText == 'success' && responseText != '') {
    	$('#formcont').html(''); 
	} else {
		alert('Error while processing your request\nPlease try it again on a later moment.'); 
	}
}

Server side validation script

Next we need to create a PHP script called recaptcha.php that will validate the entered text from our CAPTCHA image.

if (!empty($_POST['recaptcha_response_field'])) {
	$answer = trim(stripslashes($_POST['recaptcha_response_field']));
	$postData['challenge'] = $_POST['recaptcha_challenge_field'];	
	$postData['response'] = urlencode($answer);
	$postData['remoteip'] = $_SERVER['REMOTE_ADDR'];
	$postData['privatekey'] = 'your private key';
	$ch = curl_init("http://api-verify.recaptcha.net/verify");
	curl_setopt($ch, CURLOPT_POSTFIELDS, $postData);
	curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
	$data = curl_exec($ch);
	curl_close($ch);
	$response = explode(PHP_EOL, $data);
	if ($response[0] == 'true') {
		echo 'Success, you may proceed!';
	} else {
		echo 'Error, please try again.';
		// check the API documentation for detailed error reports
	}
}

In this script we create a post array for the cURL function and post all the data to the reCAPTCHA API URL. Note all used variables are required, the post variable recaptcha_challenge_field is generated by the client API. The value for the challenge entry need to be encoded before we can post that value to the reCAPTCHA API. After we received the response we split the string and check if the first part is equal to true and output a success or error message which is presented in the target DIV container.

If you like to use this script on your own website feel free to download the script on our PHP script forum.Similar Posts:

• jQuery Contact form for your website
• Ajax requests using jQuery and PHP
• jQuery form plugin and PHP file uploads

If you try to monetize your blog with Google Adsense you might have noticed that this is not an easy job. Blog reader are very focused on reading the content and writing comments. Many readers will not visit your site since they read your blogs in a RSS reader. That will say that we need a very flexible Adsense plugin to place our ads on the right place in our blogs articles. Some of you will say “I place them always on place A, B and C”, but I’m sure that this will not work all the time.

We need a plugin that has the following features:

• Single blog post placements
• Unlimited number of ad layouts
• Easy to integrate with each blog post using tags
• NO revenue share with the plugin author!

Additionally we like to see features like:

• IP-based filter functions
• Alternative ads for the IP filter
• Using ad code from other networks than Google Adsense

For this review we selected the 5 WordPress plugins because they have recent updates (active projects) and many features:

Adsense Daemon

This plugin supports three different Adsense layouts. All configured ads are placed on all your blog pages (single view). For each layout you have the control (7 options) where each ad will show up. The plugin has basic features and acts very static. A good plugin if you don’t need so much functions.

AdSense Integrator

If you need a more flexible plugin, you should check this Adsense plugin for WordPress. It has all the features we mentioned above and more: Default settings for automatic placement, full control about which pages have to show the automatic placed ads and a CSS margin for some better ad placement. Revenue share is enabled by default, but you can change this setting (if you don’t like to support the developer with 4% of all your ad impressions).

Everything seems working, except the single ad placement
With every placement the “initial” ad is placed too, maybe a recent bug? I posted this to the WordPress forum and will post the result here. Anyway a good plugin if this bug is fixed.

All in One Adsense and YPN!

Great plugin idea on how to configure your blog using Google Adsense or  YPN (Yahoo Network). While the configuration options are very comfortable is this plugin less flexible. All settings are site-wide and valid for all ad formats.

The plugin offers an option to use multiple ad formats, a random function will show them all. I don’t think that this really works (maybe for different colors?). There is an option to disable ads for single pages, but this will disable all ads on that single page. While this plugin looks really good, I will not use it.

Easy AdSense

If you check the WordPress plugin page you should think that this is a great plugin, but I deactivated the plugin very quickly. At the moment that the plugin was activated, it shows already the Adsense ads from the plugin author and also at least one link to his website on each of your blog pages. I need to mention that I choose the plugin because according the author, is this version more advanced and doesn’t include a revenue share. The plugin has a lot of functions to configure the different products like Adsense for search and feeds and of course the content and link units. I’m sure you can treat the setting that way to get a static ad setup for your site, but I don’t like a plugin that includes code in my site without permission and that’s the reason why my advice is to NOT using this plugin. You never know what a future version will do with your website!

Quick Adsense

Finally a plugin that has all important features and works for 100%! Using this plugin you have all the options you need for your blog site: Static placements for your whole website, custom placements for your posts using simple snippets or just disable ads for a single post. This plugin has more features:

• Add your Adsense code to your blog posts and your sidebar widgets, all settings are controlled through a single settings page.
• You don’t need to remember the tag names, just place them using quick tags in the HTML mode of your editor.
• There is space for 10 different ad layouts for the blog pages and 3 in your sidebar.
• There are no strings attached will say no revenue share or unwanted links, the only thing the author asks is to place a link or button.

There is one feature missing; the IP filter with the option to show alternative ads. Since this feature is very special and should work together with a GEO location script, I think I can miss this feature for now.

At the end I must say I go for the Quick Adsense plugin, because I need a plugin that makes it possible to place the ads on locations I choose while writing a blog post. The Adsense Integrator is also a good plugin, but because of the bug in the current version it’s not useful for my website.Similar Posts:

• Useful Plugins for your bbpress Forum
• AdSense for Domains, just another Domain Parking Service?
• A new Wordpress theme for our blog