After a little research, I finally found a useful post about finding your Facebook Status RSS feed at Tech Life Web, and I wanted to share my findings with you guys.

*** UPDATE 6/22/2010: Thanks to Shirish, I have learned that this only works if you’re a long time Facebook user. If these instructions aren’t working for you, it may be because you were late to the party!

Get the notifications RSS feed

Go to your notifications page: facebook.com/notifications.php

At the bottom of the right hand column you will find a little blue RSS icon with the words “Your Notifications” next to it.

Clicking on that link should take you to your Notifications RSS feed.

Getting your status RSS feed

Now for the tinkering. Your link will look something like this (the X’s represent numbers, which will NOT change):

http://www.facebook.com/feeds/notifications.php?id=XXXXXXXXX&viewer=XXXXXXXXX&key=XXXXXXXXXX&format=rss20

You will take your link, and change the word “notifications” to “status”.

http://www.facebook.com/feeds/status.php?id=XXXXXXXXX&viewer=XXXXXXXXX&key=XXXXXXXXXX&format=rss20

That is your status RSS feed.

Making the status feed pretty

Right now it probably reads awkward because it will say your name in front of all your updates. If you want to get rid of that, head on over to the Yahoo Pipe Facebook Status RSS Feed Filter.

Copy and paste your status RSS into the text input box and hit “Run pipe”.

Once it is finished, you should see your pretty statuses in the bottom section. To access this as an RSS feed, click the “Get as RSS” link.

You’re done!

If you want to have some fun, head over to Wordle to create your very own word cloud with your statuses. My statuses aren’t too interesting, but here’s what I got:

Step One: Create the canvas

You have 73×73 pixels to work with. Using Photoshop (or whatever image editor you use that can save transparent PNGs), create a new document 73×73 at 72DPI.

This is what 73×73 pixels looks like:

Step Two: Choose your elements

Since I wanted to show both my niche (photography) and myself, I decided to look for some icons to work with. I found the icons I wanted in the free “Function Icon Set” package.

These are the items I chose to work with for my picture:

1. The first image is the picture I decided on for now as my “real” photo.

2. The second image is the camera icon I decided on.

3. The third image is what I will use as a frame to insert actual tiny photos into as “examples” of my work.

Think this is pretty ambitious? With a little creative sizing and positioning, we can turn all of this into a successful icon.

The next steps will show you the process I followed to create my icon. By using similar techniques and principles, you too can create a unique Twitter profile picture that will stand out to potential followers!

Step Three: Putting it together

First things first. I took my image and cropped it with rounded corners, and rotated it to a slight angle to add some flair. You can also see that I’ve placed it off to the left to make some room for my icons to fit.

Next, I added a simple white border, and added a drop shadow.

I made two of the “picture” icons and placed them at angles, very small, behind my main image. I put the camera in the front right corner.

By adding a small flash around the camera, and placing some of my own images inside the frames, I have my finished product:

Note that I saved the final image as a transparent PNG. This allows it to look good no matter what color background it is sitting on.

If you enjoyed this article, make sure to follow me on Twitter, and/or leave your comments below!

She is an aspiring model from LA, and has more to present than just the images you see in her pictures.

You can read her blog or follow her on Twitter: @kasumishimizu

If you’re not following me already, you should follow me while you’re at it! :)

The concept was simple enough: create an online dictionary using only custom definitions. At first, I did some Google searches to see if there were any open-source dictionary apps. No such luck!

Then it occurred to me I should try WordPress. Searching the plugins, I realized that there was no dictionary plugin there either. That’s when I realized that I could set up WordPress itself to run the dictionary entirely.

Organization

I laid out a plan to make sure this would all run smoothly. I would use:

• Posts: for definition entries
• Custom Fields: to separate definitions, emphasis, etc. (made useful in combination with the “Get Custom Field Values” plugin)
• Categories: to create letter listing pages
• WP Post Sorting: a plugin to list entries in alphabetical order on letter listing pages
• Custom Template: to display the information correctly, in dictionary fashion instead of like a blog

Setting Up

Now that I had my game plan, it was time to prep. I installed WordPress, and set up my categories. I took advantage of nested categories in case I decide to run a blog simultaneously on the site. To do that, I created a “definitions” category, with nested categories running A-Z.

Next, I installed the WP Post Sorting plugin, and set it up so that under the A-Z categories, entries would be listed alphabetically instead of by the usual date order.

Then it was time to set up custom fields. I went over to create a new post. I put in the word to be defined as the title, and skipped the usual post box, scrolling down to the custom fields section. You can use whatever information you want but I created a different field for each of the following:

• Definition
• Emphasis
• Origin
• Type (noun/adjective/etc)

