I like writing tutorials/educational stuff (which is the way this site began), and this falls into that niche. Photography is an increasingly important hobby of mine, and this new site will give me a chance to organize my thoughts about photography and also help out others.

As an exercise for myself, I’m also maintaining a Picture of the Day section of the site. The goal is to look through Flickr for one nifty photo each day, post it on the site, and then explain what I do/don’t like about it. You get better by looking at the work of others…

Another ulterior motive is that I want to help promote my other project: Olinda Gibbons Photography. Ideally, Digital Photography How To can be used to generate some ad revenue, but I’d be happy if I can also use it to channel some link juice and traffic back to that site. Ultimately, the photography itself will be much more lucrative for Olinda and me than the writing about it…

Although it’s kind of a work in progress, it’s up, live, and fully functional. I wrote a little bit about how I designed the site elsewhere, and I plan on writing up some more information in the future. That info will likely appear in a new blog portion of olinda-gibbons.com.

In the meantime, one highlight to check out is the portraits portfolio page. It was made possible by a combination of the galleria jquery plugin and the NextGen gallery plugin for WordPress.

To use Google Analytics, you need to place some javascript on your website. A commonly asked question in forums is, “How do I add Google Analytics to my WordPress template?”

Where the Analytics Code Goes

When you sign up for Google Analytics, Google provides you with a short piece of javascript to place on your site. The code should look like this.

<script type="text/javascript">
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script>
<script type="text/javascript">
var pageTracker = _gat._getTracker("UA-2894597-3");
pageTracker._initData();
pageTracker._trackPageview();
</script>

According to Google’s instructions, this needs to be placed at the very end of your site – just before the closing body tag. To do this, we need to find the closing body tag on the WordPress template.

Look In Footer.php

As we previously discovered, a WordPress template is made up of a series of files. Three basic files – header.php, sidebar.php, and footer.php – help build the components of the page.

If your WordPress template follows normal conventions, the closing body tag should be in the footer.php file.

Go to your themes directory of the WordPress installation, navigate to your current theme, and open footer.php. You should see something like this at the end.

<?php wp_footer(); ?>
</body>
</html>

Add a blank line before the closing body tag. Simply copy and paste the javascript code that Google provides on that blank line, save the file, and you’re good to go.

I got the site up and running, updated some content, and then submitted my sitemap information to the Google Webmaster Tools. As usual, the next step is to wait and see how long it takes Google to start regularly indexing the site.

Instant Indexing

When I checked my site’s info in Webmaster Tools the next day, I found something strange – a page in the site was already cached in the index.

I had included a link to the site in the article here. This site has a decent reputation with Google. According to SEO Meter, this site gets crawled every 1 to 2 days.

Apparently, Google crawled the site, followed the link, and cached that page in the index. It has yet to sort through the new links and the sitemap, but the home page is accessible through a Google search.

Get Articles Listed Quickly

This leads me to a pretty useful bit of information. If you have a link on a trusted site to an page that is previously unknown to Google, it will quickly get stored in the index.

I’ve never found this type of quick response with directory listings or forum links. I suppose the difference here is that it’s a direct content to content link that carries some real weight.

If you already run a website – or if you write articles at Associated Content or a similar site – this seems like a pretty good strategy for jump-starting the crawling process. Choose some of your main landing pages and link to them immediately from other sites that you own and write for.

This will send Google your way, get your pages indexed, and start bringing in a modicum of search engine traffic. From there, you can wait for the rest of your link building strategy to help improve your SERP and Page Rank.

The pictures are presented in the mark-up that flickr creates, and I used the styling that came with the template I was working from. It creates a simple two by two square of photos, with a slight gap in between them.

Although I like the way they are presented, I’m not sure I like the mark-up that flickr creates. What would be the simplest, semantic way to mark-up and style images in a small album like this?

Semantic Mark-up: An Unordered List

Flickr places all of the photos in divs. These are then styled to float next to each other or appear however you like.

In my opinion, the most semantic way to mark-up photos like this would be to create an unordered list. A photo album is essentially a list of photos.

This could be an ordered list if the photos were intended to be sequential – like a photo essay or a comic book – but the average photo album is just a collection of pictures.

The mark-up would look something like this.

