Step 1 – Find the page feed for the Fan Page
The basic URL format of a Facebook fan page feed is:

https://graph.facebook.com/ID of Page/feed

If you can’t find your unique Page ID read this guide.
Test it by opening the link in another browser window. If you get a whole load of data in square and curly brackets (it’s JSON) that contains posts from your fan page then you’re set for Step 2.

*Please note that this URL gets every post from your Wall/Stream limited to about the 50 most recent from what I’ve seen. This includes everything that other people have posted as well in the form of their posts or comments, etc.

Step 2 – Extract the last status from the feed URL data

Here comes the basic PHP code, you need to put in the Page ID for the

$pageID

variable:

$pageID = "ID of Page"
$url = "https://graph.facebook.com/". $pageID ."/feed";
$json = file_get_contents($url);
$jsonData = json_decode($json);

foreach($jsonData->data as $val) {
	if($val->from->id == $pageID) { //find the first matching post/status by a fan page admin
		$message = $val->message;
		echo $message;
		break; //stop looping on most recent status posted by page admin
	}
}

Things to consider

Extracting the data from Facebook directly using a server-side approach should not be used for production as it’s really inefficient as it adds a noticeable pause to page loading times and will break if Facebook is slow in responding. I provided a basic demo to show how easy it can be done, but you should expand on this by storing the data extracted in a database or file on your server via CRON jobs. Another alternative would be to do it client-side with JavaScript, it depends on the frequency the Fan page data you want is expected to change and what you’re doing with it.

$(document).ready(function() {
	var myDomain = ["www.ajgraham.com", "testing.ajgraham.com", "lifestream.ajgraham.com"]; //do NOT include the http:// pls!
	$("a[href^='http://']").each(function() {
		var slicedHref = $(this).attr('href').slice(7);
		var slashPosition = slicedHref.indexOf("/");
		if (slashPosition != -1) {
			slicedHref = slicedHref.slice(0,(slashPosition));
		}
		var matchCounter = 0;
		for (i=0;i<myDomain.length;i++) {
			if (slicedHref.indexOf(myDomain[i]) == -1) {
				matchCounter++;
			}
		}
		if (matchCounter == myDomain.length) {
			$(this).attr("target","_blank").attr("rel","external").append("<img class='new-window-link' alt='new window' src='http://www.ajgraham.com/wp-content/themes/ajgrahampro/images/external.png' style='padding-left:2px' />");
		}
	});
});

See Demo

Download basic example

Just remember to change

var myDomain = ["www.ajgraham.com", "testing.ajgraham.com", "lifestream.ajgraham.com"];

to your internal domain(s). You can use as many as you like, just don’t include the http:// bit.

Contents

The Objective
The Basics
Including The JavaScript
Explaining The Code
Core Functions
Expanded Functions
Options
HTML
Examples
Download
License
To-Do’s
Change-log

The Objective

The aim was to develop a simple JavaScript form validator plugin to be:

• JQuery based
• Fast and efficient
• Automated (via CSS Classes)
• Adjustable (via option settings)
• Easily expandable

The Basics

From a simplistic overview, the plugin loops around any form with a submit button and validates input elements based on its CSS classes.
The standard CSS classes it works on are:
required – if an input is marked as ‘required’ it simply makes sure the field is not empty.
email – it does a simple regex check to ensure the format is correct.
digit – it checks whether the field only contains numbers 0 to 9.
alpha – checks if the field contains characters a to z and A to Z.

Including the JavaScript

First include JQuery, supports 1.3.2 – 1.4.2:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

Then include our script:

<script type="text/javascript" src="options.validate-form.js"></script>
<script type="text/javascript" src="validate-form.js"></script>

Explaining the Code

Attaching the code automatically to all Forms is carried out by:

$().ready(function() {
	//attach plugin to all forms with a submit button (except for ignored forms)
	$('form:not('+ formsToIgnore() +')').submit(function() {
		var formId = $(this).attr('id');
		var matchingElements = $('form#'+ formId +' input[type=text], form#'+ formId +' textarea, form#'+ formId +' input[type=checkbox]');
		if (!matchingElements == "") {
			var formError = validateForm(formId, matchingElements);
			if (formError == true) {
				return false
			} else {
				return true;
			}
		}
	});
});

