Add a Feefo rating to your site

Feefo is a popular service that allows businesses to aggregate reviews and ratings of their services. You can then promote your fine work to the world in the form of a star rating on your site – hopefully giving your potential customers some confidence in what you’re offering.

Recently I created a generic script for displaying a Feefo rating on your site – on first load the script gets the data from Feefo and renders the data appropriately. It will then save that data in the users session storage for subsequent page loads.

The HTML

Pretty self explanatory. This is the container for the star rating and the Feefo logo:

<div class="feefo-percentage"></div>

The next bit displays the number of reviews the rating was based on – I’ve also added a link opportunity for your Feefo page if required:

<p><a href="">Read the reviews</a> (<span class="feefo-responses">0</span> reviews)</p>

I have generally added this inline but you can also incorporate this in your core JS files or add it to your feefo.js file if you only ever intend to use the script with one site:

<script type="text/javascript">

	/* Feefo setup */

	var feefoLogin = 'www.yoursite.tld';

</script>

Lastly, make a reference to your feefo.js file – this should be called last as it may block the loading of more important objects on your page if loaded in the header:

<script type="text/javascript" src="/path/to/scripts/feefo.js"></script>

The JavaScript

The main JS for the functionality can be put in a file on its own for reuse on multiple sites or templates or incorporated into your larger codebase – ensure it is placed after the script snippet above:

var FeefoData = {

	use: function(data) {

		if (sessionStorage.feefoPercentage && sessionStorage.feefoResponses) {

			feefoPercentage = sessionStorage.feefoPercentage;
			feefoResponses = sessionStorage.feefoResponses;

		} else {

			feefoPercentage = data.FEEDBACKLIST.SUMMARY.AVERAGE;
			feefoResponses = data.FEEDBACKLIST.SUMMARY.TOTALRESPONSES;
			feefoExpires = Date.now();

			sessionStorage.feefoPercentage = feefoPercentage;
			sessionStorage.feefoResponses = feefoResponses;
			sessionStorage.feefoExpires = feefoExpires + (1000 * 60 * 60 * 24);

		}

		var feefoPercentageBlocks = document.querySelectorAll('.feefo-percentage');

		for (var f = 0; f < feefoPercentageBlocks.length; f++) {

			var ghostPercentage = document.createElement('div'),
				activePercentage = document.createElement('div');

			activePercentage.style.width = feefoPercentage + '%';
			activePercentage.setAttribute('title', feefoPercentage + '% approval rating from Feefo');

			feefoPercentageBlocks[f].appendChild(ghostPercentage);
			feefoPercentageBlocks[f].appendChild(activePercentage);

		}

		var feefoResponsesBlocks = document.querySelectorAll('.feefo-responses');

		for (var t = 0; t < feefoResponsesBlocks.length; t++) {

			if ('textContent' in document.body) {
				feefoResponsesBlocks[t].textContent = feefoResponses;
			} else {
				feefoResponsesBlocks[t].innerText = feefoResponses;
			}
		}

	},

	get: function() {

		/* Has data expired? */

		if (sessionStorage.feefoExpires) {

			if (sessionStorage.feefoExpires < Date.now()) {
				sessionStorage.clear();
			}

		} else {

			sessionStorage.clear();

		}


		/* Feefo content */

		if (sessionStorage.feefoPercentage) {

			FeefoData.use();

		} else {

			var head = document.querySelector('head'),
				feefoURI = 'https://www.feefo.com/feefo/xmlfeed.jsp?logon=' + feefoLogin + '&json=true&since=year&limit=0&callback=FeefoData.use',
				scriptElement = document.createElement('script');

			scriptElement.setAttribute('src', feefoURI);
			scriptElement.setAttribute('type', 'text/javascript');
			head.appendChild(scriptElement);

		}

	}

}


/* Run initialisation */

if (window.addEventListener) {
	window.addEventListener('load', FeefoData.get);
} else {
	window.attachEvent('onload', FeefoData.get);
}