<ul id="images">
  <li><img src="http://farm4.static.flickr.com/3047/2362739858_c82b4de7c2_s.jpg" /></li>
  <li><img src="http://farm4.static.flickr.com/3047/2362739858_c82b4de7c2_s.jpg" /></li>
  <li><img src="http://farm4.static.flickr.com/3047/2362739858_c82b4de7c2_s.jpg" /></li>
  <li><img src="http://farm4.static.flickr.com/3047/2362739858_c82b4de7c2_s.jpg" /></li>
  <li><img src="http://farm4.static.flickr.com/3047/2362739858_c82b4de7c2_s.jpg" /></li>
  <li><img src="http://farm4.static.flickr.com/3047/2362739858_c82b4de7c2_s.jpg" /></li>
</ul>

The images would then be displayed in a long, vertical list.

Styling – Making the List Inline

In the end, we’d like to have the images sit side by side. Ideally, they’d form a rectangle of either 2 x 3 pictures, or 3 x 2.

The first thing we want to do, then, is remove the list style type, clear the padding/margins of the list, and make the images appear next to each other. The last bit we can achieve by giving the list items the “display: inline” css declaration.

#images {
  list-style-type: none;
  padding: 0;
  margin: 0;
}
 
#images li {
  display: inline;
}

This would create a simple horizontal list, like this…

Width: Restricting the Number of Columns

Notice how the list terminates at the end of its container div and continues on a second line?

Without a width declaration, the unordered list expands as large as wide as it can. When that width limit is hit, it starts a second line, and continues until all of the list items have been displayed.

We can use this to our advantage by setting a width declaration. This allows us to limit the number of images to be displayed in each row.

If our images are 75px square, and we want to display three images across, we can set our width to be about 250px. The extra space can be used later for paddings and margins – but the images will appear left justified within the list container.

#images {
  list-style-type: none;
  padding: 0;
  margin: 0;
  width: 250px;
}
 
#images li {
  display: inline;
}

This would create a list like this…

Finishing Touches: Padding and Borders

With the basic structure complete, we can add a few finishing touches.

First, we might we to add a little padding to the images. This would space them out a few pixels from each other so that they don’t appear so cramped.

#image img {
  padding: 4px;
}

Adding this line to the css file would change the image album to this.

Finally, a cool effect for images is to add a border around the image. If you include a padding value for the img tag, the border is placed 2-3 pixels away from the edge of the picture. It gives a nice framing effect.

#image img {
  padding: 2px;
  margin: 2px;
  border: thin solid black;
}

This final change would look something like this.

By using an unordered list to mark-up your image collection, you end up with semantically correct and simple to style content. Much better, in my opinion, than a string of divs.

In order to maintain the meager search engine and referral traffic that the old pages had, I planned on using 301 Redirects. I figured that I would re-create each of the old articles (~10 total articles) on the new site and set up an individual 301 Redirect to send users and search engine spiders to the new location.

The problem, however, was that the standard .htaccess rewrite that WordPress uses was conflicting with the 301 Redirects. For some reason, they just weren’t working – so I turned to a PHP-based solution.

301 Redirects In htaccess

Normally, you can handle a 301 Redirect with a .htaccess file. You can do this with a single line in your .htaccess file.

redirect 301 /path/to/old/file.html http://newdomain.com/file.html

The first part “redirect 301″ indicates the type of redirect. This tells the browser (or the search engine spider) that the page has permanently moved to the new location. HTTP has several other options. The 302 Redirect, for example, indicates that the move is temporary.

The next two parts indicate the old path to the file and the URL of the new location.

Normally, that’s all there is to it. However, WordPress adds its own layer to the .htaccess file which makes your pretty URLs work. The URL that you request is really just a bunch of variables that tell WordPress what article to pull out of the database and display in the template.

Although you should be able to get the two to work together, I couldn’t. The server was ignoring my 301 Redirect and going directly to the other rewrite rules.

Using PHP to 301 Redirect a WordPress Page

The solution? PHP.

Creating a 301 Redirect in PHP is fairly simple. I’d read about it before, and just the other day I came across a brief article about it in one of my regular RSS feeds.

You use the header() function to send custom headers to the user’s browser. With these, you can tell the browser that you want to initiate a 301 Redirect. You can then tell the browser where to go to find the article.

header("HTTP/1.1 301 Moved Permanently");
header("Location: http://newdomain.com/article.html");

Simply replace the URL with the URL you want to redirect to.

Making It Work With WordPress

If you look in your site’s directory structure, you may realize that the path to your article doesn’t really exist.