If you need eager validation (it annoys me, but some people seem to love it #shake-head), set the options variable eagerValidation=true (see script options or examples), or if you don’t need it, remove it.

//check whether to eagerly validate each field
	if (eagerValidation == true) {
		$('form input[type=text], form textarea, form input[type=checkbox]').focusout(function() {
			var fieldId = $(this).attr('id');
			var formId = $('#'+fieldId).parents('form').attr('id');
			if (validateField(formId, fieldId) == false) {
				removeFieldError(formId, fieldId);
			}
			removeFormError(formId);
			addFormError(formId);
		});
	}

Core Functions

function validateField(formId, fieldId) {
	if (fieldId) {
		removeFieldError(formId, fieldId);

		var element = buildElement(formId, fieldId);
		var fieldValue = jQuery.trim(jQuery(element).val());
		var fieldLength = fieldValue.length;
		var fieldErrorMessage = "";

		if ($(element).hasClass('text')) {
			if ($(element).hasClass('alpha') && fieldLength > 0) { // from string start to end, only contains '-' "whitespace" or 'aA'-'zZ'
				if (validateAlpha(fieldValue) == false) {
					fieldErrorMessage = alphaFieldError;
				}
			} else if ($(element).hasClass('digit') && fieldLength > 0) {
				if (validateDigit(fieldValue) == false) {
					fieldErrorMessage = digitFieldError;
				}
			} else if ($(element).hasClass('email') && fieldLength > 0) {
				if (validateEmail(fieldValue) == false) {
					fieldErrorMessage = emailFieldError;
				}
			} else if ($(element).hasClass('required') && fieldLength == 0) {
				fieldErrorMessage = requiredTextError;
			}
		} else if ($(element).is('.textarea.required') && fieldLength == 0) {
			fieldErrorMessage = requiredTextareaError;
		} else if ($(element).is('.checkbox.required') && !$(element).is(':checked')) {
			fieldErrorMessage = requiredCheckboxError;
		}

		if (!fieldErrorMessage) {
			return false;
		} else {
			if (customErrorSelectors.length > 0) {
				for (i=0;i<customErrorSelectors.length;i++) { //check for overrides
					if (customErrorSelectors[i] == element) {
						fieldErrorMessage = customErrorMessages[i];
					}
				}
			}
			addFieldError(formId, fieldId, fieldErrorMessage);
			return true;
		}
	}
}

function validateForm(formId, matchingElements) {
	removeAllErrors(formId);

	matchingElements.each(function(index) {
		var elementId = $(this).attr('id');
		var fieldErrorStatus = validateField(formId, elementId);
	});

	if (countFormErrors(formId) > 0) {
		if (focusFirstError == true) {
			focusOnFirstError(formId);
		}
		if (errorSummary == true) {
			addFormError(formId);
		}
		return true;
	} else {
		if (errorSummary == true) {
			removeFormError(formId);
		}
		return false;
	}
}

Expanded Functions

function buildElement(formId, fieldId) {
	var element = "form#"+formId+" #"+fieldId;
	return element;
}

function focusOnFirstError(formId) {
	$('form#'+formId+' input.'+inputErrorClass+':first').focus();
}

function formsToIgnore() { //check for forms to ignore
	var formIgnoreItems = "";
	for (i=0;i<ignoreForms.length;i++) {
		if (i>0) {
			formIgnoreItems += ", ";
		}
		formIgnoreItems += ignoreForms[i];
	}
	return formIgnoreItems;
}

function countFormErrors(formId) {
	var errorCounter = $('form#'+formId+' '+inputWrapper+'.'+inputWrapperErrorClass).size();
	return errorCounter;
}

function addFormError(formId) {
	var formSelector = 'form#'+formId;
	var errorMessageSelector = formSelector+' p.error-summary';
	var errorCounter = countFormErrors(formId);
	if (errorCounter > 0) {
		if ($(errorMessageSelector).length) {
			$(errorMessageSelector).html(errorCounter + ' field(s) are invalid.');
		} else {
			$(formSelector).prepend('<p class=\"error-summary\">' + errorCounter + ' field(s) are invalid.</p>');
		}
	}
}

function removeAllErrors(formId) {
	removeFormError(formId);
	removeAllFieldErrors(formId);
}

function removeFormError(formId) {
	$('form#'+formId+' p.error-summary').remove();
}

function removeAllFieldErrors(formId) {
	var formSelector = 'form#'+formId;
	$(formSelector+' '+inputWrapper).removeClass(inputWrapperErrorClass);
	$(formSelector+' input[type=text], '+formSelector+' textarea, '+formSelector+' input[type=checkbox]').removeClass(inputErrorClass);
	$(formSelector+' '+inputWrapper+' p.error-message').remove();
}

function addFieldError(formId, fieldId, fieldErrorMessage) {
	var element = buildElement(formId, fieldId);
	$(element).addClass(inputErrorClass)
			  .parents(inputWrapper).addClass(inputWrapperErrorClass)
									.append('<p class=\"error-message\">>' + fieldErrorMessage + '</p>');
}

function removeFieldError(formId, fieldId) {
	var element = buildElement(formId, fieldId);
	$(element).removeClass(inputErrorClass)
			  .parents(inputWrapper).removeClass(inputWrapperErrorClass);
	$(element).parents(inputWrapper).children('p.error-message').remove();
}

function validateAlpha(alpha) {
	var regex = /^[-\sa-zA-Z]+$/
	return regex.test(alpha);
}

function validateDigit(digit) {
	var regex = /^[0-9]+$/
	return regex.test(digit);
}

function validateEmail(email) {
	var regex = /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/
	return regex.test(email);
}

Options

//Validator options
var eagerValidation = false; //true/false   if set to true, form will eagerly validate each field. False will validate only ever on form submission
var errorSummary = true; //true/false    if set to true will show error summary at the top of the form
var focusFirstError = true; //true/false    if set to true will refocus user input to first error field on form submission
var inputErrorClass = "error";    //set the class name that will be appended to the form input/textarea when an error is detected
var inputWrapper = "p";    //set the element type that is used to wrap the form input/textarea in your forms
var inputWrapperErrorClass = "err";    //set the class name that will be appended to the wrapper of the input/textarea when an error is detected

//Error Messages
var requiredTextError = "cannot be empty"; //Textbox error
var requiredTextareaError = "cannot be empty"; //Textarea error
var requiredCheckboxError = "needs to be ticked"; //Checkbox error
var alphaFieldError = "characters only, no numbers"; //Alpha Textbox error
var digitFieldError = "numbers only, no characters"; //Numeric Textbox error
var emailFieldError = "valid email address only"; //email Textbox error

var ignoreForms = ['#search-form']; //add any forms you need want the form to ignore, e.g search forms, etc. This can be ignored as long as none of the form inputs have 'required' or other validation classes attached

var customErrorSelectors = ['form#testform #el_0','form#testform #el_2']; //include form Id and element Id!
var customErrorMessages = ['this is an error message override, as specified in the config options','this is another error message override']; //Relates directly to customErrorSelectors

HTML

The script assumes an element wrapper is used, and must be included in the options under inputWrapper, the default is <p>. See the examples included for the structure of HTML compatible.

Examples

Simple Example
More Complex Example

Download

Options script – required for validation script to work

Download everything in 1 zipped package

License

Released under MIT License.

To Do’s

• Improve the efficiency of the code execution.
• Add min-length class options for fields.

Change-log

2010/05/20: v0.2 released

<a style="color:#353535" title="www.ajgraham.com/" href="http://www.ajgraham.com/?utm_source=Signature&utm_medium=Email&utm_term=Gmail&utm_campaign=Email%2BSignature">
www.ajgraham.com/
</a>

The inline colour is used so the line isn’t the nasty default blue, change the #colour to anything you like.
Change the title attribute to whatever you like, or omit it.

The only problem with using the above is that using it natively within GMail or an online web based email will not process it, and the only way to use it would be to use the full (nasty) URL like:

http://www.ajgraham.com/?utm_source=Signature&utm_medium=Email&utm_term=Gmail&utm_campaign=Email%2BSignature

There’s a workaround though, but it forces you to use a mail client like Thunderbird or Outlook and use it as part of a signature, which is a bit of a hassle simply to track email signature clicks. Unfortunately, until GMail allows full HTML in its online signatures then this is the only automated way of doing this.

It is interesting how many people click on it though, and the level of potential granularity if you wanted to take it even further to track different sets of email correspondents.

I also decided to create it using Wordpress as having completed 1 Wordpress website recently, and working on another one at the moment, I’ve learnt an alot about it and grown rather fond of it.

I’ve also been developing my own JQuery plugin, which I’m going to release under a GPL license in the next few days. I’ll post more details soon…

Hurrah! No more google.xx which you didn’t want

1/ Checking backlinks (also known as incoming links, inbound links, inlinks, and inward links – basically they’re pages that link to your website/page)

Use a Google Advanced Search: for example http://www.google.co.uk/search?as_lq=google.com&btnG=Search

The basic idea here is to see what websites link to your website. Google (and other Search Engines) use both the number of links and the weight of the website linking to you. I.e the more popular the site that links to you, the more ‘weight’ it adds to your website, the more ‘weight’ your website has the higher up the search ranking your site will be. There are even more complicated factors involved in this algorithm but it’s probably too in depth for this brief guide.

2/ Assuming you have some websites/pages that link to your website it’s a good idea to analyse them for quality. Ideally you want links from reputable websites with a good amount of visitors, this ensures that some of there kudos ‘rubs’ off on you when they link to you.

I’ll continue this subject in another post as I want to cover keyword usage, link formatting and optimising websites…

First I had the idea of pointing them to the official Java install test page at Sun Micro, or the more detailed and thorough page over at http://www.javatester.org/version.html. I thought this was a decent solution, until I found out that if a user has more than 1 version of Java installed then a users Web browser can be set to use a different version of Java than the one that might be getting used for other applications.

Second solution was to use a batch file that would show all versions of Java that were installed on a machine:

java -version
pause

This worked fine I thought. Just create a batch file, put it on an accessible network source and fire round an email with a link to it.

Third solution. I spoke to a friend who is great with Desktop Support/Windows/etc. He managed to write a script that checks the specific version of Java that was needed (in this case jre-1_5_0_18-windows-i586-p.exe) and if its not installed, installs it from a network resource.

@Echo off
cls
Echo Installing Java 1.5.0_18, Please be patient

set temp_file_a=c:\temp_a.txt
set net2=0
if exist %temp_file_a% del %temp_file_a% echo clear temp file

rem get java installations
regedit /e %temp_file_a% “HKEY_LOCAL_MACHINE\SOFTWARE\JavaSoft\Java Plug-in\1.5.0_18″
if exist %temp_file_a% set net2=1
echo checked registry

if %net2% == 0 echo Java 1.5.0_18 Not Installed if %net2% == 1 echo Java 1.5.0_18 Already Installed if %net2% == 1 goto ta05 echo.
echo Installing Java 1.5.0_18. Please be patient \\”jre-1_5_0_18-windows-i586-p.exe” /passive
:ta05

if exist %temp_file_a% del %temp_file_a% cls Echo Java 1.5.0_18 Installed.
pause

This got rolled out via a run once group policy for the 400 users required. From Web Developer to Desktop Support in 3 easy steps

You may also want to categorise your content simply to ensure it isn’t wrongly categorised by filtering software.

I use a method devised by FOSI who are a non-profit organisation who have been devising Internet categorisation techniques since 1994.

Find out more about FOSI.

How to label your website or content.

Start labelling your website or content.

$(document).ready(function(){
	$('img.wrap').each(function() {
		var img_width = $(this).attr('width');
		if(img_width>=375) {
			$('#content').style.clear='left';
		}
	});
})

A couple of months ago I encountered an issue with one of the sites I was developing, www.howdenparkcentre.co.uk. The basic page template for the main content area for most pages includes a primary image, title, sub-title and main text. Due to the way the websites columns are percentage based, i.e. they flex depending on browser resolution, there was an issue where sometimes the customer wanted the text to wrap round the image if the image was portrait, or to drop below if it was landscape. Otherwise there was a risk of text running too narrowly along the side of wider images. Due to all of the websites pages being content managed, and potentially the images being very different dimensions I needed to put in a fix for this.

Below shows the HTML code that calls the JavaScript function.

HTML

<body onLoad="checkImage('ImageId','TextContainerId');">

*Please note after having tested the onLoad option on the actual image (which would have been preferable) it being clear this caused further issues. Due to the way images are cached for the second and subsequent visits to a page the JavaScript would not work as often the image had finished loading (due to it being cached) before the text had even been rendered, which meant the code was not executed properly. Therefore the body onload was required

JavaScript:

function checkImage(imageId,textId) {
	if(document.getElementById(imageId) && document.getElementById(textId)) {
		var id = document.getElementById(imageId);
		if(id.width>=375) {
			var textShift = document.getElementById(textId);
			textShift.style.clear='left';
		}
	}
}

The above code checks if the image is equal or wider than 375px, and if so sets the text container to clear left.