We are updating, some features may not work !
Please leave a feedback if you face any problem.

How to add footer for your website ?

983 Views | Rishi Kashyap | 1 FOLLOW

    How to add footer for your website ?


    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.

    Rishi Kashyap | | EDIT | REPLY

      X Footer content matters

      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
      7) Privacy Policy 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.

      Rishi Kashyap | | EDIT | REPLY
        X Footer Link in PHP

        We will generate the complete footer link in PHP simply to include the footer link on every page as an external file.

        Footer link for various Social network websites can be confusing. Facebook and twitter can show the number of subscribers and followers respectively. Some even show the Facebook like button in footer for connecting in one click. I am avoiding such links simply because facebook or Twitter either use javascript or Iframes to show the extra data, this delays the load time of your webpage. I am using the URL of my account to allow users to connect to me. While this may be one click extra for the users, it allows you to design the footer links as you want.

        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.
        //The footer.php
        //$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";
        $result= @mysql_query($query,$con_data);
        while($footer_link = @mysql_fetch_array ($result))
        $column3_links .="<a href='/url-to-post/$id'>$title</a><br/>";
        <div class="footer_div">
        <a href='http://feeds.feedburner.com/Jahajee?format=html'>Subscribe</a><br/>
        <a href='/user/JAHAJEE/'>JAHAJEE</a><br/>
        <a href='https://twitter.com/JAHAJEEcom'>Twitter</a><br/>
        <div class="footer_div">
        <a href='/about/'>About Us</a><br/>
        <a href='/termsofservice.php'>Terms of Service</a><br/>
        <a href='/privacypolicy.php'>Privacy Policy</a>
        <div class="footer_div">
        <u>MOST VIEWED</u><br/>
        //Print the footer link of the most viewed post
        echo $column3_links ;
        <div class="clear"></div>

        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.Footer Link in PHP

        Rishi Kashyap | | EDIT | REPLY
          X Basic CSS for 3 Column footer

          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">
           float: left;
           margin: 10px;
           padding: 10px;
          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.Basic CSS for 3 Column footer

          Rishi Kashyap | | EDIT | REPLY