Robin Parduez | Blog » web design

Load Social Sharing Buttons via Ajax & jQuery

Robin Parduez — Wed, 19 Oct 2011 13:10:22 +0000

I’ve recently been doing a lot of testing to improve page load times using various different techniques. However, I’ve been finding on my own sites and when I visit others, that social media buttons often cause a lot latency on page loading. When it first launched, there were a lot of complaints about the Google+ button slowing down pages significantly. Some SEOs even claimed a drop in rankings, although it’s difficult to verify this. It’s worth noting that Google released an updated version of the button which does load faster.

In the past I’ve covered Google’s take on Page Speed and search rankings, and whether it is becoming a more important feature of the algorithm remains to be seen. Speeding up page load times is good for users, and with rich-media and other bandwidth intensive features on websites continuing to increase, any SEO-friendly way to speed up your pages is a good thing.

Like many other website owners, I have added social interaction buttons to my blog posts, but I have never been happy with the extra lag this causes on page loads.

There are several methods being used by various sites that delay the loading of the social buttons until needed. This can be via the lazy loading technique or by using Ajax to call in the buttons when needed. With this in mind, I have worked on my own solution which I’m going to share with you today.

The following method uses the jQuery framework, and loads the social buttons using an Ajax request when a user hovers over the buttons with their mouse. I have also added a click function for tablets and smartphones, as a mouse hover event is pretty useless on such devices.

View Demo → Download Source Code →

How To Guide

New Improved Code based on feedback in the comments: 30th November 2011

Add the following JavaScript code to the HEAD section of your page:

In your page, add a DIV that contains images of the social buttons as follows (this block will be replaced with the live social buttons when the user hovers over the buttons or clicks for touch devices):
```
   
   
  
```
Finally, create an external file that contains the live social buttons that will replace the above button images. Save the file as social-button-loading.html and save it in the root for your site, I.e. www.example.com/social-button-loading.html. This external file should look as follows:
```
   
  
  
```

I hope you find this useful, and I’d love to hear what impact this has on page load times for you, so please drop me some feedback in the comments below.

Feel free to tweak the code and extend the functionality if you find other uses for it. I’m keenly interested in how this impacts on load times and overall SEO health for websites, so please share your results.

GZIP Compression Techniques for Better Page Speeds

Robin Parduez — Wed, 28 Sep 2011 13:25:40 +0000

“Page speed” and “site speed” have become buzz phrases in the SEO industry since Google started showing site performance data in Webmaster Tools ¹ in December 2009.

In April 2010 Google stated that site speed would be a part of the ranking algorithm. Although it is worth noting that Matt Cutts reminded webmasters that site speed is only a minor ranking factor, and that relevancy is far more important.

Like us, our users place a lot of value in speed – that’s why we’ve decided to take site speed into account in our search rankings. ²

In 2009, Google performed tests to determine the impact of site page speed on user behaviour. As part of this experiment Google intentionally slowed down the rendering of search engine results pages.

Slowing down the search results page by 100 to 400 milliseconds has a measurable impact on the number of searches per user of -0.2% to -0.6%. That’s 0.2% to 0.6% fewer searches for changes under half a second! ³

This therefore raises the question, “How important is site page speed as a ranking factor?”

How Important is Site Page Speed

Matt Cutts reminded webmasters that relevancy is more important than page speed, in fact site page speed is a minor ranking factor at this time, and is just one of over 200 signals used in Google’s ranking algorithm. This could change in future, but page speed should not be seen as a major ranking factor at this time.

Tools of the Trade

It is worth noting that there is a lot of opinion on Google’s Page Speed tool in terms of how useful it is for website owners, and how the information can easily be misinterpreted. The same applies to Yahoo’s YSlow tool, as some of the recommendations are simply not feasible for smaller website owners. Therefore, I recommend looking at speed data for your site from a variety of sources, and avoid making drastic changes to your site unless you fully understand the implications of such changes.

Pingdom.com – Free tool, useful graph feature highlighting problems on pages and slow loading scripts
Loads.in – Free tool to test site speed in multiple locations
Site-Perf.com – Free tool for testing with specific browsers and other useful options

