Brightscape

SimplePie & jQuery Flickr Photostream

Rob — Fri, 06 Nov 2009 16:24:16 +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 or set).

I found the scroller worked perfectly in Firefox 3.5, but Safari, Chrome and IE all had issues with scrolling the carousel forward and backwards. Without going into too much detail it looks like a DOM issue with the dynamic images not loading correctly.

I fixed this problem by using 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 a demo of the SimplePie and jQuery Infinite Carousel on this site »

How to do it

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

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

3. Create a PHP page as follows (I’ve commented within the code with some specific instructions) and upload it to your server:

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);
	}
?>


	
	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";
						}
				?>

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

Cronjob Auto Update RSS Cache

Rob — Fri, 09 Oct 2009 12:32:11 +0000

I recently wrote a tutorial on using SimplePie to parse your Google Reader shared items Atom feed (or any other RSS/Atom feed for that matter). However, after implementing it on this site (in the sidebar here) and testing it for a month-or-so, I’ve found page load times are very slow whenever SimplePie parses the feed and updates the cache. I had it set to request an update every hour (3600 seconds), which in hindsight is probably too often for my needs.

The ultimate solution would be for the cache to update in the background, server-side rather than when the page is loaded by a user and the criteria of 3600 seconds has passed since the last update (I.e. to avoid very slow page load and bad user experience). In other words, when users visit the page, the cache has already been updated in the background so the user arrives on the page without a long delay. The PHP in the header of the page simply calls in the information from the cache file, rather than reparsing and caching.

By setting up a cronjob I’ve been able to specify exactly when I want SimplePie to update the cache which means the page on my site loads without having to reparse and cache the feed.

The problem with setting up a cronjob is that my web hosting isn’t setup for cronjobs or scheduled tasks. To achieve this I would need to update my hosting–so I have found another solution to this problem. There are several remote sites that allow you to setup a cronjob on their server, which they then remotely call your file automatically at your specified times.

In the rest of this article I will show you how to create a cronjob file, refer to it in the page you want to display your updated feed, and how to setup the scheduled cronjob via an online scheduled task service. I am basing the rest of this article on the SimplePie tutorial that I wrote previously for example purposes.

SimplePie Example Page

Below is the original code for parsing and pulling in a Google Reader shared items atom feed. Tutorial here.

set_feed_url($url);
	$feed->init();

	$start = 0;
	$length = 5;
	$feed->strip_htmltags(array('img','embed','center','strong'));
?>


	
	SimplePie Test



				SimplePie Test
				
				get_items($start,$length) as $item):
				?>
					get_title(), 0, 45) . '...'; ?> | get_date('j F Y'); ?>
get_description(), 0, 160) . '...'; ?>

Create a Cronjob File

By using the example page above, it is simply a case of copying the PHP at the very top of the code into a separate PHP file. So your PHP file should have the following code:

set_feed_url($url);
	$feed->set_cache_duration(0);
	$feed->set_timeout(5);

	// Change location of cache folder in line below
	$feed->set_cache_location($_SERVER['DOCUMENT_ROOT'] . '/about/cache');
	$feed->init();

	$start = 0;
	$length = 5;
	$feed->strip_htmltags(array('img','embed','center','strong'));
?>

Notice the line $feed->set_cache_duration(0); has a value of 0 so that each time the file is called, it will reparse and update the cache. Also add the line $feed->set_timeout(5); below the cache duration line.

Now upload the PHP file to your server. You will need to refer to this file using the cron service later.

Update SimplePie Example Page

On your original page where the parsed Atom feed appears you will now need to make some changes to the PHP at the top of the page. This is shown below:

set_feed_url($url);
	$feed->set_cache_duration(999999999);
	$feed->set_timeout(-1);
	$feed->init();

	$start = 0;
	$length = 5;
	$feed->strip_htmltags(array('img','embed','center','strong'));
?>


	
	SimplePie Test



				SimplePie Test
				
				get_items($start,$length) as $item):
				?>
					get_title(), 0, 45) . '...'; ?> | get_date('j F Y'); ?>
get_description(), 0, 160) . '...'; ?>