Let’s say we want to redirect the article located at http://www.earn-web-cash.com/2008/03/20/useful-wordpress-plugins/. To use PHP, we’d need to create a PHP file to replace the article that is being redirected, and include the snippet of code above.

The problem is that the directory /2008/03/20/useful-wordpress-plugins/ doesn’t exist. Those are parameters sent to the WordPress script to fetch information out of the database.

To make this type of redirect work, we need to create this directory structure. Start at your root, and create the directory “2008.” Create a directory “03″ inside that. Create a directory “20″ inside that. Finally, create the directory “useful-wordpress-plugins” inside that.

You’ll notice that there is a trailing slash in the URL. In a normal directory structure, “useful-wordpress-plugins” is a directory, even though it would seem to represent the file where your article resides. To get the browser to access a PHP file at this location, we place an index.php file in that directory. Then, accessing the URL will automatically pull up index.php.

In short, create /2008/03/20/useful-wordpress-plugins/index.php, add the snippet of code above, and your redirect should work flawlessly.

This is a good way to move a few articles on a site to a new site. If you’re moving an entire site, you’d definitely want to look into using the .htaccess method, or creating a PHP file that dynamically chooses what page to redirect the user to. I only had to move 10 articles, so I created ten php files to do the work for me.

There is one caveat to keep in mind. If your installation of WordPress uses the URL http://www.earn-web-cash.com/2008 to access the yearly archives, you’ll run into a problem. /2008 will now be an actual directory – so the server will try to serve up the directory. You’ll need to change your settings so that the archives are located in something like http://www.earn-web-cash.com/archives/2008.

One of the greatest features is the thousands of plug-ins available for WordPress. You can find a plug-in for just about anything you want to do – or if you have some PHP know-how, you can develop your own.

Here are five basic WordPress plug-ins that I’d recommend using for any project you start.

Akismet – Spam Protection

This plug-in comes pre-installed with WordPress – and there’s absolutely no reason you shouldn’t use it. All In One SEO Plug-In is just what it sounds like. It adds some extra functionality to tweak the SEO of each of your posts and pages.

For example, All In One will automatically generate a description meta tag based on your excerpt and it will automatically generate keywords based on your tags. You can also use this to modify the title element of each page. I’d say it’s a must have for optimizing your website.

Exec-PHP

Early on, I was looking for a way to execute PHP code inside a post. WordPress doesn’t have built-in support for this, so you need to find a plug in to do it.

There are dozens of plug-ins that attempted to implement this feature. Exec PHP is hands down the best that I’ve found. You simply add regular PHP tags to your post and the PHP code will be executed properly. I’ve never run into any bugs while using the plug-in, unlike some other plug-ins I’ve tested.

Per Post CSS and JS

Per Post CSS and JS allows you to attach individual stylesheets or javascript files to your posts or pages. This is great for changing the look of a specific page without creating an entirely new template. By attaching these files to individual posts, you cut down a lot on redundancy.

For example, let’s say you wrote a javascript file that you use in 10% of your posts. Why should it be attached to the other 90% of your posts?

I’ve also found it very useful for creating HTML/CSS/JS tutorials. I can place my sample code in external .css and .js files and have it attached properly to the page. This way I don’t have to write in-line styles to demonstrate functionality.

WP Unformatted

This simple plug-in removes all of the auto-formatting that WordPress adds to your posts. With WP Unformatted, you can add a custom field to your post to tell the plug-in to strip out all of that formatting.

For example, WordPress likes to wrap text in <p> tags. Sometimes – like with forms – this is entirely undesirable. It can mess up your carefully formatted (and syntactically correct) HTML.

By using WP Unformatted, you can add sophisticated mark up to your post content without worrying that WordPress will screw it up with random <p> and <br /> tags.

And Many More…

There are, of course, dozens of other useful plug-ins. I’ve used plenty of other plug-ins that I liked. However, these are the ones that I feel appeal to the widest audience.

No matter what you’re doing, you’ll probably find a use for spam filtering, individualized stylesheets, SEO, PHP, and clean formatting. I would never start another project without these plug-ins.

What else do you find useful?

Uploading the images and creating the album was easy. However, I noticed that the code Google creates to embed the slideshow (a flash file) is not standards compliant – it uses the <embed> tag.

How can we convert this code to a standards compliant version?

The Original Picasa Embed Code

The code that Google generates to embed the flash file uses the embed element. The embed tag includes all of the pertinent information – the swf file, the height, the width, and the parameters.