The JavaScript loads the data from the Feefo web site then stores the relevant bits into sessionStorage - I also added a timestamp so I can expire the data after a day for those who never close their browsers (so that's me then).

The CSS

Styling for the rating stars and the logo. The logo is in Base64 format and inlined in the CSS below - the stars are in SVG format and have been urlencoded before being inlined:

.feefo-percentage {
	position:relative;
	width:85px;
	height:17px;
}

.feefo-percentage:after {
	content:'';
	background-image: url('data:image/png;base64,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');
	width: 82px;
	height: 19px;
	display: block;
	position: absolute;
	top: -4px;
	right: -92px;
	background-size: 82px 19px;
}

.feefo-percentage > div {
	background-image:url('data:image/svg+xml,%3Csvg%20width%3D%22149%22%20height%3D%2229%22%20viewBox%3D%220%200%20149%2029%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%3E%0A%0A%09%3Csymbol%20id%3D%22sym%22%20viewBox%3D%220%200%2029%2029%22%3E%0A%09%09%3Cpath%20fill%3D%22%23fddf05%22%20d%3D%22m0%2C11.11l10.94%2C0l3.38%2C-11.11l3.38%2C11.11l10.94%2C0l-8.85%2C6.86l3.381%2C11.11l-8.85%2C-6.86l-8.85%2C6.86l3.38%2C-11.11l-8.85%2C-6.86l-0%2C0z%22%2F%3E%0A%09%3C%2Fsymbol%3E%0A%0A%09%3Cg%3E%0A%09%09%3Cuse%20xlink%3Ahref%3D%22%23sym%22%20x%3D%220%22%20y%3D%220%22%20width%3D%2229%22%2F%3E%0A%09%09%3Cuse%20xlink%3Ahref%3D%22%23sym%22%20x%3D%2230%22%20y%3D%220%22%20width%3D%2229%22%2F%3E%0A%09%09%3Cuse%20xlink%3Ahref%3D%22%23sym%22%20x%3D%2260%22%20y%3D%220%22%20width%3D%2229%22%2F%3E%0A%09%09%3Cuse%20xlink%3Ahref%3D%22%23sym%22%20x%3D%2290%22%20y%3D%220%22%20width%3D%2229%22%2F%3E%0A%09%09%3Cuse%20xlink%3Ahref%3D%22%23sym%22%20x%3D%22120%22%20y%3D%220%22%20width%3D%2229%22%2F%3E%0A%09%3C%2Fg%3E%0A%0A%3C%2Fsvg%3E');
	background-repeat:no-repeat;
	position:absolute;
	top:0;
	width:0%;
	height:17px;
	background-size:85px;
	transition:all 2s ease-in-out 1s;
}

.feefo-percentage > div:first-child {
	background-image:url('data:image/svg+xml,%3Csvg%20width%3D%22149%22%20height%3D%2229%22%20viewBox%3D%220%200%20149%2029%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%3E%0A%0A%09%3Csymbol%20id%3D%22sym%22%20viewBox%3D%220%200%2029%2029%22%3E%0A%09%09%3Cpath%20fill%3D%22%23ccc%22%20d%3D%22m0%2C11.11l10.94%2C0l3.38%2C-11.11l3.38%2C11.11l10.94%2C0l-8.85%2C6.86l3.381%2C11.11l-8.85%2C-6.86l-8.85%2C6.86l3.38%2C-11.11l-8.85%2C-6.86l-0%2C0z%22%2F%3E%0A%09%3C%2Fsymbol%3E%0A%0A%09%3Cg%3E%0A%09%09%3Cuse%20xlink%3Ahref%3D%22%23sym%22%20x%3D%220%22%20y%3D%220%22%20width%3D%2229%22%2F%3E%0A%09%09%3Cuse%20xlink%3Ahref%3D%22%23sym%22%20x%3D%2230%22%20y%3D%220%22%20width%3D%2229%22%2F%3E%0A%09%09%3Cuse%20xlink%3Ahref%3D%22%23sym%22%20x%3D%2260%22%20y%3D%220%22%20width%3D%2229%22%2F%3E%0A%09%09%3Cuse%20xlink%3Ahref%3D%22%23sym%22%20x%3D%2290%22%20y%3D%220%22%20width%3D%2229%22%2F%3E%0A%09%09%3Cuse%20xlink%3Ahref%3D%22%23sym%22%20x%3D%22120%22%20y%3D%220%22%20width%3D%2229%22%2F%3E%0A%09%3C%2Fg%3E%0A%0A%3C%2Fsvg%3E');
	width:100%;
}

.feefo-percentage > div:last-child {
	width:0;
}

This script and the related other code should work in IE9 and above, plus all other modern browsers. If you want IE8 support, all you will need to do is replace the SVG backgrounds with something less exotic to the browser, like PNGs, as below:

.feefo-percentage:after {
	background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFIAAAATCAMAAAA09qpgAAABF1BMVEUAAABJRUVJRUVJRUX/3QBHQ0WhjypJRUVJRUVJRUVJRUVJRUVJRUVJRUVJRUVJRUVJRUX/3QBJRUVJRUVJRUVJRUVJRUVIREVJRUVJRUVJRUVJRUVJRUVJRUVJRUVJRUVJRUVJRUVGQ0ZJRUVJRUVDQEdJRUVJRUVJRUX/3QBJRUVJRUVJRUVDQEf/3QD/3QD/3QD/3gBJRUX/3QBJRUX/3QD/5AD/3QD/3QBJRUVJRUVJRUX/5QD/3QD/3QBJRUX/3QBJRUX/3QD/3QD/3QD/3QD/3QD/3QD/3QD/3QD/3QD/3QD/3QD/3QBEQUf/6AD/3QD/3QAtLlD/+QD/3QBJRUX/3QD/3QD/3QD/3QBJRUVJRUX/3QBHMCQSAAAAW3RSTlMAfvzxvA8D7+pS5b6oo51L99TSl4QrHBXarIp3V9+2spJoPzQwJxMI87ZvRiILC/Dn3MKxgR0WoIJcORoP+s3HwLusknBpTEU8Niv59eLd1qeKiHp4ZF5WPzMfnHfWGQAAAoNJREFUOMuFk9d64jAQhQ8hNrhgYxub3kLvATak180m2WzvxX7/54hmjH3B90H+C3wkDUcjzQiAXLaz/TZeoV1X/QY2eb88nM2/TUlOT+azw8ETiKIvOMNuRhRUxAbvAma+Ai6sUN8DMCm4MMZuNIoqb+YYrBkAXyP9CJRFrINX6KZElIsNjoOIo4tYLjHWRXAjPwHQUxq60zxHhJvIZHIHpKTTrO+nDro8W3Yaww4p2Yp9fj/G8hBJn2kBSjqUJTD5eji0xVIulBngvBbKYh64mAXLfcZ6+HsVqmVwGVm2UfIjNAg6qXhsRms6zrLRZLoDzIMVGFkAZiqyXOyJ9X5BUjiQBny1UoGHPO73Ktk9GgzltB/zWcKP4ATE0WA1HTyzvKephFh+gzwF652J1+Cc+ahqRZJMsjYgiZxTEjJ85pF5S9/vkL8EP8nxwzHw9vKZu+rTNLJs8j+JMndLVWTl8pWq4pAAWaJHt5SgWYd2nGB1FXy8sQLhKDwD62YWWEeILGn/RWahLYp1qkOHbku/1TTNKHDxhFkSB9TBMjcVHYqa4WFg3T2B+Xdn7f9hleCduZAx2mksmUqYpcJVZ2o8u4UwS53KEJfTrgiZ7ceWTbbkh1YDY1Mn7LLM8W8RntuRIEOWxkl+967riRHOe1SeJDx/fVwopMa7LV1qGYoenypK00MxOuOoYjZNdOkuJ7imKx4BdAhfw25LGLTvtVOjTqx20fK5QEaVvsPQMk/J0bLKn9Frlj3bj9hrARj6MQaQDy3R8GPK2Epu/awnUdHVFohfPFgvevR6PE4grth2lLpRV1iZ9apa1YY9hHglW1Vto01acnTdkUi1jUI6bZf+Yysv5XnbfvS0KhoAAAAASUVORK5CYII=');
}

.feefo-percentage > div {
	height:16px;
	background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFAAAAAQCAMAAAC2lwjzAAAAJFBMVEUAAAD93wX93wX93wX93wX93wX93wX93wX93wX93wX93wX93wUfG+E4AAAADHRSTlMAw7EMLZJ4SVve9P8upb9vAAABC0lEQVQ4y7XT227DIAyA4R9s1rTv/6ydijnsAmghqdqt0rhJvshxDHagLRGW9bH9vyW0XYC9TmB76whsFw1a6vx+CDu71WdXy5zwMuxHoU6XgiDMDkf72Sf3yNQqBpsrNojzVm9wm7cUR3y3Pbxl7xwXCMk7hw9lta4+1frSm5N6nkqPBf/1B3+7HFZrJt8bVrNBlp29uPHg4AK2WiDV2A78Wg2OzneX+N4ClK21pqT2nWHXz7mcntvHbtWHfe/ZPOTkHjhcnjuz/h1x3MsG1+t9ZECb9beW5k36GIkSM8gYdg0fmtwqLDUZWMaNHa12ZANLB5fV1VqFoql312dYTAXEp97NvYUKoLN/AHmxwMyCHcygAAAAAElFTkSuQmCC);
}

