How To Setup GMail As A Pop3 Mail Client

Are you still managing your emails using email clients like Microsoft Office Outlook, Thunderbird, or Eudora? Why not switch to GMail and let it handle your emails instead? If you are ready to give GMail a go, below are the steps required to setup GMail to manage your POP3 accounts.

Firstly, sign in to your GMail account. If you don’t have an account yet, you will need to sign up first. Click on the “Settings” link as shown in the screenshot below labelled “A”. Click on the “Accounts” tab labelled “B”. Then, click on the “Add another mail account” link labelled “C”.

GMail add new POP3 account

Insert your email address into the textfield provided and click on the “Next Step” button. Do note that you can only manage up to 5 POP3 accounts using a single GMail account.

Enter e-mail address

On the next screen, you will need to modify the settings for your email account. Input the username and password for your email account. It is important to check the “Label incoming messages:” checkbox. This step ensures that each emails from different accounts are labelled accordingly. Click the “Add Account” button to proceed.

Modify e-mail setting

Your GMail account is now setup to receive emails from the email address you inserted earlier. If you would like to send emails using the same email account, you will need to select the option “Yes, I want to be able to send mail as …” as in the screen below.

Send mail using same account

Insert the name that you want to display whenever you send an email using this account and click on the “Next Step” button.

Enter name

Before you can start sending emails using this account, GMail requires you to verify that the email address provided does belong to you. You can do so by clicking on the “Send Verification” button. Google will send you a verification email that contains a verification code and a verification link.

Verify e-mail address

You can either click on the verification link, or copy the verification code and insert it into the textfield below. Click the “Verify” button to verify your account.

Enter verification code

After completing these steps, your GMail account is configured to send and receive emails from the account you provided earlier. If you want to allow GMail to manage multiple accounts, just repeat the steps again. Keep in mind that the maximum accounts you can add is 5. If you need to add more than that, just create a new GMail account :-)

I’ll do a review on the pros and cons of using GMail as a POP3 mail client shortly. Stay tuned.

How To Get Your Feed Readers To Participate In Comments

I have subscribed to 30+ feeds from various blogs. I notice that only 10% of them have a link or indicator in their feed to their post’s comments. Below is a screenshot of a feed without a link to its post’s comments.

Feed without link to comment

Below is a screenshot of a feed that links to its post’s comments.

Feed with link to comment

From my point of view (as a feed reader), feeds that do not provide a link to their post’s comments are “dead” articles. It feels like reading the daily newspaper or a magazine. To me, blogs are different from traditional printed materials because it allows readers and the writer to comment and discuss on the written article.

Some might argue that the comments are accessible by launching the post in a browser. However, the point is to make it as simple and effortless for the reader to access them. A year ago, GMail created the “Delete” button just to speed up the deleting process of unwanted e-mails.

GMail's Delete button

To create a “link” to your comment in your feed, you will need to have an account at FeedBurner.

Step 1: Click on the “Optimize” tab.

Step 2: Select the “FeedFlare” option on the left and activate the service.

Step 3: Select “Comments Count” and other function(s) that you want to appear on your feed and blog and click “Save”.

Step 4: Select the platform your blog is running on at the “Get the HTML code to put FeedFlare on your site:” option. Copy the given code into the appropriate files.

Allow some time for the link(s) to appear. It may not show up immediately after adding the codes. Now that you have a link to your comments in your feed, it increases the chance for your feed readers to engage in the comments.

References:
1. Comments included in feed?
2. Adding FeedFlare to WordPress 1.x/2.x
3. Feedflare Code for WordPress – Where should I put it?!

Manage E-mails From Different Accounts In Microsoft Office Outlook 2003

I have been checking and organizing my e-mails using Microsoft Office Outlook 2003 since I started blogging. A few days ago, I purchased a new domain name. Now, I have to setup Microsoft Outlook to manage both my e-mail accounts. This is when I noticed a problem (or inconvenience). All e-mails that I received from both accounts go into the same Inbox. The program did not create different set of folders for each account.

So, I googled for it and found this post, How do I receive email on different accounts into different folders in Outlook?. It was exactly what I needed. There are step-by-step guides with screenshots. Overall, that is a very good guide. After following all the steps, I was able to forward all e-mails received and sent from the second account to 2 newly created folders below.

2 newly created folders

It was simple to redirect the e-mails following the guide provided in the post. However, it would have been great if Microsoft Outlook was able to handle multiple accounts in a more efficient way. I’m thinking of changing to Mozilla’s Thunderbird 2.