In isolation, the above tools have limited scope, but running your site URLs through a number of tools will highlight any problem pages that are taking too long to render. There are other premium tools such as CloudShare for much more detailed testing and monitoring of performance.

The purpose of this article is not to enter the debate as to how good or bad Google’s Page Speed tool is, but rather to provide a robust method for speeding up your website – whether you choose to use Google Page Speed or not.

User-experience is an important consideration that goes beyond simply SEO benefits, especially when considering Google’s studies on page load time. Therefore, it is good practice to consider site performance as long as page speed improvements are implemented correctly, and never at the expense of providing good-quality, relevant content.

The old rule “test and test again” comes to mind when tweaking your sites performance.

GZIP Content for Improved Page Speed

I’ve been experimenting with a number of different techniques to speed up page load time. My aim was to increase rendering time for mobile and tablet devices rather than as a specific SEO consideration. The tweak that had the biggest impact in my experiments was GZIP compression of content. Any small SEO benefit from a fast website is welcome but not a large factor in my experiments, whereas a fast loading site is pleasing to users.

Before implementing any of the following techniques, I recommend running your pages through Google Page Speed, Yahoo YSlow and some of the tools mentioned above, as well as this GZIP testing tool, (to check whether GZIP is already implemented and give you page size details as shown below). Keep a spreadsheet of performance data to act as a benchmark. This is useful for seeing what changes have an impact on your page load times.

A Page with no GZIP compression

A Page with GZIP compression

As you can see in the images above, GZIP compression drastically reduces the size of a page if it is enabled. In the lower image, a reduction of 65% has been achieved.

The following tips will not work for every website, and it is assumed you are using PHP on an Apache server, with the ability to create .htaccess files. It is possible to implement compression on other servers, but this is beyond the scope of this article.

GZIP Content at Server-Level

If you have access to your server and can add (or edit) an .htaccess file in the root folder (I.e. located here www.example.com/.htaccess), you can simply add the following line of code to GZIP your site content:

  
  mod_gzip_on         Yes  
  mod_gzip_dechunk    Yes  
  mod_gzip_item_include file      \.(html|htm|css|js|php|xml)$  
  mod_gzip_item_include handler   ^cgi-script$  
  mod_gzip_item_include mime      ^text\.*  
  mod_gzip_item_include mime      ^application/x-javascript.*  
  mod_gzip_item_exclude mime      ^image/.*

WARNING: Be extremely careful when editing your .htaccess file. Always backup your .htaccess file and be prepared to roll back if your site doesn’t perform as expected.

GZIP Content on Shared Hosting Using PHP

Some shared hosting services don’t have the GZIP option enabled on the server which means the above technique will have no effect on site performance. If that is the case and you aren’t seeing improvements in page load times from your earlier benchmarks, there is another method that will work, however it has the disadvantage of being CPU intensive, and is somewhat awkward. However, you may decide to try it on larger external files that you call on every page (I.e. CSS or JavaScript file) initially to see what impact it has on page load times.

There are in fact several ways to implement this method, but I have found the following method to work the best. If you are familiar with using PHP includes, you could automatically call the PHP into your pages.

At the beginning of your pages (must be PHP pages), you add the following code:

...

To be more thorough, the above code can be extended to ensure the GZIP module is switched off after use. To do this, you need to add some code to the top and bottom of your pages (this can also apply to JavaScript and CSS files).

...

You can add the above code to external JavaScript and CSS files as well, but you need to change the name of these files as follows (and remember to update your pages to refer to the .css.php and .js.php file extensions):

http://www.example.com/css/stylesheet.css.php
http://www.example.com/js/javascript.js.php

Below is an example of how this would look for an external CSS file:


body {
  font-family:helvetica,arial,sans-serif;
  font-size:13px
}
article,aside,figure,footer,header,
hgroup,nav,section {
  display:block
}
...