You will notice that the two differences are the inclusion of $feed->set_cache_duration(999999999); and $feed->set_timeout(-1);. This will stop the page reparsing and caching the Atom feed, and instead will use the cached file already run on a scheduled basis via the separate PHP file. Now once you have uploaded your updated SimplePie Example page and the separate PHP file, you will need to setup the cronjob via an online service such as webcron.org.

Setup Cronjob Via WebCron

Services such as webcron are very easy to use, and for many, it’s the only solution for scheduled tasks unless you are prepared to pay for an upgrade with your web host.

Once you have registered as a user, it is a very simple process of referring to the PHP file location and then setting up the cronjob schedule.

To add a new cronjob simply click the link ‘+ Add a cronjob’

On the next page setup a cronjob schedule. This is fairly straight-forward. By selecting All for any category the cronjob will run every five minutes. But if you don’t need to update that often you can specify certain months, days of the week or times of the day.

I set mine up to run every month (All in Month column), every day (All in Day column), only week days (Mon – Fri in Week day column), 10am, 12am, 2pm, 4pm, 6pm, 9pm (10, 12, 14, 16, 18, 21 in Hour column), on the hour (0 in the Minutes column).

Now it is a simple case of submitting your new cronjob and then hitting the test link. You can also track the history to see if there have been any errors in fetching your PHP file and running the cronjob.

September Highlights

Rob — Mon, 28 Sep 2009 16:26:18 +0000

Over the past month I have collated a selection of useful articles and resources relating to web design and search engine optimisation. If you have any highlights from the past month feel free to leave a comment below.

Useful Articles & Resources

Progressive Enhancement and Graceful Degradation: Making a Choice
I’m a big believer in building accessible websites, but where do you draw the line? Browser anomalies still abound in 2009, what sacrifices and necessities do you make in your web designs?

List of Great Firefox Plugins for SEO
A great selection of plugins that make your job as an SEO much quicker. I personally don’t use all of the plugins mentioned in the article, but I can vouch for Search Status, Firebug and Web Developer. Some of the other plugins have options that can be accessed within these three plugins so it’s worth having a good browse around the plugin menus to see what capabilities they have. This will avoid unnecessary plugin installation and subsequent Firefox bloat.

Search Engine Optimisation 101
This is quite a nice guide for those who are new to search engine optimisation. However, I would always recommend doing your own testing and researching from several reputable sources.

101 Website Fixes
An exhaustive list of resources and articles to improve every aspect of your website. This is definitely an article that I will be bookmarking and referring to. The article gives a list of resources that cover the following aspects:

Copywriting
Usability
Search Engine Optimisation
Accessibility
Design
Legal

10 Useful Usability Findings & Guidelines
Useful guidelines from various usability studies that look at where people click on the page, best practice for form design, use of whitespace and the ideal internal search box structure.

jQuery Tools
Noupe has a nice round-up of jQuery Tools. A simple jQuery framework that has a small footprint. The jQuery Tools collection weighs-in at just over 5.5 KB’s making it an ideal script to include on your pages for some nice presentational enhancements. For many web designers jQuery Tools may be all you need to achieve some excellent aesthetic site improvements. Choose which jQuery elements you need for your design whilst avoiding unnecessary code that you don’t need.

Introduction to HTML 5

One of the hottest topics in web design/development is HTML 5. Brad Neuberg gives an excellent Introduction to HTML 5. Brad covers some of the most exciting and interesting elements such as Canvas and SVG and Video in HTML 5.

Source

Google Chrome Frame

Render IE as Google Chrome with Google Chrome Frame. This IE plugin lets developers bring HTML 5 capabilities to Internet Explorer. The plugin is triggered by a meta tag within the page head, and there is a JS script to force the plugin to install on IE. I would assume the forced install will be disabled as standard in many network environments unfortunately.

Source

iPhone Spotify App Review

Rob — Fri, 18 Sep 2009 12:00:29 +0000

There was much speculation suggesting that Apple would reject the iPhone Spotify app due to it’s placement as a direct competitor to Apple’s iTunes Store – giving users the ability to access hundreds of thousands of tunes without having to pay for them individually. However, after a profit sharing deal was settled with Apple, the Spotify app was approved earlier this month.

