Their is a way to reset this, simply add hd_off=1 to the following Vimeo embed code on the end of the src URI:

<iframe src="http://player.vimeo.com/video/51120422?title=1&byline=1&portrait=1&hd_off=1" width="500" height="281" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>

I haven’t been able to test this exhaustively, but having spent a few minutes testing this fixed the issue.

One of my personal dislikes is the Dropdown box (or the HTML Select element to give it its proper name). For anything more than a dozen options they become horrible to use on any screen or device. In certain circumstances it can help the user interaction experience to break the options out of the dropdown box and represent them close to the dropdown box. I don’t recommend hiding the dropdown box for accessibility reasons.

Below is a basic example of a colour picker that could be used in an online shop.

@font-face {
	font-family: 'TimesModernCondensed';
	src: url('../fonts/timesmodconlightdc-webfont.svg#TimesModernCondensedDCCnLtDC') format('svg');
	font-weight: normal;
	font-style: normal;
}

N.B: Don’t be tempted to change the text after the ‘#’ as this has to reference the embedded font name within the file. Font Squirrel gets this automatically, leave it as it is or you’ll cause yourself unnecessary pain like I went through…

I spent a while trying to find the best way to export a public Facebook pages posts in the form of an RSS feed. Facebook don’t provide an easy way to do this (only on Notifications, e.g. facebook.com/notifications.php), although it can be done with a workaround in 2 different ways.

Via Twitter

You can connect a Facebook page to Twitter and any new posts will automatically be sent to a Twitter account you specify (you can do this through facebook.com/twitter/). With this carried out, you can then access the RSS feed of the Twitter account. This works but confines you to the 140 characters limit and will include a link back to the original Facebook post within the tweet.

The long way round

Another way would be to make a system to automatically create an RSS feed from the Facebook pages JSON feed (example: https://graph.facebook.com/pagename or id/feed). This has the benefit of displaying your Facebook posts in full. The downside is of course the extra work and complication involved.

The challenge is to make the correct decisions when adding social media features, it’s all too easy to add 20 ‘sharing’ buttons to a page when trying to cover all the bases and end up creating an awful user experience. The key is to know which social media services demographics best match the demographics and the type of info being shared by a company or organisation. Basically trying to find a best fit, if one exists.

Facebook

Facebook over the past 2 years has grown to become a huge social platform. They have 500 million registered members, and 200+ million of those use it through mobile devices and both stats are growing steadily (see www.facebook.com/press/info.php?statistics). A wide variety of age groups use Facebook, although it is heavily slanted towards teenagers and ’20-somethings’, this is changing gradually though as Facebook becomes synonymous with using the Internet.

Age Range: All (13 y/o’s and over).
Location: Generally US, Europe and South America have very high use, although it is quickly spreading in Asia, Middle East and beyond.

Marketing with Facebook can be carried out via 2 main methods:
Fan Pages allow standard Facebook users to ‘Like’ them, which means that anything published to the Fan Page will be seen by everyone who has ‘Liked’ it. This creates a valuable communication stream which is best used with weekly/bi-weekly updates to ensure regular contact, although it’s important to make sure you don’t spam the user as you’ll likely dilute the usefulness of the tool and/or lose them as a ‘fan’. There is also a spin-off of this whereby users can allowed to ‘Share’ or ‘Like’ specific webpages, which is used to good effect on news items, video or other similar individual pieces of content. A good example of this is the ability to share a video on YouTube to your Facebook account.

Facebook Ads allow an advertiser to focus ads to Facebook users via specific demographics such as age, location and interests. Due to Facebook users supplying this information via their profiles this helps to make advertising as pin-point as is possible on the internet at the moment, which is much more accurate than almost all over alternatives.

Twitter

Twitter is similar in some respects to Facebook, but has some key differences. Twitter is designed for much more verbose communication with a 140 character limit, and an emphasis on time sensitivity. Twitter has ~150 million registered users, although its churn rate (the number of users that sign up and don’t use their account again) is widely regarded as being far higher than Facebook. Twitter stats.

Age Range: All (13 y/o’s and over).
Location: Significant usage almost everywhere.

Marketing is generally best done via encouraging retweeting (which is the equivalent of repeating a specific piece of information, thus adding kudos). This is often described as something ‘going viral’ on the internet. Twitter is used to publicise pretty much anything, although it’s best used as bait (due to the limited number of characters) to link to breaking news or similar situations.

LinkedIn

LinkedIn is primarily used for professional contacts to build a network of people they know via employment both past and present. There are 80 million users, although 40 million are based in the US which weaken its appeal outside of the US. LinkedIn stats.

Age Range: All (18 y/o’s and over).
Location: Significant usage US mostly, but still common in Europe.

Marketing can be carried out similarily to Facebook, by allowing people to share content to LinkedIn this content would then be visible to all of their contacts. Marketing aimed towards LinkedIn (due to the nature of LinkedIn) is best done for any information that is work related, thus is more niche than what you would share on Facebook.

Conclusions

Each service is significantly different, in some cases all 3 may be useful to visitors if a website has a wide range of content but is unlikely. Try not to clog a website with 100 ways to share content when only 2 are really popular as you’ll sacrifice a lot of page space and confuse some users, not to mention increase page loading times.

Without having to be a genius $page is the current page number and $numpages is the total number of pages that a post has been converted into by WordPress.

Example: To have something appear only on the first page of a paginated post use:

if($page == 1 || $numpages == 1) {
	//will only appear on first page
}

Example: To have something appear only on the last page of a paginated post use:

if($page == $numpages) {
	//will only appear on last page
}

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 while ago I thought about how best to create a more modern and useful email signature. At the same time I was doing some work with Google Analytics and thought it might be useful to track how many people click on my website link in my signature. I decided to use the following bit of code which would track it:

<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.