By using one of the above methods you should be able to compress content on your site and benefit from faster page load times, but as mentioned before, thoroughly test any server-level changes that you make, as servers can be setup to behave differently. I have tested the PHP GZIP method in various browsers with no bugs or issues, but again, be sure to perform your own tests on a variety of browsers and on different platforms.

SimplePie & jQuery Flickr Photostream

Robin Parduez — Mon, 05 Sep 2011 14:10:29 +0000

If you want to display a number of photos on your website, jQuery Infinite Carousel is a very good option. This carousel works really well when you have a list of images on your page, but it threw up a number of problems when calling images dynamically on page load (I.e. your latest Flickr Photostream).

After making some of my own tweaks, and combining the carousel with SimplePie RSS feed parsing, I’ve now got a very nice carousel slider that works well across most (modern) browsers.

The following code uses SimplePie to parse the Flickr feed, cache the images into a folder, and then dynamically pull the images into the HTML on page load.

I also setup a cronjob to automatically update the cache on a weekly basis (I don’t update my Flickr account anymore than that).

This fixed the issue with the carousel and sped up page loads because the images are called from a cache folder rather than being downloaded each time from the Flickr API.

It’s important that the cronjob is in place; otherwise SimplePie will parse the Flickr feed on each load (or however often you set the cache to expire). I covered this in a previous post regarding parsing of Google Reader shared items.

See demo here →

How to do it

1. Download carousel.js from here and upload to a folder on your server (I.e. www.example.com/js/carousel.js)

2. Download SimplePie here and follow the instructions for installing SimplePie on your server.

3. Create a PHP page made up of the following elements (I’ve commented within the code with some specific instructions) and upload it to your server:

PHP: Place this code at start of HTML page

set_feed_url($url);

// This allows the cronjob to handle image caching rather than slow page loads as SimplePie parses the feed each time
$feed->set_cache_duration(999999999);
$feed->set_timeout(-1);

// Change the location below to where you have placed your cache folder and CHMOD the cache folder to 755 or 777
$feed->set_cache_location($_SERVER['DOCUMENT_ROOT'] . '/folder/cache');
$feed->init();

$feed->handle_content_type();

function image_from_description($data) {
  preg_match_all('/]*)>/i', $data, $matches);
  return $matches[1][0];
  }

  function select_image($img, $size) {
    $img = explode('/', $img);
    $filename = array_pop($img);

    $s = array(
    '_s.', // square
    '_t.', // thumb
    '_m.', // small
    '.',   // medium
    '_b.'  // large
    );

 $img[] = preg_replace('/(_(s|t|m|b))?\./i', $s[$size], $filename);
 return implode('/', $img);
 }
?>

HTML/PHP: The rest of the HTML page looks like this




  
  SimplePie and Infinite Carousel Example
  
  
  
  


  SimplePie and Infinite Carousel Example
  
  
  
  get_items() as $item): ?>
  get_enclosure()) {
    $img = image_from_description($item->get_description());

/* Choose image size you want to link to (full_url) and display in carousel (thumb_url)
    $full_url = select_image($img, 3);
    $thumb_url = select_image($img, 0);
      echo ''."\n";
    }
  ?>

CSS: Create an external stylesheet like this

.infiniteCarousel {
	width:533px;
	position:relative
}
.infiniteCarousel #flickrgallery {
  /* .infiniteCarousel width - (.wrapper margin-left +
  .wrapper margin-right) */
  width:465px;
  overflow:auto;
  height:110px;
  margin:0 34px;
  position:absolute;
  top:0
}
.infiniteCarousel ul a img {
  border:5px solid #fff;
  -moz-border-radius:5px;
  -webkit-border-radius:5px;
  border-radius:5px
}
.infiniteCarousel #flickrgallery ul {
  width:840px;
  list-style-image:none;
  list-style-position:outside;
  list-style-type:none;
  margin:0;
  padding:0;
  position:absolute;
  top:0
}
.infiniteCarousel ul li {
  display:block;
  float:left;
  padding:0 10px 0 0;
  height:85px;
  width:85px
}
.infiniteCarousel ul li img {
  -moz-transition:border-color 400ms;
  -webkit-transition:border-color 400ms;
  transition:border-color 400ms;
}
.infiniteCarousel ul:hover li img {
  border-color:#fff
}
.infiniteCarousel ul:hover li:hover img {
  border-color:#fff
}
.infiniteCarousel ul li a img {
  display:block
}
.infiniteCarousel .arrowflickr {
  display:block;
  height:85px;
  width:30px;
  /* Add images for forward/back arrows & use negative text-indent 
  to hide arrow characters - uncomment CSS below as necessary */
  /*background:url("http://www.yourwebsite.com/images/arrows.png") no-repeat;
  text-indent:-9999px;*/
  position:absolute;
  top:0;
  cursor:pointer;
  outline:0;
  border:0
}
.infiniteCarousel .forward {
  background-position:-830px -1020px;
  right:0
}
.infiniteCarousel .back {
  background-position:-830px -1128px;
  left:0
}
.infiniteCarousel .forward:hover, 
.infiniteCarousel .back:hover {
  background-color:#fff
}

