Few years ago Website designers added footer as simple horizontal links with terms and Copyright details, today it is an experimental playground. Today you can find various kinds of website footer with footers having lots of links (sometimes as high as 50+), some having twitter posts, some having latest or most viewed posts and some having social network links. Website footer today are even used for SEO (Search Engine Optimisation) with links which might make no sense at all to its users, but they are there so that Search Engines find those links or for other bot baits.
I added a basic footer when I started jahajee.com but later wanted to add more content to it. I had my facebook and twiter account which I wanted to add to my website along with my own jahajee account. while such data could be placed in the navigation tabs too but it is not suitable under navigation simply because the link relates to very particular details about me or the website. So when I decided to change the footer, I browsed few popular websites which I liked and came down with few points which I am adding below.
Choosing the content of footer is important. You need to understand that most Users might not even look at your website footer even if it might be the best footer. At the very same time some users always check the website footer as they want to know about you and your website. A decade earlier the footer content involved the details about the website, and still today most of the User expect such details to be there. So while adding the footer to website, you need to make the best use of this expectation !
I had a vague idea of what to include in the content of footer :
1) My Facebook profile link
2) My Twitter profile link
3) My JAHAJEE profile link
4) My Google profile link
5) About Us Page link
6) Terms and Conditions Page link
8) few most viewed post links (maximum 5 links)
So it adds up to almost 13-15 links.
Obviously if the content of footer will have so many links I also need to decide how to place them. My previous footer was having horizontal footer link and if I try the same thing with new changed footer with so many links, then footer links will either break into two lines or overlap in smaller browser.
The other way to show them is in vertical list with categorised links. The best is to categorise them into sections with similar content in each. So items 1-4 can go in one section, items 5-7 in other section and most viewed post in separate section.
So till now I am clear that the footer content will have total 12-15 links in 3 sections. The 3 sections can be arranged vertically as a long list or can be placed horizontally. Placing the contents vertically will waste a lot of space beside it and horizontal placement of sections is preferable. Thus I have a vague picture of my changed 3 column footer.
Lets call the
1st Column of footer - FOLLOW (Detailing about connection)
2nd Column of footer - JAHAJEE (Detailing about jahajee.com)
3rd Column of footer - MOST VIEWED (Detailing about top 4 most viewed Content)
The 3 Column footer will also give me some freedom to easily add new footer link to any section later.
We will generate the complete footer link in PHP simply to include the footer link on every page as an external file.
The "JAHAJEE" footer link are simple links to the relevant pages of the website.
The footer link for the 3rd Column (MOST VIEWED) will be generated using PHP, a server side language. For tutorial purpose a basic "Posts" table is used and its structure is attached below. A very basic PHP code using MySQL database can be done as shown below.
Everytime a blog post is viewed the "shown" count is increased for that blog_id. What we are doing is, arranging the posts as per the "shown" count and limiting it to maximum 5 posts only.
The 5 most viewed footer link is saved in a PHP variable $column3_links for later use.
We will enclose each section in a <div> tag with the relevant links in it. The div tag will be given a particular class name (lets call it "footer_div") so that we can use CSS to design them and show them in different section as we want. The complete footer will be saved as "footer.php" and will be included in every file at the end of the page. The below code can also be used without PHP, but in that case "most viewed post" needs to be replaced by somthing static as per your requirement, also the code then will be placed manually at every page where the footer is required.. I am giving the code relevant to jahajee.com you need to change the link as required.
//$con_data will be your Database connection setting
//Select max 5 posts which are having most viewed (shown)
$query="SELECT DISTINCT Blog_Title,blog_id FROM Posts ORDER BY shown DESC LIMIT 5";
while($footer_link = @mysql_fetch_array ($result))
$column3_links .="<a href='/url-to-post/$id'>$title</a><br/>";
<a href='/about/'>About Us</a><br/>
<a href='/termsofservice.php'>Terms of Service</a><br/>
//Print the footer link of the most viewed post
echo $column3_links ;
Note the extra div in the end with the class defined as "clear", we will talk about it in the later comment where we will start with CSS and give it simple shape.
CSS will help our 3 Column footer take it shape as planned, with three sections in 3 columns. We have defined 2 class viz : "footer_div" and "clear". A very basic CSS for 3 column footer can be obtained by using the following CSS in the <head> section of each webpage showing the footer.
<style type="text/css">BY using CSS we are floating each footer_div to left making it to stack next to each other. You can modify the margin and padding as per your website. The extra div with "clear" class will result an empty div which will ensure that any content below it always remain below the floated footer_div.
While I do understand that this is a very basic CSS, but you can modify it as per your website. In my case the "MOST VIEWED" div size could not fit the long post so I modified only the size of that div. I even added the copyright and browser recommendation in the "clear" div. While I thought to add my CSS for 3 column footer here itself but I know that I will be changing it often, so am not showing. Anyways jahajee.com complete CSS can always be found by looking at the source of this page.