The past few days have been utterly exhausting:

• My father being in the hospital (Fortunately, he is now discharged and surgery is not required. Thank you for your thoughts and support!)
• Claire got a throat infection
• I’m sick too
• Aerin is being extra, extra clingy towards me

Blogging will resume when my life returns to a semi-normal state!

1. Did you know that you can embed Tweets?

Just mouseover the tweet I have embedded below. Notice that the tweet is “live,” meaning that all the links (such as the “Follow” button) clickable and functional.

So they’re watching Knicks in Taipei but I can’t get the game.#iliveheredammit

— Jerry Seinfeld (@JerrySeinfeld) February 16, 2012

Apparently I seem to be one of the last people on earth who did not know this feature existed. And if you too, are thinking, “THIS IS COMPLETELY NEW INFORMATION TO ME!”, here’s how you do it:

1. From the Twitter webpage, mouseover the tweet you want to embed.
2. Click on “Open” on the top right corner.
3. Click on “Details” which should slide out directly beneath the tweet.
4. Now, you will see an option to “Embed this Tweet” right under the tweet. And voilà! The following window should open:

While most people will want to use the HTML, the Shortcode option is a great one for those who are blogging from a platform — like WordPress.com — that allows Twitter shortcodes. (If you are a WordPress.org user, you can install the Modern Media Tweet Shortcode plugin to get the shortcode working.)

2. Scumbag Jeremy Lin

Yesterday, I chuckled over the following meme on Reddit:

And today, I saw that last night’s The Daily Show with Jon Stewart had a segment of a similar note, one that is full of corny Lin puns and sarcastic humor that is so classic of the comedic news show. Check it out yourself:

3. New York Knicks vs. Dallas Mavericks, February 19, 2012

J and I try our best to attend at least one Knicks game every season (if only they weren’t so expensive!), and this year’s visit to MSG will be this Sunday!

Needless to say, I am super stoked. I am crossing my fingers that this game will surpass the best NBA game I’ve attended so far (which was a Sixers vs. Lakers game in 2001, when they went to the Finals) and you know that I will be decked out in Jeremy Lin gear!

Sunday’s game is a nationally televised one (ABC), so I’m thinking of making a catchy sign. Any suggestions?

Welcome to this installment of Bloggy Thursdays, where I share with my fellow bloggers tips and tutorials to maximize and better your blog. While I do not consider myself an expert, I do like to think that after 10+ years of blogging — in addition to my technical knowledge — I know more than the average blogger when it comes to making your blog more appealing to readers.

Do you have any comments, questions, or topics you’d like to see covered here? Please send me a message via my contact form. Enjoy!

What is hotlinking, and why is it bad?

Hotlinking occurs when other sites link directly to the files (usually images) hosted on your site from their own blog, message board posts, and such.

While there are legitimate uses of hotlinking such as YouTube videos, the problem with unauthorized hotlinking is that it is essentially bandwidth theft. Hotlinking increases your server load — especially if the hotlinked image was posted on a popular website — and decreases the loading speed of your own site.

Additionally, if you use original images for your blog (e.g., you are a photographer or an illustrator), hotlinking can be especially annoying because in almost all cases, the person who hotlinks does so without obtaining permission first.

Luckily, there are different ways that bloggers can prevent hotlinking of their images.

Option 1: Edit your .htaccess file

The first, and probably the most difficult method, is to edit your .htaccess file. To find out if you already have an .htaccess file, navigate to your blog’s root directory using an FTP client and simply look for it. (Note: you may need to select an option that allows you to view hidden files first.) If you don’t have one, you can easily create one by using a text editor to create a blank document, naming it .htaccess, and uploading it to your blog’s root directory.

Important: Before making any changes to an existing .htaccess file, be sure to save a copy of it first!

The next step is to copy and paste the following to your .htaccess file (if there’s already stuff on your .htaccess file, add it to the bottom of the file):