4. Create the following cronjob PHP file which will tell SimplePie to parse the feed at the time(s) you specify (For a discussion of cronjob see previous post):

set_feed_url($url);

	// Tells SimplePie to update cache every time PHP file is loaded. Cronjob handles specific times that this page is loaded
	$feed->set_cache_duration(0);
	$feed->set_timeout(5);

	// Change the location below to where you have placed your cache folder and CHMOD the cache folder to 755 or 777
	$feed->set_cache_location($_SERVER['DOCUMENT_ROOT'] . '/folder/cache');
	$feed->init();
	$feed->handle_content_type();
	function image_from_description($data) {
    preg_match_all('/]*)>/i', $data, $matches);
    return $matches[1][0];
	}
	function select_image($img, $size) {
    $img = explode('/', $img);
    $filename = array_pop($img); 
    $s = array(
        '_s.', // square
        '_t.', // thumb
        '_m.', // small
        '.',   // medium
        '_b.'  // large
    );
    $img[] = preg_replace('/(_(s|t|m|b))?\./i', $s[$size], $filename);
    return implode('/', $img);
	}
?>

5. Upload PHP file to your server and setup a cronjob to automatically load the file at set time(s).

WordPress SEO Tweaks Without Plugins

Robin Parduez — Fri, 19 Aug 2011 15:00:38 +0000

If possible I like to tweak WordPress installs and avoid adding extraneous plugins. Generally the more plugins you have, the slower your WordPress site loads, and you can have compatibility issues when you upgrade.

One area for consideration is duplicate content, and there are a number of excellent plugins available for handling duplicate content issues. All in One SEO Pack and Joost de Valk’s WordPress SEO Plugin are very good, however, for my personal requirements both these plugins add a lot of unnecessary functionality.

If you prefer full control over your WordPress source code, by making a few slight tweaks you can handle an SEO duplicate content issue using the Meta Robots tag and have more control over page titles. If you are new to SEO or the Meta Robots tag, you can read more about this element here.

Basically, I prefer to noindex,follow category (is_archive()), tag (is_tag()), search (is_search()) and pagination pages (is_paged()). This enables search engines to crawl the pages for links which are subsequently followed. Therefore, the blog homepage and individual posts are indexed as normal, but duplicate content issues with category and tag pages are avoided. Also other unnecessary pages that you wouldn’t want indexed and returned in search results are noindex,follow.

Meta Robots Tag

The code for enabling this feature is as follows, and needs to be included in your header.php file which can be found in your WordPress admin panel under Appearance > Editor > header.php.

";
    } elseif ( is_archive() ) {
    echo "";
    } elseif ( is_search() ) {
    echo "";
    } elseif ( is_paged() ) {
    echo "";
    } else {
    echo "";
    }
?>

You may choose to tweak the above code to enable indexing of category pages (is_archive()) for example. To do this, you would simply delete the line:

elseif ( is_archive() ) {
    echo "";
    }

Title Tag