Should I? What e-mail program are you using?

Tutorial: How to embed flash video in your blog without breaking validation

Have you embedded a video into your blog and notice that it broke your validation? Videos from sites such as YouTube, Google Video and Metacafe provides custom codes to allow you to embed their videos into your blog. Here, I would like to provide you with a solution to that problem. This tutorial is possible thanks to C.K. Sample III who has provided a nicely modified code to replace the default codes given by those sites.

This tutorial will guide you to embed a YouTube video into your blog without breaking validation. I have only tested the codes on Youtube and metacafe. While C.K. Sample III has tested it on Google Video as well. It should work for all (i think) video sites that provide their videos in flash format, as long as you follow these guides below. Tell me if it doesn’t work on any sites that you’ve tried!

Step 1: Select the video to embed into your blog. I’ve chosen this video from YouTube.

Step 2: On the right of the video, you’ll find the “Embed” codes shown in the picture below. Copy the codes, and paste it in a word editor.

Embed Codes By YouTube

Embed codes given by YouTube:

<object width=”425″ height=”350″><param name=”movie” value=”http://www.youtube.com/v/wk5dw7JU6D0“></param><param name=”wmode” value=”transparent”></param><embed src=”http://www.youtube.com/v/wk5dw7JU6D0” type=”application/x-shockwave-flash” wmode=”transparent” width=”425″ height=”350″></embed></object>

What you need is the bolded links above which is http://www.youtube.com/v/wk5dw7JU6D0. Copy that down, you’ll need it later.

Step 3: Copy the codes below (provided by C.K. Sample III) and paste it in your blog where you want the video to be displayed.

<object type="application/x-shockwave-flash" data="[INSERT VIDEO URL FROM EMBED CODE PROVIDED HERE]" width="400" height="326">
<param name="movie" value="[INSERT VIDEO URL FROM EMBED CODE PROVIDED HERE]" />
<param name="FlashVars" value="playerMode=embedded" /></object>

Step 4: Replace [INSERT VIDEO URL FROM EMBED CODE PROVIDED HERE] with the bolded codes from Step 2.

Your finished codes should look like this:

<object type="application/x-shockwave-flash" data="http://www.youtube.com/v/wk5dw7JU6D0" width="400" height="326">
<param name="movie" value="http://www.youtube.com/v/wk5dw7JU6D0" />
<param name="FlashVars" value="playerMode=embedded" /></object>

There you go. Hope this tutorial helped.

Tutorial: Create a favicon.ico for your website

(Sunday, February 18, 2007)

For some time now, I’ve wondered how and why some websites are able to place an icon beside their URL (shown in Figure 1). So I’ve finally googled it and found out a few facts about them. Firstly, the name of the icon is “favicon.ico“. It is only 16 X 16 pixels large. That’s not a lot of space to work with. However, it is possible to create the initial design on a larger canvas, and later resize them to 16 X 16 pixels. It is advisable that the design canvas be a multiply of 16 (eg. 32, 48, 64, 80, 96, ….).

Example of favicon.ico
Figure 1: favicon.ico icons beside URL

There’s a few ways of creating a favicon.ico. Some sources suggests downloading a photoshop plugin. The icon can then be exported to the .ico format. Another way would be to download an executable program to convert the icon to the .ico format manually.

However, I will be using a web tool to convert my original icon image to the .ico format for this tutorial. The web tool can be accessed from www.chami.com. The steps to create the favicon.ico is as below:

Step 1: Browse for the original file. Click “Generate Favicon.ico”. A preview of the icon will be displayed (both animated & non-animated versions).

Step 2: (optional) Click on “Test in Browser” to view the icon in action on the same page.

Step 3: Download the favicon files to your local hard drive.

Step 4: Open the zip file. It contains the favicon.ico file, a readme file (with instructions to install the favicon.ico file) and some extra bits.

Step 5: Upload the “favicon.ico” file to your server into the root folder (usually “public_html”).

Step 6: (quoted from the readme file included in the zip file):

You can add a favicon to your web page by uploading favicon.ico to your website and inserting the following HTML tag inside the … section of your web page.

<link rel=”shortcut icon” href=”favicon.ico”>

Optional: if you would like to display the animated favicon, upload animated_favicon1.gif as well and insert the following HTML tags.

<link rel=”shortcut icon” href=”favicon.ico”>
<link rel=”icon” href=”animated_favicon1.gif” type=”image/gif”>

That’s it! You’re done. Below are the before and after photos.

Before Picture before

After Picture after

Hope this tutorial helped.