The Spotify app is only available to Premium subscribers who pay a monthly fee of £9.99 in the UK. The ability to download music onto your iPhone or Android phone is currently only available for users in the UK, Sweden, France and Spain. The Premium account enables users to enjoy their Spotify playlists without advert interruptions as well having access to exclusive releases. Streaming audio on your Mac or PC are also at a higher sound quality (320kbps) than the free edition.

Prior to the iPhone and Android apps, I personally stuck with the free version of Spotify. Now that Spotify has gone mobile, I am trialling a Premium account. This is how I’ve got on so far…

Spotify App Review

The iPhone Spotify App makes it very easy to stream your Spotify playlists over a 3G or WiFi network. But the winning feature has to be the ability to download entire playlists onto your iPhone for playback when you don’t have 3G or WiFi access. Spotify calls these Offline playlists. So you don’t need to stop listening to your music collection when you’re on the Subway!

In order to download your Offline playlists, you will need access to 3G or WiFi. It’s interesting to see real-time updates when you make a change to your playlist on your computer – if you have Spotify open on your iPhone it will update in real-time, making synchronisation very quick and efficient.

Choosing which playlists to download to your iPhone is very easy as well. The large ‘Offline playlists’ button at the top of the screen on playlist view (see image on right) enables you to tick all the playlists you want to make available when you are offline. Downloading playlists is fairly quick, but obviously depends on your WiFi Internet speed.

On the other hand, downloading playlists with 3G is quite slow and should be avoided for large numbers of tracks if possible. Once you are happy with your downloaded playlists you can force the Spotify app to go offline for up to 30 days before you will need to login to the Spotify servers. This can be useful if you plan to go abroad and want to avoid costly data charges, or if you want to listen to music on your iPhone on the airplane.

The overall navigation of the app is quite intuitive and very similar to other iPhone applications. I did find some stability issues where the app crashed when changing tracks, but this has been minimal.

It is worth noting that the Spotify app doesn’t work in the background in the way the built-in iPod application works. This means that reading a text message or navigating away from the Spotify application closes the application completely. This can be somewhat annoying, but I don’t see a solution to this unless Apple built the Spotify apps capabilities into the core operating system of the phone.

The track view is pleasant (see image on right), with a large thumbnail of the album cover, and it is possible to flick through tracks to change songs in this view. Clicking the album image also gives you access to additional features – such as adding the track to other playlists, shuffle and repeat track.

Recommended Features & Improvements

The stability of the application is fairly good, however a couple of crashes suggests that there is room for improvement in this area, and I would hope to see more stability in future releases of the app.

I would like to see the vertical alphabet navigation bar present on many iPhone apps such as Contacts. This feature makes it lightening fast to navigate through contacts and other data on the iPhone. If this was added to the Spotify app it would save on having to type into the search box or scroll endlessly to find a specific track in your playlists.

What features and improvements would you like to see on the iPhone Spotify app?

Conclusion

Overall the iPhone Spotify app is very good. It lets you take large playlists of music with you when you are away from an Internet connection. The sound quality is very good and the application feels responsive and fast. I haven’t tested this application on a 3GS, but I can imagine that it will be even more responsive.

Spotify for iPhone Preview

Spotify posted the following video on their website. It gives a good overview of the features available on the app.

More information available on the official Spotify site.

Show/Hide Content with Noscript, CSS & jQuery

Rob — Wed, 19 Aug 2009 10:14:52 +0000

The following post tackles an issue I came across on a recent project with form validation. I wanted to provide a javascript:history(-1) link to return a user to the previous page whilst retaining text that was entered into the form fields (unlike simply reloading the original page which looses all the form content). However, simply providing a JavaScript link would leave users who have JavaScript disabled orphaned on the page – certainly quite unprofessional and inaccessible.

The percentage of users who have JavaScript disabled is smaller than those who leave JavaScript enabled, but simply relying on global statistics isn’t (in my opinion) enough reason to ignore a percentage of Internet users (especially if there is a fairly simple fix that pleases both parties). According to W3 Schools statistics, 5% of Internet users have JavaScript disabled. In addition to this statistic, more Internet users are turning to browsers such as Firefox with its many customisation options. There are several security add-ons for Firefox that block JavaScript by default and instead allow users to selectively enable JavaScript on a site-by-site basis.