Another area for consideration is the page title. Again, there are a lot of plugins that make it easy to control titles for different pages. However, if you prefer manual control, you can add the following code to your header.php file which can be found in your WordPress admin panel under Appearance > Editor > header.php.


    <?php wp_title(''); ?><?php if(wp_title('', false)) {
      echo ' | '; } ?><?php bloginfo('name'); if(is_home()) {
      echo ' | '; bloginfo('description'); }
    ?>

The above code basically includes the blog homepage title at the beginning of the title tag on the homepage, and includes the description taken from Settings > General > Tagline. On individual blog post pages, the post title is included on the left–hand side of the title tag, and the blog name is moved to the right–side of the title.

Title Examples

Homepage:
Robin Parduez | Blog | Front-end Development Tips & Ramblings

Blog post:
WordPress SEO Tweaks Without Plugins | Robin Parduez | Blog

Disclaimer

Please test any code changes that you make to your WordPress installation. Test your blog to ensure the meta robots noindex,follow tag is only applied to category, tag, search, pagination pages and index,follow is applied to the blog homepage and individual post pages. Be sure to test your page titles as well, they should follow the pattern shown in the examples above.

There are of course many more features available if you use an SEO plugin, and for some users a plugin will be suitable. You may also wish to tweak the code examples above to meet your needs.

If you have any comments or suggestions please feel free to give some feedback in the comments section below.

Squeeze Your CSS Files Into Shape

Robin Parduez — Thu, 14 Jul 2011 12:40:39 +0000

Reducing file size without compromising functionality is important for forward-thinking web developers. Many modern CSS-driven websites use huge external CSS files of anything up to about 20-25kb.

By using CSS shorthand the overall file size can be reduced, increasing the speed of page loads and decreasing bandwidth usage. Another method is to use a compression utility to remove white-space, similar to JavaScript compression.

A good compression utility is available at CleanCSS which has a variety of options to choose. CleanCSS can arrange your code to reduce character usage, thus decreasing the file size. As with any type of compression it is advisable to keep a backup copy of your stylesheet just in case you aren’t happy with the results.

I have often made simple mistakes that add unnecessary characters to my style sheets. Below are some shorthand ways to reduce the size of your CSS files. It is worth keeping a backup version of your original style sheet just in-case you want to roll back at some point.

Combine Properties

If you define your padding as follows:

padding-top:5px;
padding-bottom:10px;
padding-left:7px;
padding-right:0px

You can simplify this into one line:

padding:5px 0 10px 7px

The rule to remember here is TRouBLe. Define your styles in this order: Top, Right, Bottom, Left. Also notice the right padding is 0, therefore adding ‘px’ or ‘em’ is unnecessary.

When you have matching top and bottom or left and right padding. As follows:

padding-top:12px;
padding-bottom:12px;
padding-right:0px;
padding-left:6px

This can be shortened to:

padding:12px 0 6px

If you have the following situation, you can shorten it as well:

padding-top:10px;
padding-right:20px;
padding-left:20px;
padding-bottom:10px

This can be shortened to:

padding:10px 20px

The above shortening method works for padding and margin.

Shorthand Colours

If you define your colours using the standard 6 digit code, you can shorten certain colours to 3 digits:

Black #000000 becomes #000
White #ffffff becomes #fff

This shorthand also works for more complex colour codes, as long as the 6-digits are made up of triplets that are doubled (web-safe colours as seen here):

Green #99ff33 becomes #9f3
Orange #ffcc00 becomes #fc0
Red #ff3300 becomes #f30

This method or colour shorthand works for all the web-safe colours, and reduces file size.

Combine Elements

If you have an example similar to the following code, you can further reduce file size by combining elements with the same properties into the same string.

p {
border:0;
padding:0;
margin:0;
font-size:1.2em;
color:#000
}
.main-text {
border:0;
padding:0;
margin:0;
font-size:1.2em;
color:#360
}
.required {
border:0;
padding:0;
margin:0;
font-size:1em;
color:#ccc
}

From the above code, some of the elements share the same properties. We can combine these shared elements to save repeating unnecessary code – and thus saving ourselves some more bytes.