Finally, I went to set up the permalinks. You can set it up however you choose, but I used the following settings:

• Custom structure:

  /define/%postname%

• Category base:

  list

• Tag base:

  tag

Creating a custom theme

Creating the theme is pretty simple, once you get the hang of it. If you don’t know how to build a theme, I suggest you learn how first.

I don’t care how you style it, but here are some tips to setting this up:

• Install Scott Reilly’s Get Custom Field Values plugin, it will make your life easier. Then, all you have to do to pull the custom field is something like the following (used within the loop):

  <?php echo c2c_get_custom('definition', ''); ?>

• Re-write the code that spits out posts. You’re not using the_content(), but we do want to show the definitions of our entries! My code looks like the following:

  <h2><?php the_title(); ?></h2>
  <p><?php echo c2c_get_custom('emphasis', ''); ?> / <em><?php echo c2c_get_custom('type', ''); ?></em></p>
  <p><?php echo c2c_get_custom('definition', ''); ?></p>
  <p><strong>Origin:</strong> <?php echo c2c_get_custom('origin', ''); ?></p>

  This code should be used pretty much anywhere on the blog that would normally just display the posts.

• You’ll probably want to have a “Browse” option showing links for the A-Z categories somewhere. To do this, I simply used the following in header.php:

  Browse: <ul><?php wp_list_categories('child_of=3&hide_empty=0&title_li='); ?></ul>

  Simply substitute the “3″ after child_of with whatever the category ID “Definitions” is on your setup of WordPress, and this will display a list of the A-Z links.

From there on out, you’re on your own! If you have any questions or tips of your own, feel free to leave them in the comments.

If you’re interested, you can check out the finished product at Pugtionary (the dictionary for pugs).

Here is what I came up with (view the demo):

JavaScript

function toggle(checkboxID, toggleID) {
  var checkbox = document.getElementById(checkboxID);
  var toggle = document.getElementById(toggleID);
  updateToggle = checkbox.checked ? toggle.disabled=true : toggle.disabled=false;
}

HTML

<input
    id="example"
    name="example" 
    onClick="toggle('example', 'disableMe')" 
    type="checkbox" value="1" /> When this is checked, something is disabled <br />

<input
    id="disableMe"
    name="disableMe"
    type="text"
    value="This input box will get disabled" />

This is pretty basic.

What we are doing is feeding the function the ID of the checkbox field, and the ID of the form field we want to disable. When you check or uncheck the box, we call the toggle() function, which determines what action we took – if it is checked, we disable the form field, and if it is unchecked, we enable the form field.

If you want to accomplish the opposite (checked = enabled, unchecked = disabled), simply switch the disabled values in the function:

function toggle(checkboxID, toggleID) {
  var checkbox = document.getElementById(checkboxID);
  var toggle = document.getElementById(toggleID);
  updateToggle = checkbox.checked ? toggle.disabled=false : toggle.disabled=true;
}

I haven’t done extensive testing as to whether this works across all browsers, but it seems to be working just fine in Firefox.

Demo

Aller

If you’ve been paying attention, you might have noticed that this is the font I use on the home page of my site. It has a few flavors, including a more blocky display version (also featured on my site).

More information
Download

Qlassik

I first found classic for a project that ended up being scrapped, but I am glad it happened because otherwise this gem may have gone unnoticed. Qlassik is a great font to add a little flair to a simple look. It’s clean, and looks great.

More information & Download

Fontin

I actually found this one when I was designing birthday party invitations. This is definitely the one I have ended up using the most, as it is very versatile and can fit different designs and looks.

More information & Download

If you have never touched PHP, roll up your sleeves and get ready to get dirty. I will try to make this relatively painless.

What you need!

• WordPress

WordPress Plugins (Optional):

• All In One SEO Pack
• Contact Form 7
• NexGen Gallery
• PageMash
• WP Google Analytics

Programs

You’ll need to BYOP but here are the ones I use:

• TextMate OR any text editor
• Transmit OR any FTP program

Services

• Domain name
• Hosting

You are now armed and ready!

Step 1: Install WordPress

If you got the hosting I recommended, all you need do is log into your control panel (yourdomain.com/cpanel) and click on “Fantistico”. From there, you can follow the instructions under “WordPress” and it will install automatically.

Otherwise you will need to follow the directions WordPress provides.

Step 2: Install your plugins (Optional)

WordPress now offers the nifty feature of being able to install plugins straight from the admin section. Go to yourdomain.com/wp-admin/plugin-install.php and search for the plugins I listed at the top of this article.

If you already downloaded them, use your FTP program to upload them into the plugins folder of WordPress (directions).

Make sure you activate them!

Step 3: Download a theme