When validating forms I would always recommend using a JavaScript solution that runs client-side to give the user instant feedback (preferably without needing a page reload), along with a server-side validator to deal with users who have JavaScript disabled and to tackle spammers. But this is beyond the scope of this post, and will be dealt with in future posts.

The following code examples show how it’s possible to show a certain portion of content for users with JavaScript enabled whilst hiding another portion designed for those with JavaScript disabled – and vice-versa.

The HTML

The example HTML code below shows two paragraphs of text. One uses a JavaScript link whereas the other uses a normal hyperlink. We can toggle the visibility of the two paragraphs by using a combination of the tag, CSS and jQuery.

Go back to previous page.

The CSS

Within the CSS you need to set the #hasjs paragraph to display:none. We will then use jQuery to override the CSS if JavaScript is enabled.

The jQuery

The following piece of JavaScript tells the browser to hide the #nojs paragraph and show the #js paragraph. This obviously only applies if JavaScript is enabled in the browser.

Put it all together

For the purpose of this demonstration we will include the JavaScript and CSS in the head of the HTML page, but these can both be called from external files.

Please note that you will also need to call the jQuery library either directly from Google Code, or by downloading the latest build and referring to its location on your own server. For caching purposes I call jQuery directly from Google Code so this is how it is shown in the example below.

Show/Hide Example

Go back to previous page.

SimplePie: Parse RSS/Atom Feeds

Rob — Thu, 13 Aug 2009 14:31:20 +0000

I recently wrote a post about using MagpieRSS to parse my Google Reader shared items atom feed. However, I have come across various bugs in the last few days – from extremely slow page loads, out-of-date cache files and character encoding issues.

This is an example of the error message I was having:

Warning: MagpieRSS: Failed to fetch http://www.google.com/reader/public/atom/user%2F13279602483212565421%2Fstate%2Fcom.google%2Fbroadcast (HTTP Error: connection failed (11) in /home/public_html/folder/magpierss/rss_fetch.inc on line 238

I’ve read various articles on the causes of the error. Some suggested an issue with the web host or character encoding problems. Rather than spend hours fixing the issue I decided to try SimplePie instead (something I’ve been meaning to do for a long time).

The following tutorial will talk you through setting up SimplePie and then parsing your Google Reader shared items atom feed (however, the instructions can easily be adapted for parsing Twitter RSS feeds or pretty much any other RSS/Atom feed).

SimpePie requires the following in order to work correctly:

Installing SimplePie

1. Download the latest SimplePie zip file from the official site.

2. Create a folder called php and a folder called cache in the root directory of your site.

3. Change file permissions (CHMOD) on the cache folder to 777 (755 or 775 may also work depending on your server settings).

4. Unzip the SimplePie file that you downloaded, and upload simplepie.inc to the php folder using FTP. Now you are ready to test your server to check that it is compatible with SimplePie.

5. Create a test page to check that SimplePie is correctly parsing your RSS/Atom feed. Copy and paste the following example page into a text editor and change the require location of the simplepie.inc file to match its location on your server. Also change the $url = location to the URL for the RSS/Atom feed you want to parse. Save the file with a .php file extension and upload to your server.

set_feed_url($url);
	$feed->init();

?>


	
	SimplePie Test



				SimplePie Test
				
				get_items() as $item):
				?>
					get_title(); ?> | get_date('j F Y'); ?>
get_description(); ?>

6. Navigate to the URL for the page you just uploaded to your server and you should see your RSS/Atom feed content appear in a rudimentary format. This means it works!

Parsing Google Reader Shared Items

When parsing your shared items you may want some extra control over what elements are shown on your page. The following section looks at some simple implementation changes that will allow you to display your feed content in the format you want.

Control how many feed items are shown

By adding $start = 0; and $length = 5; to the PHP in the head of your page you will be able to control where SimplePie begins its parsing, and how many items are displayed on your page. To add this extra control your page will look as follows:

set_feed_url($url);
	$feed->init();

	$start = 0;
	$length = 5;

?>


	
	SimplePie Test



				SimplePie Test
				
				get_items($start,$length) as $item):
				?>
					get_title(); ?> | get_date('j F Y'); ?>
get_description(); ?>

Notice that the PHP loop within the page body has now changed from: foreach ($feed->get_items() as $item): to: foreach ($feed->get_items($start,$length) as $item):.