p,.main-text,.required {
border:0;
padding:0;
margin:0
}
p, .main-text {
font-size:1.2em
}
p {
color:#000
}
.main-text {
color:#360
}
.required {
font-size:1em;
color:#ccc
}

These are just a few ways to reduce the size of your style sheets.

As mentioned before, there are various online tools that allow you to compress your CSS files if you want to shave even more bytes off your CSS.

GZIP HTML Content on Shared Hosting

Robin Parduez — Fri, 24 Jun 2011 12:45:22 +0000

If you host your website on a shared Apache hosting account, it’s highly unlikely that you will have access to the httpd.conf file to set default GZIP compression for your website files. A quick and simple alternative is to set GZIP compression on each page so that you can effectively compress the HTML output content on page load. Note: This only works for pages with the .php file extension and only GZIPs the HTML.

The PHP code is placed at the very top of your page, I.e. the very first piece of code to be executed on the page. It is also recommended that the closing PHP tag is on the same line as the HTML doctype for optimal backward compatibility.

The following example shows how to place the PHP GZIP code at the top of your pages. It is always advisable to test this on a non–important page before rolling out across all pages on your site.

Rewrite URLs on Apache with mod_rewrite

Robin Parduez — Mon, 06 Jun 2011 13:54:00 +0000

Is your website accessible by typing www.yourdomain.com as well as yourdomain.com, well using mod_rewrite on Apache servers you will be able to control how your URL structure is displayed whichever way the user types in your address. Controlling the URL structure is in fact more important than some people realise.

I have used mod_rewrite on this website so that if the user types www.brightscape.net, brightscape.net, or blog.brightscape.net (the old blog URL), they see a single uniform URL structure. I chose not to display ‘www.’ for my domain. This is personal preference, however I feel the shorter the URL the better. Unnecessary clutter can make your domain name less memorable.

With mod_rewrite on Apache, you still receive all your visitors no matter which of the above URLs they type into the address bar, however, they will see the URL change to your preset structure. Below is an example of how I used mod_rewrite on my own website. I will display examples of how this can be acheived on your own website if it is running on Apache.

Step by step guide

1. Create an .htaccess file

You first need to create an ‘.htaccess’ file that will be placed in your website root folder. To do this open Notepad or another text editor. You simply need to save the empty text file as .htaccess. There should be no other file extention such as .txt, so to do this in Notepad click Save As > Save as type > type in .htaccess > Save. Leave the file open so that we can now add our mod_rewrite code.

2. Add the mod_rewrite code to .htaccess

If you want to display your URLs with www. then use the following code:

RewriteEngine On
RewriteCond %{HTTP_HOST} !^www\.yourdomain\.com$
RewriteRule (.*) http://www.yourdomain.com/$1 [R=301,L]

Copy the above code into your .htaccess file, remembering to change the URL to match your own URL. Save the file and upload it to your root folder. Now test to check that it works correctly. Do this by typing yourdomain.com into the address bar. The URL should change to www.yourdomain.com and load the page. This usually happens in a split second.

If you prefer to display your URL without www. then use the following code:

RewriteEngine On
RewriteCond %{HTTP_HOST} !^yourdomain.com$ [NC]
RewriteRule (.*) http://yourdomain.com/$1 [R=301,L]

As with the previous example, copy the above code into your .htaccess file, remembering to change the URL to match your own URL. Save the file and upload it to your root folder. Test to check that it works correctly. Do this by typing www.yourdomain.com into the address bar. The URL should change to yourdomain.com and load the page.

Additional Options

You can take the above examples further. If you set out your website using a folder structure with index.htm/.html/.php for the file names, then you can make sure that only the folder is displayed like so – rpardz.com/about/ rather than rpardz.com/about/index.php.

To do this you can add the following code to either of the above examples below the coding you have already used.

RewriteCond %{THE_REQUEST} ^GET\ .*/index\.(php|htm|html)\ HTTP
RewriteRule ^(.*)index\.(php|htm|html)$ /$1 [R=301,L]