RewriteEngine on
RewriteCond %{HTTP_REFERER} !^$
RewriteCond %{HTTP_REFERER} !^http(s)?://(www\.)?yourdomain.com/.*$ [NC]
RewriteCond %{HTTP_REFERER} !^http(s)?://(www\.)?anotherdomain.com/.*$ [NC]
RewriteRule \.(jpg|jpeg|png|gif)$ http://www.yourdomain.com/hotlink.gif [NC,R,L]

Now this is where you substitute what is on the code above with your own information:

Lines 3 and 4 are specifying which domains should be exempt from your hotlinking rule. So you want to replace the words in blue with your own domain (don’t include the www because that’s already included in the code).

Then, you want to replace the words in orange with any other domains that should be able to hotlink to your images. This should include feed aggregators like FeedBurner. If you have more than one domain on this list, simply copy & paste the same line, replacing the orange URL with your desired domains.

The words in pink are stating which file extensions should be included in your hotlinking rule. Most people will not need to edit this part, but feel free to delete and add to it as you wish.

Lastly, the words in green is a URL to an image that should be displayed when someone tries to (unsuccessfully) hotlink to your site. For example, the graphic that I use for my hotlinked images is:

Alternatively, if you just want an error 403 Forbidden instead of an image, you can replace the last line with the following code:

RewriteRule \.(jpg|jpeg|png|gif)$ – [F]

So, using all the rules above, this is what I have included in my .htaccess file:

RewriteEngine on
RewriteCond %{HTTP_REFERER} !^$
RewriteCond %{HTTP_REFERER} !^http(s)?://(www\.)?geekinheels.com/.*$ [NC]
RewriteCond %{HTTP_REFERER} !^http(s)?://(www\.)?google.com/.*$ [NC]
RewriteCond %{HTTP_REFERER} !^http(s)?://(www\.)?feedburner.com/.*$ [NC]
RewriteCond %{HTTP_REFERER} !^http(s)?://(www\.)?feeds2.feedburner.com/.*$ [NC]
RewriteCond %{HTTP_REFERER} !^http(s)?://(www\.)?yahoo.com/.*$ [NC]
RewriteCond %{HTTP_REFERER} !^http(s)?://(www\.)?msn.com/.*$ [NC]
RewriteCond %{HTTP_REFERER} !^http(s)?://(www\.)?bing.com/.*$ [NC]
RewriteCond %{HTTP_REFERER} !^http(s)?://(www\.)?facebook.com/.*$ [NC]
RewriteCond %{HTTP_REFERER} !^http(s)?://(www\.)?pinterest.com/.*$ [NC]
RewriteCond %{HTTP_REFERER} !^http(s)?://(www\.)?bloglines.com/.*$ [NC]
RewriteCond %{HTTP_REFERER} !^http(s)?://(www\.)?feedly.com/.*$ [NC]
RewriteCond %{HTTP_REFERER} !^http(s)?://(www\.)?netvibes.com/.*$ [NC]
RewriteRule \.(jpg|jpeg|png|gif)$ http://www.geekinheels.com/images/hotlinking.gif [NC,R,L]

Notice that I have included all other sites I would like to allow hotlinking back to my blog, such as Facebook and Pinterest. Can you think of any other sites I should add to this list?

Option 2: Use cPanel’s Built-In Hotlink Protection

This next option is much simpler than using .htaccess, but it has two drawbacks:

1. You have to host your blog with a company that gives you access to cPanel
2. You have a bit less control

If you do have access to your cPanel (the URL to your cPanel is almost always yourwebsite.com/cpanel), navigate on over to the “Security” section and click on the “HotLink Protection” icon.

From there, you need to enable hotlink protection by clicking on the “Enable” button at the top of the page, fill in the fields as directed, and hit the “Submit” button at the bottom. You can see that if you carefully compare this method and the .htaccess method above, there are definite similarities.

And, because the full list of URLs I’ve used is not viewable in the above screenshot:

http(s)?://(www\.)?bing.com
http(s)?://(www\.)?bloglines.com
http(s)?://(www\.)?facebook.com
http(s)?://(www\.)?feedburner.com
http(s)?://(www\.)?feedly.com
http(s)?://(www\.)?feeds2.feedburner.com
http(s)?://(www\.)?geekinheels.com
http(s)?://(www\.)?google.com
http(s)?://(www\.)?msn.com
http(s)?://(www\.)?netvibes.com
http(s)?://(www\.)?pinterest.com
http(s)?://(www\.)?yahoo.com

Option 3: Use a hotlink protection plugin

Once again, this is where WordPress comes in handy. Just doing a quick search for “hotlink” in the WordPress Plugins Directory returns several plugins that can help you achieve what I have outlined in options 1 and 2. The three most popular ones seem to be:

• Automatic Image Hotlink Protection
• Configurable Hotlink Protection
• PictPocket

Please keep in mind that I have not tested these plugins myself, so please use them at your own risk.

Additional Information

The final step in setting up hotlink protection is to test it. You can do that by visiting one of many sites that allow this, such as http://www.htaccesstools.com/test-hotlink-protection/

If you do not run a self-hosted blog, there’s a good chance that you do not need to worry about bandwidth theft since most platforms like WordPress.com and Blogger do not place bandwidth limitations.

However, if you would still like to keep the media on your blog accessible via your blog only, you can host the files in a separate file hosting service and change its privacy settings accordingly. For example, Blogger users can set their blog media folder in Picasa to private. Another great way to help discourage hotlinking — as well as intellectual property theft — is to watermark your images.

 I hope that was helpful and informative. Please let me know if you have any questions!

A few years ago, J casually said to me, “You know, you should really make your blog more mobile device friendly.”

“But that might ruin the design! And you know how hard I worked on it. Besides, less than 1% of my visitors are using a mobile device when they browse on over.”

Did I mention that J is a software engineer and tester? That he not only once worked for the big G, he is always up-to-date (and most of the times, ahead of the curve) on the latest web trends and companies — e.g., signed up for Yelp and Twitter long before anyone else I knew even heard of them, correctly predicting that they would “blow up” — and is the go-to guy in our social circle for any web/tech-related questions?

So of course, being his wife, I completely ignored his advice.

Flash forward to now. “Responsive” is currently the hottest word in web design. Web Design Ledger predicts:

Eventually, we’ll all stop talking about responsive web design – not because it will go away, but because it will become what’s expected.

And wouldn’t you know it? Currently, about 20% of my blog’s visitors hail from a mobile device.

So what does J do when I tell him that I’m thinking about a more responsive design for my blog?

“Responsive web design? Isn’t that an old concept?”  

I hate it when he’s right.

How responsive web design should work — see how the content shifts
depending on what type of device you are using to view the website?
(image source)

So, in order to keep this blog current and more user-friendly to those who visit using tablets or mobile phones —

And because I’m already hankering for a change after just seven months with this current design —

I have decided that a site redesign is in order.

I want to get this done as quickly as possible (i.e., within the next month) before J’s parents go back to Hong Kong and I will have no help with the two kids.

And here is where YOU, the readers, can help!

There are currently two logistics to this redesign I have not yet quite figured out.

The first: I am seriously thinking of displaying partial posts for the front page of the blog. The reason for this is because my posts tend to be long, and/or feature large or multiple images which significantly slow down the loading speed of the site. Having partial posts on the front page will not only ensure faster loading time, but will also allow users to more easily scroll down and see additional content.

However, I personally hate it when the sites I visit do this because I would much rather see everything on one page.

What do you think? Do you prefer partial posts on the
front page, or full posts as I have now? Please vote below!

(Please keep in mind that my RSS feeds will not be affected by this change. Subscribers will still be able to see full posts when reading from Google Reader or other RSS feed aggregators.)

 Loading ...

The second issue involves the logo. Although I have extensive experience with helping others with their logos and branding, designing a logo is not my strong suit. And I strongly believe that a good logo is important to any brand.

I also believe that a good logo can help me with the redesign of this site by providing a certain “look and feel” and pointing me in the right direction.