I have set it to five in the PHP within the page head, which means SimplePie will parse and display the five most recent feed items.

Truncate long titles

If you are displaying your parsed feed in a sidebar long titles may wrap across several lines. You can control the length of titles that are displayed and add ellipses (…) for long titles to avoid wrapping. To truncate long titles your page will look as follows:

set_feed_url($url);
	$feed->init();

	$start = 0;
	$length = 5;

?>


	
	SimplePie Test



				SimplePie Test
				
				get_items($start,$length) as $item):
				?>
					get_title(), 0, 45) . '...'; ?> | get_date('j F Y'); ?>
get_description(); ?>

Within the body the following change has been made: < ?php echo substr($item->get_title(), 0, 45) . '...'; ?>. This tells SimplePie to show titles of up to 45 characters (this includes symbols and spaces), and then show ellipses (…) to show that the title has been truncated.

Truncate descriptions and exclude elements from display

You can do the same with the RSS/Atom feed description by adding the following code to the standard PHP echo description statement: < ?php echo substr($item->get_description(), 0, 160) . '...'; ?>. This tells SimplePie to display up to 180 characters before truncating the description.

One issue with parsing and displaying the feed description is that images and video boxes will display. This is fine in some situations, but if you want to show your content in a simple form such as in a sidebar, showing this extra content may not be suitable and may break your pages. To deal with these we can specify elements that we don’t want SimplePie to display in the parsed feed. This is done in the page head with the following statement: $feed->strip_htmltags(array());.

This can be adjusted so that we can exclude certain elements from our parsed feed description, as follows: $feed->strip_htmltags(array('img','embed','center','strong'));. You can easily add and remove elements from the string depending on what you want to exclude from display.

Our final page code will look as follows:

set_feed_url($url);
	$feed->init();

	$start = 0;
	$length = 5;
	$feed->strip_htmltags(array('img','embed','center','strong'));
?>


	
	SimplePie Test



				SimplePie Test
				
				get_items($start,$length) as $item):
				?>
					get_title(), 0, 45) . '...'; ?> | get_date('j F Y'); ?>
get_description(), 0, 160) . '...'; ?>

The above code lets you:

Show a set amount of feed items
Truncate long feed titles
Show part of the feed description and truncate it past a certain point
Exclude certain elements from the feed description from being displayed

JavaScript IE6 PNG Fix

Rob — Fri, 31 Jul 2009 13:29:44 +0000

In 2009 you’d think (and hope) that we could completely forget the problems with Internet Explorer 6. One of the issues that has caused me a lot of hassle is IE6s inability to render transparent PNG files correctly.

There are various ways to deal with IE5.5/IE6s PNG problem. I have tried several different ways of handling this situation – from using TwinHelix method, right through to serving alternative image content for IE5.5/IE6 via conditional comments and alternative stylesheets.

I’ve found the problem with the TwinHelix method is page load time is affected quite significantly, then serving alternative content via alternative stylesheets is a time-consuming way to handle this problem.

As I tend to use JavaScript to control various style elements that go above-and-beyond the capabilities of CSS alone, I have decided to use JavaScript to fix PNGs.

The limitation of this solution is that users who disable JavaScript will see the unfixed PNG images on their page if they are using IE5.5/IE6. However, in terms of caching and overall page speed, the small level of users browsing without JavaScript is something that I would balance in favour of a cacheable JavaScript solution to the problem.

I have been using the excellent DD_belatedPNG fix from Diller Design. All credits go to Diller Design, and to find out more please check out their site.

This easy to use method works in the following way:

1. Download the DD_belatedPNG JavaScript file (Right click > Save As). Uncompressed / Compressed. Check for latest version here.

2. Call the JavaScript file within the head section of your page as follows:

3. Create a blank JavaScript file in Note Pad or an equivalent text editor and place the following code into the file, then save the file as pngfix.js:

DD_belatedPNG.fix('.png_bg');

4. In the above code replace .png_bg with any ID or class that you have applied to the image in your HTML code or in your external stylesheet. For example, if you want to apply the fix to your logo, you might give your image the class logo. This would look like the following:

5. If we carry on the example in step four, you would adjust the pngfix.js file as follows:

DD_belatedPNG.fix('.logo');