.feefo-percentage > div:first-child {
	background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFAAAAAQCAMAAAC2lwjzAAAAHlBMVEUAAADMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMwLbf+mAAAACnRSTlMAvAstfplLYd3/31pszwAAAPdJREFUOMul09GugyAQRdE9DPb6/19LHBn6ACpgrmlaX8gy5IAHhPqEwPB87XNcfgtc5sC4jRNinhxH58lbHANV1mHJcLOMXkWHwNNtmsCw5ALLk+M0/wUyBGawvpsNtifb4RZQoHUkfxvACiSAoPboJfujXxK03/ue+clJont3A7LBzV39s312KQLoUgtNofagvn7lYhkUKFoDvfVaXnWPsn9o1RZ4HJKfd4fjzLrhbp8s3esABIWUupvVrP853l0SxNACRbBSdo529e79bhucitUdBcDJO5hfl705nDawfNkN9nz9Zs1WPz+E0k6rttzZ/QMTe78BYwWeB9fsKxAAAAAASUVORK5CYII=);
}

Put all that in your IE8 CSS file and you should be done.

Setting up Ubuntu Server 14.04 LTS

Install

This guide is primarily for my own reference; I run a basic server at home for Git repositories and test sites.

My preference is to run the Long Term Support version of Ubuntu Server. For my new machine I’ll be running 14.04 LTS which will have 5 years of support, so until 2019.