So I have decided to make the investment by hiring someone to design a new logo for Geek in Heels.

I have already posted an ad on oDesk, but I was wondering..

Are you, or someone you know, interested in
designing a logo for Geek in Heels? 

Since I am short on cash, I can only pay the designer $100 USD. However, I can also offer on top of that a full year’s 160×100 or 160×200 (your choice) sidebar banner ad for FREE. You can look at my site stats on my sponsorships page.

My only requirements are that the applicants should have examples of logos they have designed in the past, and that the final logo should be provided to me in EPS format.

If you are interested, please leave a comment to this post, or shoot me a message via my contact form.

As always, thanks for reading, and I can’t wait to unveil to my readers my new logo and site redesign!

Welcome to this installment of Bloggy Thursdays, where I share with my fellow bloggers tips and tutorials to maximize and better your blog. While I do not consider myself an expert, I do like to think that after 10+ years of blogging — in addition to my technical knowledge — I know more than the average blogger when it comes to making your blog more appealing to readers.

Do you have any comments, questions, or topics you’d like to see covered here? Please send me a message via my contact form. Enjoy!

While doing some research for today’s Bloggy Thursdays, I stumbled upon an interesting piece of information: LinkWithin, one of the most popular “Related Links” widgets — and certainly a tool that many of my blogger friends use — is not recommended for SEO purposes.

Why? Essentially, LinkWithin is a parasitic widget. The way it works is by redirecting your traffic through their own site, effectively linking to themselves from all over your site and then 301 directing the user back to your site, thus stealing your internal link juice.

(To find out why internal links are important in SEO, check out “The Importance of Internal Linking” at Dragonfly SEO.)

Some of the websites that wrote about this issue stated that LinkWithin has started to do away with this practice, but I still saw it in effect on this blog, under the “Referrers” tab of my stats page:

See all the views from “widget3.linkwithin.com” and similar?

Aside from SEO issues, I also did not like the fact that LinkWithin’s extra step of redirecting traffic may cause visitors additional delays.

So what’s a blogger to do?

If you are using WordPress, one easy step is to install the popular Yet Another Related Posts Plugin (YARPP). However, the biggest drawback to this plugin is that while it does provide templates, it can still be difficult to configure and customize the output, especially if you aren’t familiar with PHP and/or CSS.

Another good option is Outbrain, which is used by some of the most popular sites on the web, but this service requires that you receive more than 500,000 visitors a month.

This is when I came across nRelate’s Related Content widget.

(And for non-WordPress bloggers, nRelate is also available for Blogger and Tumblr! They are also in the process of rolling out versions for Drupal, Typepad, and others!)

Installing nRelate is as simple as installing any other WordPress plugin: just download, install, and activate. And unlike LinkWithin, nRelate has an extensive options panel built right into WordPress’s admin.

And here is where you can experience the best part about nRelate — all the customizations! You can:

• change the size of your thumbnails
• easily change the title for the related content box
• specify a default image for when the post does not have any images
• choose your level of relevancy
• choose to exclude certain categories
• …and much, much more!

You can also choose from a list of seven different styles for your thumbnails, which you can further customize via CSS, or create a completely customized style yourself.

nRelate also has an optional advertisement program that can earn you some money by inserting custom ad spaces within your related content. The best part is that it allows you to configure not just how many ad spaces to include, but also the location such as before or after your own related post content, or have the location randomized. (I will not be employing this at the time, but I may consider it in the future.)

Another great product that nRelate offers is its Most Popular widget, which does exactly what its name implies by displaying thumbnails (or even just text links) just as its Related Content widget does.

nRelate needs at least 2 hours to index your site and for its widget to start appearing — and since I currently have 1,625 posts on this blog  — it hasn’t started to show up on my site yet. However, you can see an example via their site, or just by Googling “nRelate examples.”

If what I have read online is true, the Related Content widget will start working flawlessly as soon as nRelate finishes indexing my site. I will definitely post a follow-up to this post if I find nRelate unsatisfactory in any way!