Other classes can be added by separating each class with a comma (I.e. DD_belatedPNG.fix(’.logo, .icon, img’);).

6. Now call the pngfix.js file in the head of the page below the DD_belated_PNG_0.0.8a.js file as follows:

7. In the head of the page you should have the following:

8. Now we want all other browsers to ignore the PNG fix, so we wrap the two JavaScript files in conditional comments as follows:

Now if you test your page in IE6, you should find transparent PNGs that you have specified in the pngfix.js file are rendered correctly.

3 SEO Add-ons for Firefox

Rob — Wed, 29 Jul 2009 09:53:42 +0000

Statistics suggest more users are switching away from the well-known traditional browsers such as the various iterations of Internet Explorer, and plumping for Firefox and to a smaller extent Google Chrome.

For power-users, Firefox is almost a given choice due to the huge catalogue of Add-ons available on the Mozilla site. Many of these add-ons can improve workflow, save time and give web developers, SEOs and other professionals the information they need right in the browser sidebar or context menus.

The following list of Firefox add-ons are useful for SEOs and accessibility junkies.

SEOpen
SEOpen is a useful add-on which allows you to check Backlinks and Pages Indexed across Google, Yahoo and Bing. There are some additional options for Google, including a PageRank checker, Cached page checker and Related page search feature. SEOpen has several other tools, including a header checker, check robots.txt files, WHOIS lookup and HTML validator. In my opinion, there are other tools that are better or faster at finding certain information so I tend to use SEOpen for purely Backlink checking, HTML validation, and a lazy way to check a robots.txt file for a site.
Web Developer
The Web Developer toolbar is probably my favourite and most useful tool for SEO, Web Design and accessibility. If you setup Web Developer to run as a bar along the top of your browser you can easily enable/disable JavaScript, view your site devoid of CSS, remove all images and check alt text. This tool is a real time-saver. For SEO purposes it is useful to remove JavaScript then check your code to see that content is not missing. This tool can be used for accessibility purposes to see how navigable your site is with various features disabled (I usually disable images and JavaScript as a basic accessibility check). If you have read earlier posts on Brightscape, you will remember that we used the Web Developer toolbar to check the level of compression for CSS, JavaScript files and the use of mod_deflate to compress files.
SearchStatus
This simple add-on sits in the Firefox status bar and gives details on PageRank. It has various other options including highlighting ‘nofollow’ links, keyword density and meta data information. Most options are available by right-clicking on the icon in the status bar – making this a quick and useful tool. Many of the options in SearchStatus are similar to SEOpen, so some experimentation may highlight a winner over these two extensions (I’m putting this on my to-do list).

In a later post I will look at add-ons that can save web designers time by bringing various tools straight to the browser.

Show Shared Google Reader Items on Your Site

Rob — Mon, 20 Jul 2009 16:10:12 +0000

Google recently launched some updates to Google Reader. This includes the ability to search for users who are sharing items publicly from within Reader. You can also search for keywords to find people who are talking about topics of interest to you.

Another addition, is a small icon that you can click to say you liked a particular post. Your name is then shown publicly so that others can see what type of content you are interested in. Google have taken a more social approach to Reader with a few simple additions to what (in my opinion) is probably the best RSS reader around at the moment.

If like me you regularly Share items that you read on Google Reader, you may want to syndicate recent Shared Items on your website. Google provide a simple widget that can be adapted in Google Reader’s settings page and then cut-and-pasted into your website. However, this widget has limitation in terms of integration into your sites overall design.

Another approach is to parse the Atom feed from your Shared Items page.

Use Magpie RSS to Parse Your Feed

1. First you will need to download the latest version of Magpie RSS from here.

2. Unzip Magpie RSS.

3. Download the following rss_parse.inc.txt file (thanks to John Mueller) and save the file as rss_parse.inc (I.e. remove the .txt extension). IMPORTANT: this file replaces the standard rss_parse.inc file that comes with Magpie RSS, so save this file over the rss_parse.inc file in the Magpie RSS folder that you just unzipped.

4. Create a folder for Magpie RSS on your server and upload all the files to this folder. (Remember to upload the adapted rss_parse.inc file from step 4 instead of the rss_parse.inc file that came with Magpie RSS).