Basically I want to set it up and forget about it – what I don’t want to forget is how it’s set up.


Network

First things first – because this is a server and will primarily be accessed by applications and via SSH/sFTP, let’s make a few networking changes.

Static IP address

To make life easier I want the server to have a static IP address that is easy to remember – I have chosen 192.168.1.150

This number is based on my Plusnet routers addressing of 192.168.1.254

iface eth0 inet static
                address  192.168.1.150
                netmask  255.255.255.0
                gateway  192.168.1.254
                dns-nameservers  8.8.8.8  8.8.4.4

The snippet above is placed in your interfaces configuration:

sudo vi /etc/network/interfaces

This was based on the information from the Unixmen page:

To restart your interface use:

sudo ifdown eth0 && sudo ifup eth0

Your new IP address should be active. If not then you can also try rebooting the machine.

sudo reboot

SSH

From another machine you can log in to your server using OpenSSH as installed during the Ubuntu installation.

Log in

From Terminal:

ssh username@192.168.1.150

Type in your password when it prompts you and agree to any other messages.

Passwordless entry

Generate your key on a client machine, in my case a Mac Pro, though this is pretty much the same as most Linux distributions:

ssh-keygen -t rsa -b 4096

Follow the key generation instructions until you are returned to the command prompt.

To transfer the key to the servers authorised hosts file use the command below:

cat ~/.ssh/id_rsa.pub | ssh username@192.168.1.150 "mkdir ~/.ssh; cat >> ~/.ssh/authorized_keys"

This key can now also be used in applications such as Filezilla and Tower 2 as well.

Now that we have access to our server remotely and it can use passwordless entry, we can disable password access in the SSH config file:

sudo vi /etc/ssh/sshd_config

Change the value of the line below to:

PasswordAuthentication no

To apply the new configuration, restart the SSH server:

sudo service ssh restart

Logging more detail

To log more detail about what SSH is doing, change the value of the line below to:

LogLevel VERBOSE

To apply the new configuration, restart the SSH server:

sudo service ssh restart

To view the log use:

sudo vi /var/log/auth.log

 

Commands useful with SSH

Turn the machine off – shutting down and power off:

sudo shutdown -h now

Reboot the machine – shutting down and restart:

sudo reboot

Determine where you are in the file structure:

pwd

Clear the terminal window:

clear

LAMP

 


Git

Open Terminal and run the following command:

sudo apt-get install git-core

You’ll need to create a Git configuration file in your home directory – I’ll use vi, because it’s just so user friendly:

sudo vi ~/.gitconfig

You should now be starting from a fresh/empty file, close vi and run the following commands to add details to your configuration file:

git config --global user.name "gitUserName"
git config --global user.email user.email@domain.co.uk

If you use GitHub use the same details you use to access the web site. Git is now installed and your user details should be saved in the configuration file.

Get the latest updates

Adding the latest version of Git from their package repository – useful on Ubuntu LTS versions where the Ubuntu Universe version is older than the Git version:

sudo add-apt-repository ppa:git-core/ppa
sudo apt-get update
sudo apt-get upgrade

Mirror existing repositories

Mirroring your existing repositories to the new server

Connect Ubuntu to a Samsung M2022w printer

Setting up your Samsung M2022w wireless printer can be a pain if you don’t know where to look – luckily someone has taken that pain upon themselves so you don’t have to.

The Samsung Unified Linux Driver Repository is the place to get your Samsung driver for Ubuntu (or Linux in general).

Start by adding the repository – in Ubuntu Terminal:

sudo wget -O - http://www.bchemnet.com/suldr/suldr.gpg | sudo apt-key add -

Then refresh your updates cache:

sudo apt-get update

Install the driver:

sudo apt-get install suld-driver2-1.00.06

Setting up the printer

With the driver installed you can now set up the printer – find the Printers applet, click ‘Add’.

printer-setup-1

Open ‘Network Printer’, after a short while a whole bunch of options will appear like below. Click on the option titled ‘Samsung M2022 Ser…’ and then ‘Forward’.

printer-setup-2

Some screens will pass that are very self explanatory, you really can’t go wrong. The last screen allows you the option to do a test print, feel free.

printer-setup-3

Click ‘OK’.

Replicating a mySQL database

The database

If you’re running a site that uses mySQL then you’ll need to export the data into a text file (.sql) somewhere on the file system.

If you don’t have root or sudo access then choose somewhere in your home folder:

cd ~/

Then run the following command replacing user_name with your mySQL username,database_name with the name of the database you want to export and filename

Continue reading “Replicating a mySQL database”

Random Terminal commands

A place for Terminal/CLI commands that don’t merit a whole post to themselves. I’ll move the snippet if I do a longer post on the related subject.

Dropbox

Dropbox losses its notification icon on some Ubuntu installs, for me that version is 13.10 – to get it back run the following:

sudo apt-get install libappindicator1
sudo dropbox stop && dropbox start

This adds the icon back into the notification area. Continue reading “Random Terminal commands”

Setting up & using Git on Ubuntu

Installing Git and doing the initial set up is pretty straight-forward. I’m using Ubuntu 13.10 – open Terminal and run the following command:

sudo apt-get install git-core

You’ll need to create a Git configuration file in your home directory – I’ll use vi, because it’s just so user friendly:

sudo vi ~/.gitconfig

You should now be starting from a fresh/empty file, close vi and run the following commands to add details to your configuration file:

git config --global user.name "gitUserName"
git config --global user.email user.email@domain.co.uk

If you use GitHub use the same details you use to access the web site. Git is now installed and your user details should be saved in the configuration file.

Get the latest updates

Adding the latest version of Git from their package repository – useful on Ubuntu LTS versions where the Ubuntu Universe version is older than the Git version:

sudo add-apt-repository ppa:git-core/ppa
sudo apt-get update
sudo apt-get upgrade

Accessing GitHub

If you’re using GitHub as your central repository then you’ll need to do a few things to allow yourself access. First off you’ll need to install OpenSSH and create an authentication key. Once you’ve done that you will need to copy the contents of your public key and add it to your account on GitHub. Click on the account settings link on GitHub – it’s in the top right corner: github-account-links On the left hand side there is a link labelled ‘SSH keys’ – click that: ssh-link-in-left-panel-on-github The resulting page lists any keys you currently have associated to your account. In the top right of the content of the page you’ll have a link to ‘Add SSH key’: add-ssh-link-on-github The next page is quite straight-forward, give your key a title so you can identify it later and then paste the contents of your public key file into the other field: add-ssh-key-form-on-github Save your changes.

Using Git

Some common commands for everyday usage of Git from the command line. Change directory so you are in your repository – then run these commands depending on what you want to do.

Clone a repository

git clone git://github.com/path/to.git

Get status

git status

Update local

git pull

Commit changes

git add "path/to/file.ext"
git commit -m "A useful commit message"
git push

Or if you have a few changes to add at the same time you can run:

git add -A
git commit -m "A useful commit message"
git push

Setting up Apache 2 on Ubuntu

Using my black Apple MacBook (Mid 2007), these are the steps I’ve used to set up Apache 2 on Ubuntu 13.10 with virtual hosts.

Out of the box

Once my Ubuntu install had completed I tried my ‘localhost’ in a browser and got a message telling me the page didn’t exist.

Run the following in Terminal to install Apache from the Ubuntu Universe repositories:

sudo apt-get install apache2

Once complete I tried localhost’ again and the infamous ‘It works!’ text appeared!

Start/Stop/Reload

There are several options for each of these commands – I think I’m right in saying they all do the same thing. Their purpose can be fairly self explanatory but just in case I’ve added a brief note with each.

Start the Apache 2 service; use this command after you have stopped your Apache server for whatever reason:

sudo service apache2 start
sudo start apache2
sudo /etc/init.d/apache2 start

Restart the Apache 2 service; use this command to restart your apache server – this is effectively the same as running ‘stop’ then ‘start’:

sudo service apache2 restart
sudo restart apache2
sudo /etc/init.d/apache2 restart

Reload the Apache 2 service; use this command to gracefully reload the Apache configuration files – use this after making a change to your .conf files:

sudo service apache2 reload
sudo reload apache2
sudo /etc/init.d/apache2 reload

Setting up IMAP from NamesCo on Android

If I’ve set you up at NamesCo with IMAP email then you’ll need to follow these instructions to set up your email on an Android device such as the Nexus 5, Samsung S5 or the HTC One. I’ve used Android 4.4 here as that is the current version, but generally the set-up doesn’t change too much between versions.

In the instructions below, I’ll be setting up email for a web site called protosite.co.uk – where you see that you’ll need to add your own domain name. For a user I’ll be using John Doe; probably best if you replace that name with your own!