<embed type="application/x-shockwave-flash"
  src="http://picasaweb.google.com/s/c/bin/slideshow.swf"
  width="288" height="192"
  flashvars="host=picasaweb.google.com&RGB=0x000000&feed=http%3A%2F%2Fpicasaweb.google.com%2Fdata%2Ffeed%2Fapi%2Fuser%2Fslowwalkere%2Falbumid%2F5178325186511467969%3Fkind%3Dphoto%26alt%3Drss"
  pluginspage="http://www.macromedia.com/go/getflashplayer">
</embed>

The problem here is that the code uses the embed tag. This is no longer recognized as a valid html element – although it still functions in most browsers.

Converting Embed to Object

We can, however, convert this embed element into an object element. The object element is standards compliant, and with a few parameters it is compatible across most browsers.

To do this, let’s identify the information that we’ll need from the original Picasa code.

Obviously, we’ll need the flash file. This is the value of the “src=” attribute. We’ll also need the height and width, which are pretty obvious. Finally, we’ll need the parameters to be passed to the flash movie – located in the flashvars parameter.

Here’s what an object element might look like to display a flash movie.

<object type="application/x-shockwave-flash"
  data="flash-file.swf" height="400" width="400">
  <param name="movie" value="flash-file.swf" />
</object>

We create the object and give it the attribute type="application/x-shockwave-flash". This tells the browser it is a flash movie.

We pass the name of the flash file with the data attribute and the “movie” param element – notice that the filename is passed twice here.

Finally, we pass the height and width parameters as attributes to the object element.

Filling Out the Object

Now we can take the values provided for us by Google and create a new, valid object to display the flash slideshow.

The only extra thing we need to know is that we can send another param element – name=”flashVars” – to contain the flash parameters.

<object type="application/x-shockwave-flash"
  data="http://picasaweb.google.com/s/c/bin/slideshow.swf"
  width="288" height="192">
  <param name="movie" value="http://picasaweb.google.com/s/c/bin/slideshow.swf" />
  <param name="flashVars" value="host=picasaweb.google.com&amp;RGB=0x000000&amp;feed=http%3A%2F%2Fpicasaweb.google.com%2Fdata%2Ffeed%2Fapi%2Fuser%2Fslowwalkere%2Falbumid%2F5178325186511467969%3Fkind%3Dphoto%26alt%3Drss" />
</object>

This should do the trick and display our Flash slideshow in a standards compliant way. You should also be able to apply this to any other widget that displays a flash movie.

Also, here are two minor things to keep in mind.

The param elements are self closing – i.e. <param />. The param element doesn’t contain any text, so it must be self closing to be standards compliant.

The flashVars value is constructed as a query string. It utilizes ampersands (&) to separate key/value pairs. Ampersands are a standards no-no – they should be escaped as an html entity (&).

There are a few things you need to keep in mind while writing an XML document, or else the RSS reader will not be able to understand it. It’s better to think of writing XML as writing code than text, because there are some strict syntax rules you need to adhere to.

Balance Opening and Closing Tags

One strict syntax rule of XML is that opening and closing tags must be balanced. For every opening tag, there must be a closing tag.

<item>
  <description>
</item>
 
<item>
  <description></description>
</item>

In this example, the first item element is invalid – because description has no closing tag. The second example is valid, because description is closed. You could also use a self-closing tag if description doesn’t contain a value.

<item>
  <description />
</item>

With a simple feed, it can be easy enough to keep tags balanced. However, it’s a good idea to look into using an XML parser like SimpleXML to build the feed. This ensures that the tags are balanced and that the XML is well-formed.

Ampersands Are Not Allowed

The lovely ampersand – & – is not allowed to appear in an XML document without being escaped (&).

If a browser or feed reader encounters an ampersand that isn’t escaped and that isn’t being used to form a valid entity, the application will simply stop reading. You might overlook this possible problem if your URLs use query strings – and thus have ampersands inside them.

The solution is to escape all of the URLs and data that is going into your feed. The reader will convert & back into & so that your links work correctly. PHP offers a function to help you do that.

$escapedText = htmlentities($unescapedText);

Pass all of the text that needs to be escaped (like your URLs) through the htmlentities function, and your problems will be solved. Incidentally, this will also escape > and < characters.

No Non-Breaking Spaces!