5. Within the main Magpie RSS folder on your server, create a subfolder called ‘cache’ and CHMOD the folder to 755 (drwxr-xr-x).

6. Now add the feed to your webpage. The page needs to be saved with the .php file extension. Add the following code to the top of your page (before your HTML content) and adapt the path to cache folder and path to rss_fetch.inc file.

7. Now locate the URL for your Google Reader Shared Items page (E.g. this is mine) and copy your unique number from the URL.

8. Paste your unique number into the code below instead of the asterisks, then copy-and-paste the following code into your page where you want your Shared Items list to be displayed.

Google Reader Shared Items
 
 "); // search for these
 $htmlreplace = array(""", "<", ">"); // replace with these
 // This part displays the shared items feed
 $rss = fetch_rss($sharedfeedurl);
 $countitems = 1;
 foreach ($rss->items as $item ) {
 // get title
 $posttitle = str_replace($htmlfind, $htmlreplace, $item[title]);
 $showtitle = $posttitle;
 // trim the title, if it's too long
 if ( strlen($showtitle) > 50) $showtitle = substr($showtitle, 0, 49) . ' ...';
 $posturl = $item[link];
 $siteurl = $item["link_"];
 $sitename = $item["title_"];
 // adjust the output format, if desired (otherwise style via CSS)
 echo '' . $showtitle . '';
 echo '';
 echo '
 from ' . $sitename . '';
 echo "
 ";
 $countitems += 1;
 if ($countitems > $maxitems) break;
 }
 ?>
 Read more of my shared items...

9. Upload your page to your server, and all-being-well, you should see the last 10 items from your Shared Items in a bullet point list.

Additional Options

1. You can choose how many posts are shown by adjusting the following line of code in the page content:

// maximum number of items displayed
 $maxitems = 10;

2. Long titles are automatically truncated but you can change this setting by adjusting the following line of code in the page content:

// trim the title, if it's too long
 if ( strlen($showtitle) > 50) $showtitle = substr($showtitle, 0, 49) . ' ...';

Google Cutting Back

Rob — Wed, 03 Dec 2008 15:14:12 +0000

Google’s success has climbed almost exponentially with record profits year-on-year as its market share has grown on an unprecedented scale.

Although it looked like the market region occupied by Google could remain recession-proof, it looks like this isn’t necessarily the case. The Wall Street Journal reported on Google tightening its belt.

The WSJ stated, “For much of its 10-year history, Google spent money at a pace that was the marvel of Silicon Valley.” – WSJ.com

Google is well known for its numerous employee perks aimed to keep employees in tip-top condition for coming up with the companies future bright ideas. However, rumours suggest cut backs in this area look likely.

In the past year, Google have moved out of pure Internet advertising, into the realm of TV advertising and products such as Google Checkout. However, these haven’t performed as well as expected, with 97% of revenue still coming from online advertising.

Comments from Eric Schmidt, Google CE, suggests that employee cut backs and the dropping of new projects is a precautionary measure rather than an indication of the overall health of the business. He said, “we have to behave as though we don’t know what’s going to happen.”

Google is looking at generating more growth by putting adverts on products that are presently free to use and have no advertising revenue stream. Google are pulling back in other areas, including finishing the SearchMash project which allows users to view search data in different ways, as well as dropping ‘Lively’. This approach is aimed to put the priority back on Google’s core search provision.

The Big Three

The fact that this global heavy-weight is feeling the heat of the global recession doesn’t bode well for traditional businesses like Ford, GMC and Chrysler – who have been putting forth their cases for US Government bailout funding.

Conditions for the three largest car manufacturers in the US look gloomy, with the WSJ reporting that both GM and Chrysler could collapse by the end of December unless they get billions of dollars in emergency government loans.

Banks Cutting Costs

There are several ways to get in on the action with market volatility. Trading foreign currencies allows retail investors to speculate on fluctuations between currency pairings. The most traded pair being the euro dollar. For corporate institutions there are various solutions to offering fx trading solutions, one being an advanced solution specifically designed to meet the needs of major market players, including central banking software to support large scale institutions with large market capitalizations and liquidity of funds.

Cutting costs in this area is of prime concern for many large banking institutions with the present global crisis biting hard. An advanced solution that can cut costs as well as offer better functionality enables banks to positions themselves more adequately in these difficult financial times.