IMAP email on Android

Open your email client. The standard client in Android is simply called ‘Email’, then go to ‘Settings’:

  1. Tap ‘Add Account’
  2. Enter your email address – for example ‘john.doe@protosite.co.uk’
  3. Enter the user password given to you when your account was set up
  4. Tap ‘Next’

On the next screen you set-up security:

  1. Enter your username – for example ‘protosite.co.uk_john.doe’
  2. The password should be prefilled – if not then enter the user password given to you when your account was set up
  3. Enter the server name as ‘imap.hosts.co.uk’
  4. Skip to security type and select ‘SSL/TLS’
  5. Tap ‘Next’

On the next screen you set-up how your user sends email:

  1. Skip to security type and select ‘SSL/TLS’
  2. Change the username to ‘protosite.co.uk’
  3. The password should be prefilled – remove this and enter the SMTP password as given to you when your account was set up
  4. Tap ‘Next’

On the next screen you can change how your device interacts with your email account – generally you can leave these at their default but if you wanted your phone to check for mail more often then this where you’d do that.

Setting up IMAP from NamesCo on Mozilla Thunderbird

Setting up Mozilla Thunderbird to use with your NamesCo IMAP email account is fairly straight-forward. Anywhere I have used yourdomain.co.uk’, use your domain as used in your email address after the @ symbol. Where I use ‘your.name’ replace with your name.

Open Thunderbird and open the ‘Account Settings’ – on Ubuntu 13.10 that can be found in the ‘Edit’ menu.

Account settings screen

At the bottom of this screen on the left you’ll see a dropdown menu labelled ‘Account Actions’.

thunderbird-account-action-dropdown

Click on the dropdown and choose ‘Add Mail Account…’ – a new screen will open requesting your name, email address & password.

thunderbird-account-setup-step-1

Fill in the details and click ‘Continue’.

Thunderbird will attempt to find your account setting from Mozillas email database. When it fails it will display a configuration screen where you can add the correct details.

thunderbird-account-setup-step-2

The details for the NamesCo server are:

                   Server hostname    Port   SSL       Authentication
Incoming:   IMAP   imap.hosts.co.uk   993    SSL/TLS   Normal password
Outgoing:   SMTP   smtp.hosts.co.uk   465    SSL/TLS   Normal password

The username for your account should have been supplied to you – it is usually in a format as below:

Username:   yourdomain.co.uk_your.name

Fill in the details and click ‘Continue’ again. Thunderbird should connect to the NamesCo server, close the setup window and show you the ‘Account Settings’ window again.

Click on you email address on the left hand side. On the right you can update your account name with something easier to read:

thunderbird-change-account-name

You can also add your organisation name and a signature on the same screen:

thunderbird-add-organisation-and-signature

On the left under your account name you can see ‘Server Settings’ – click on that and check the box labelled ‘Clean up (“Expunge”) Inbox on Exit’:

thunderbird-expunge-inbox-on-exit

On the left under your account name you can see ‘Junk Settings’ – click on that and check the box labelled ‘Move new junk messages to:’:

thunderbird-junk-settings

On the left click ‘Outgoing Server (SMTP)’. Highlight the SMTP entry that corresponds to your new email account and click ‘Edit…’

thunderbird-smtp-details

The details for your SMTP server should mostly be correct as we set them up earlier – you will need to change the username though as it is different to your email user:

thunderbird-smtp-edit-screen

The settings should be:

Description:              Optional/Leave empty
Server Name:              smtp.hosts.co.uk
Port:                     465

Connection security:      SSL/TLS
Authentication method:    Normal password
User Name:                yourdomain.co.uk

Click ‘OK’.

SMTP password

Assuming all has gone well you should be able to receive email. From another device or from an online email provider test this by sending yourself an email.

When the email arrives reply to it – you will be asked for the SMTP password:

thunderbird-smtp-password

Enter your SMTP password, check the box labelled ‘Use password Mana…’ and click ‘OK’.