This will make sure that the folder structure displays the page properly, but ‘index.php’ will not appear in the address bar. You can add additional file extensions by separating them with the pipe symbol | as shown in the above code.

Using PHP Includes for Global Navigation Links

Robin Parduez — Tue, 12 Apr 2011 16:30:17 +0000

If you look after any large sites you will likely know how frustrating it can be when you need to make even minor changes. This can be something as simple as adding a new page to the global navigation.

Traditionally you would need to manually edit every page on the site by adding the relevant code to each page, then uploading each page to your server.

By using PHP includes you will be able to create a single file which is automatically called on each page on the site automatically server-side. Once you have edited each page and included the PHP include code, you will only ever need to edit one file to make changes across the whole site.

The following tutorial will show you how to create a PHP include file for your global navigation, but the principle applies to any other content that you want to add to every page on your site.

Simple PHP Include File for Global Navigation

Firstly you will need to create your global navigation in HTML format in a blank text file. Once you have created the file remember to save it with the .php file extension. I generally call it navigation.php as the filename is quite self explanatory.


Home
Services
Blog
Contact Us
About Us

The above code is a very basic example of a global navigation list that would generally be displayed at the top of every page on the site. Below is the HTML with the PHP include file in position. The HTML file below should also be saved with the .php file extension.

From the code above you will see a short line of PHP code inserted into the HTML where the global navigation should be displayed.

On closer inspection the line of PHP code used for the include is as follows:

You will need to specify the absolute path to the PHP file within your server file structure. For a file included globally across the site it is a good idea to include navigation.php within the root folder of your site. The absolute path will vary depending on your webhost and if it throws up error messages you may need to contact your host to request the absolute path for calling a PHP include file.

The above example is a very simple way to implement a PHP include file within your pages. Once you have tested the code above, you can go through the pages on your site and delete your global navigation code and replace it with . Now when you need to add or remove pages from the global navigation you simply edit the navigation.php file and upload it to your server. This will now automatically change the content on every page that you have added the PHP include file to.

More Advanced PHP Include File Options

The above code shows you the basic principle of using a PHP include file, but what if you want to have an “on state” where your link is styled differently when you are on that page, or you want to show an additional link on one page of your site but not on the rest of your site? Both these scenarios can be achieved using PHP.

Style link for the page you’re on using PHP & CSS

To style the link for the current page, you need to give each page a unique title. To do this, you need to define a variable by using the following code at the beginning of each page . Each page needs a unique name, so in the above example you need to name the Homepage, Services, Blog, Contact Us and About Us pages.

The only thing left to do is to add some CSS properties to your stylesheet for the class ‘on’. This could be a different colour. In the example page below above I have included CSS within the head section of the page which will style the links to red when the visitor is on that specific page.

The following example shows how to uniquely name each page:

Now the navigation.php file needs to be edited so that when the visitor is on the Homepage, a unique class is added to the link for that page. The navigation.php file should be adjusted as follows:


  >Home
  >Services 
  >Blog
  >Contact Us
  >About Us

Using the above principles you can take it a step further by replacing the link with ‘#’ when the visitor is on a specific page.

Remove the link on current page

You will notice in the following example if and else logic has been used. Edit the navigation.php file as follows:


  " >Home
  " >Services 
  " >Blog
  " >Contact Us
  " >About Us

These are just a few basic ways to use PHP includes for global navigation and subsequently defining extra variables. If you have any specific requests please leave a comment and I can create a separate tutorial.

Truncate SimplePie Content with PHP

Robin Parduez — Mon, 11 Apr 2011 12:30:17 +0000

This article is a follow-up to an earlier blog post about using SimplePie to display an RSS feed on your website.

Sometimes it can be useful to ensure that a piece of content stays on a single line (e.g. a title), or make sure that some text stays to less than 255 characters (e.g. a description) and gets truncated after that point.

My previous blog article showed how to do this with PHP, and I will give a brief recap below. However, the focus of this blog post is to improve truncation of content even further.

Old Truncation Technique