The final tip deals with invalid entities, like  . As mentioned before, ampersands are a strict no-no. They can be used to form entity codes, but they cannot be used by themselves.

If you attempt to create an entity that the XML processor doesn’t recognize, it won’t read it as an entity – it will read it as an ampersand with some text following. For example, &bob; would be read by an XML processor as an ampersand and the word “bob;”.

It would then promptly stop processing your feed.

One common way for this to break your feed is the non-breaking space character –  . These often serve no purpose in the document, but you might get them littered around your source code if you use a WYSIWYG editor.

You could get rid of these by filtering your output through a function that does a str_replace of   with ‘ ‘.

If the non-breaking space character serves a purpose in your document, you can preserve it for the browser but make the XML processor ignore it. This is where CDATA comes in.

<description><![CDATA[This is a description with content that
<strong>shouldn't</strong> be interpeted
by the &nbsp; XML processor.]]></description>

When you wrap text inside that tag – <![CDATA[ and ]]> – you tell the processor to ignore the text and spit it out as is. This can help your non-breaking space character make it to the user. You may also want to use this if your descriptions and content include HTML tags.

Browse the Spec

These are a couple of tips to help you address some of the more common things that will break your XML documents.

However, there are many other minor errors you can come across. The only way to learn about them and solve them is through two things – research and trial and error.

You may want to take some time to browse the XML specification as well as read forums for problems that other people have. Then, test things out and find out what doesn’t work.

For now, let’s stick with the traffic component. Can a social bookmarking site direct significant traffic to your site, and is it worth your trouble to use them?

Case One: Digg

I’ve used a variety of social bookmarking sites while promoting this site – Digg being one of them. Although some people have had tremendous success with Digg, I haven’t. Most of the articles I Digg end up falling off the recently submitted page without too many Diggs.

In the past two months, I’ve had a dozen or so articles go up on Digg and I’ve only gotten 230 visits in return. Most of those articles fall off the page after I’ve gotten a handful of visits.

Two articles were moderately successful. One article I didn’t submit myself – a reader Dugg it and it promptly gained about 20 Diggs. Despite its relative popularity, it didn’t bring in a whole lot of traffic.

Many of my articles are designed to garnish search engine traffic, so that may be why they don’t appeal to users scanning a bookmark list. I did write another article that focused more on an attention grabbing topic and less on search engine juju, and it did ok on Digg (~100 visits).

For whatever reason, Digg hasn’t been tremendously helpful for me. I still leave it on the toolbar at the bottom – so that users can Digg an article they like – but I don’t actively submit many articles hoping for traffic.

Case Two: dZone

While browsing through social bookmarking sites to promote this site, I stumbled on dZone.

At first I was excited. It’s geared towards programmers and web developers, so my technically oriented articles should have done well. Not so much.

Perhaps I haven’t found the right approach to take. Some articles were probably too rudimentary for the savvy audience, while the more advanced articles didn’t have attention grabbing topics.

I’ve gotten a little bit of traffic from dZone – slightly less than from Digg – but it’s nothing to write home about. I continue to use it every now and again to gain some backlinks, but I don’t count on it for traffic either.

Case Three: Stumblupon

Unlike Digg and dZone, Stumble Upon has done a great job.

One day I looked at my Google Analytics data, and I thought the thing had broken. An average day at the time was about 2-300 visits – and this day showed as over 2,000 visits.

I went into the data and found out that one of articles was bringing in a ton of traffic from Stumble Upon. The same article that brought in about 100 visits on Digg brought in over 2000 visits from Stumble Upon.

I wish I knew why it did that well, and how I could repeat it, but it just kind of happened.

Within the last few days, I’ve also noticed another page bringing in a decent amount of Stumble traffic. For the past several days, it’s brought in 50+ visits each day. I’m wondering how long that’ll last before the page gets shuffled out of the index.

Bottom Line

In terms of traffic, social bookmarking sites can be effective but they seem to be out of your own control.

I haven’t had a lot of luck with Digg and dZone, but I have had some good luck with StumbleUpon.

The best performing articles were submitted by other people, though – not me. Maybe those people had fans that followed their bookmarks, leading more traffic to my site. Or maybe it’s just luck of the draw.

My advice would be to leave a selection of “Share This” icons at the end of your article to encourage users to submit it to their favorite bookmarking sites. However, don’t hold your breath and wait for a ton of traffic to come in.

In the meantime, consider the SEO benefits of social bookmarking sites. We’ll come back to that another time.