You now also need to choose a theme for your site. There are probably quite literally thousands of free and paid themes to choose from, or you can create your own (which I recommend). However, the “how-to” create your own theme is an entirely different post.

You can download themes from the WordPress website, or use Google to search for themes to download. Install and activate your theme!

Step 4: Modify your theme

4.a Creating the “Blog” page

Now is the tricky part. Create a new file in your theme folder called “blog.php” – copy and paste the code from your “index.php” file into this new page.

At the top of this file, add the following code:

<?php
/**
 * @package WordPress
 * @subpackage THEME NAME
 */

 /*
 Template Name: Blog Listings
 */

Make sure that you include this before the get_header() function, inside the php tags. The top of the page should be wrapped in “<?php” and “?>” like so -

<?php
/**
 * @package WordPress
 * @subpackage THEME NAME
 */

 /*
 Template Name: Blog Listings
 */

get_header(); ?>

Now, find the lines that look like this:

<?php if (have_posts()) : ?>

 <?php while (have_posts()) : the_post(); ?>

Directly in above these lines, you need to add the following…

<?php query_posts("order=DESC&paged=$paged"); ?>

We are telling WordPress that when it loads this template, we don’t want to see the content of the page we created, we just want a list of posts, listing the newest first.

Make sure that the get_sidebar() function is being called on the page, and if it is not, use the other template files to see where you should include it.

4.b Creating/editing the “Page” page

Technically, you could simply modify the existing page.php file, but I like to create a new template so that I can always refer back to the original, or even use it if I want. So, create a new file called “page-simple.php” and copy and paste the contents from page.php into it and delete the get_sidebar() function.

Usually I make further edits to help simplify the page, but this will vary depending on your theme.

Add the template name to the top of the page like we did when we created the Blog page.

/*
 Template Name: Simple Page
 */

4.c Creating a “Front” page (optional)

If you want to get fancy, you can rinse and repeat to create a custom front page template for your theme. You should base the PHP on page.php from your theme. Don’t forget to label the template!

4.d Upload!

Make sure that you upload your new template files! Otherwise you won’t be able to access them on your installation.

Step 5: Creating your pages

We’re getting close to being finished!

5.a Publish the Blog

Go and create a new page called “Blog” – don’t write any content, if you do it’s not going to show up. Before you publish the page, look on the right hand side for the option to choose your template. Select the “Blog Listings” template you created earlier.

Now you can publish your page. Visit it – it should be showing you a list of your blog posts just like the regular front page!

5.b Publish the Home page

Create another page, this one called “Home Page” or “Front Page” (it doesn’t really matter). Put the content you want to show up on your front page. If you created a special template for your front page, make sure to select it when you save it!

Step 6: Setting up WordPress to play nice

6.a Setting the permalinks

Log into your WordPress dashboard. Go to Settings > Permalinks. Now, I don’t care what format you want to take when making these permalinks, and you can get the WordPress permalink tags from their site, I recommend something like /year/month/name-of-post.

The thing I need you to do though, is add “/blog/” to the beginning of whatever you choose.

• /blog/%postname%
• /blog/%year%/%postname%
• /blog/%year%/%monthnum%/%postname%

Those are all fine examples. I hope you get the idea. So choose your permalink structure and enter it into the “Custom Structure” option and hit save. Here’s a screenshot of my settings:

6.b Setting the front page

Now, go to Settings > Reading.

Switch the first radio button from “Your latest posts” to “A static page” – and in the drop down menu, choose the Home page you created in the previous step.

Step 7: Cleaning up and optimizing your site

Now it’s time to tame the beast.

• Use PageMash to hide/show pages you want to be seen or not seen in the main navigation (such as your new “Home Page”).
• Use the All In One SEO package to create custom titles and meta tags.
• If you need a contact form, Contact Form 7 is your man.
• If you need to show images, use the NexGen Gallery – it includes different methods of displaying these, using JavaScript and/or Flash.
• I highly recommend getting a Google Analytics account and using the WP Google Analytics plugin to stick it into your site.

While these plugins may be more or less optional, they will probably come in handy for almost any kind of website you are creating.

What have we created?

You now have a website that is more focused on pages than posts.

One of your pages is the “Blog” page, which displays your posts. The link to the blog looks like “yourdomain.com/blog” and your post links will follow suit and look like “yourdomain.com/blog/permalink/structure/your-post“, but your pages will maintain links like “yourdomain.com/about” or “yourdomain.com/contact“.

Leave any comments, tips, questions or concerns in the comments! Especially if you found this to be useful.

Design & Image Editing:

• Adobe Photoshop – $649 or $999 for the extended version

Photoshop is the most expensive program you need- but you will want this piece of software. There are a lot of different image editing tool but this is the industry standard. Sometimes you can get a student discount, or even get your company to buy it for you.