The following PHP string truncates or shortens the title to 45 characters and then echo’s the list of titles parsed from an RSS feed and displays it on the page with ellipses (…) appended to the end of the title: < ?php echo substr($item->get_title(), 0, 42) . '...'; ?>

For example: Here Is a Title That Is 42 Characters long… You can see that the title itself is 42 characters long so it hasn’t been truncated, but the PHP has appended ellipses (…) to the end of the title. Doing this is quite unnecessary unless the title is over 42 characters.

Improved Truncation Technique

The way to deal with this more effectively is to determine the length of the string and then only append the ellipses (…) if the length of the string exceeds the parameters we have set.

This can be done as follows:

get_description(), 0, 45);
  $str = $item->get_description();
  if (strlen($str) > 45) echo '...';
?>

To explain the above code line by line, echo substr($item->get_title(), 0, 45);, this line echo’s or outputs the parsed feed title using SimplePie. The substr function returns the portion of string specified by the start and length parameters. In the above case, 0 represents the first character, and 45 represents the 45th character (spaces are included as characters).

If the title is 45 characters or less, the above code works fine and doesn’t append the ellipses (…), which is ideal. However, what if the title is 60 characters in length?

The second line of the above code, $str = $item->get_description(); converts the whole title into a string called $str.

The third line of code uses the strlen function, which returns the length of the given string (which we have called $str). By using an if statement in the final line of code if (strlen($str) > 45) echo '...';, we are saying, if the length of the string is greater than 45 characters show the ellipses (…) otherwise ignore the if statement and don’t show the ellipses (…).

It’s a very simple tweak that can be applied to outputting SimplePie or any other PHP, and it can help to retain a better looking page by avoiding text wrapping.

Compress Pages with MOD_DEFLATE on Apache

Robin Parduez — Fri, 18 Feb 2011 14:03:54 +0000

I have recently been experimenting with mod_deflate on an Apache server to save some bandwidth. If like me, you may have found your host cutting access to your website temporarily if you go over your bandwidth allowance, meaning you have to purchase more bandwidth to get your pages to go ‘live’ again.

However, by using gzip or deflate you can shave off valuable bytes/kilobytes each time pages and files are requested from the server. Although the savings may appear to be small, when these savings are multiplied hundreds or thousands of times over the course of a month it soon highlights the value of using one of these compression techniques.

As I have only tested Apache, this post only relates to Apache compression. Worth noting is that some older browsers don’t support or have issues with compression. This is not an issue for most of the recent browsers. I have been testing my compression on various browsers including IE5, IE6, IE7, Opera 8 & 9, Safari, Camino & Firefox 1 & 2. I haven’t come across any problems with any of these browsers. As mod_deflate is easier and quicker to implement I have stuck with this method, however there are some extra options available if you choose to use mod_gzip compression.

I have stuck with compressing HTML, CSS and JavaScript. To do this, the easiest way is to use an .htaccess file in the root of your website. I use the following line of code saved in the .htaccess file:

AddOutputFilterByType DEFLATE text/html text/plain text/xml text/css

This line of code can be added to an existing .htaccess file in your root directory if you have already set other parameters. You can add or remove other file types from the line of code above, but I found it to be adequate for my needs.

Once you have implemented compression it is important to test the results. The easiest way is by using FireFox coupled with the Web Developer Tools plug-in.

Once the plug-in is installed follow these steps:

Load your website homepage in FireFox
Click tools menu
Navigate to web developer > information > view document size

You should then see a page containing information about your website. This page will contain details about any compression that has been carried out on the web page.

It will give a break-down of the individual elements and scripts as well as a total saving. In my case the result showed: Total 107 KB (138 KB uncompressed) A saving of 31KB.

It may not sound like much, but can certainly add some zip to the rendering of your pages, and reduce bandwidth bills over the course of a month or year. Further details are available at betterexplained.

Official Apache Module mod_deflate information.

UPDATE When testing the compression of my pages, I found that some JS files weren’t being compressed (Use Web Developers Tool – Information > View Document Size). If this is the case for you, you can add the following code to your .htaccess file:


SetOutputFilter DEFLATE