Text/Code Editing:

Mac

• TextWrangler – Free: This is a great piece of software for writing your code if you don’t want to spend any money.
• TextMate – $50: If you are serious about building websites, you should probably invest the 50 bucks in this software. It is highly customizable, can generate basic templates, and has code helpers and bundles to boot.

Windows

• HTML Kit – Free: This is another neat little piece of software that will help you write your code and keep it organized. Not the best there is, but hey- it’s free!
• EditPlus – $35: While I cannot personally testify to the usefulness of this application, I have read some pretty good reviews for this one.

FTP Client:

Mac

• Classic FTP – Free: This is a viable option if you don’t want to spend any money. Works fine, but Transmit (see next) is much faster and more efficient.
• Transmit – $29.95: This is my favorite FTP client for the Macintosh. Definitely worth the money.

Windows

• FileZilla – Free: This is my favorite FTP client for Windows. Quite the bonus that it’s free! It is also available for the Mac, but that version is much too buggy in my opinion.

Domains & Hosting:

• GoDaddy.com – My go-to source for domains. Easy to manage, great customer service, and very affordable. No monthly fees, either. Make sure you get coupon codes before purchasing.

I would not recommend getting hosting from GoDaddy (too many limitations) but from…

• HostGator – My go-to source for hosting. Again- easy to manage, great customer service and very affordable.

I hope that this list can be of help to any other freelance web designers out there. I wish I had found this list when I first got started…

Here is the image we will work with:

To start, create a new layer. Next, select the red parts of the eyes using the circle marquee tool.

Using the fill (bucket) tool, fill the new layer with black in this area and switch the layer style to Hue. This will get rid of our red eye but will leave her looking a little freaky.

To fix this we’re going to add a little bit of color the gray-scale eyes we just created. If there is a good color sample of the general color of the eye, select it using the eyedropper. Otherwise select a good color that matches the correct eye color you need.

Create another layer and use the same selection we used for the last step to fill in your color. Change this layer style to Color. You may need to adjust the opacity.

Since her eyes still look a little strange because the red eye without color is much lighter than a normal eye would look. So we’re going to remedy this by adding one more layer and brushing in a small amount of black on the opposite side of the eye highlights for a natural fix.

And that’s about it! Now, to fix the girl in the background… but to save time, I simply cropped the picture.

Photo credits.

Imagine that you are an architect. Someone asks you to build them an office. You ask, well, what do you want in an office? The equivalent answer to “Attract more clients” is: “I want to be able to put my employees there so they can work.”

As you can see, this is not a helpful answer. How many employees do you have? What kind of resources do they need? What kind of environment should they be provided?

The same goes for a website. The following are some basic steps to designing a better and more focused website that will accomplish the goal of your client.

Step One: Define a specific goal.

Some good example goals are:

• A phone call from the visitor
• An online response from the visitor (email, comments, etc.)
• To answer questions the visitor may have (provide information, thorough FAQ section)

You cannot simply say that the goal of a website is “to generate more clients”. Simply owning a website does not mean anyone will visit. That is a marketing issue. Once you have the potential client on your site, what do you want them to do or what do you want to do for them? That should be the main goal of your site.

This goal will change depending on what kind of organization you are running. If you provide an online service you may want them to Register for your service. If you run a company with an actual store-front, you may want them to visit the store. If you provide consultation services, you may want them to call you, or fill out a feedback or contact form.

Step Two: Define the steps.

Now that you have a goal, you need to define what steps the visitor needs to take in order to reach that goal. Say that you are a freelance photographer and want them to contact you via a feedback form. The following may be an example:

Visitor arrives on site:

• Answer the question: What do you do? (Landing Page or About Us)
• Answer the question: Why choose you? (Portfolio)
• Answer the question: What are my options? (Services)
• Answer the question: How can I contact you? (Contact Page)

You have just determined all of the pages you need! Those should be the predominant pages in the main navigation. Any and all other sections (such as a blog) are secondary, and should be featured smaller in a separate area- they should not distract the visitor from the main goal.

Step Three: Sometimes Less is More

When designing, every time you add a graphic or words ask yourself: “Does this benefit the goal?” If the answer is anything but a resounding YES, then take it out. Frills may look nice but if a frill doesn’t specifically benefit the design or goal it should be taken out.

Step Four: Usability Testing

Once you have integrated your new design, take it for a test-run with Internet non-savvy friends and see how easy it is for them to get around. Sit them down to a computer and give them the URL and give them a specific scenario that they can role-play.

Don’t intercept any of their mistakes and don’t interrupt the process. Simply be quiet, offer no help and see where they get confused and perhaps afterward ask them their opinions.

If you found these tips helpful, or if you have any suggestions yourself, please leave them in the comments!