Perfect Your Proofreading Posture with These Five Tips

Woman sitting with a book on her head

Image copyright Milenko Bokan (bokan76) – iStockphoto.com

Not long ago, my proofreading skills apparently took a short vacation. I published one of my how-to articles with several errors in it, and they weren’t completely corrected until a couple of days later.

The errors weren’t of the minor grammatical variety—they were in blocks of code used to create social sharing buttons. If anyone used the incorrect code, the buttons wouldn’t work correctly.

Embarrassing.

This caused me to wonder what I’d done wrong to let those errors get published. Then I remembered my high school typing class (yes, on real typewriters).

The typewriting analogy

If you’ve ever taken a typing class, you probably remember the teacher telling you to sit up straight, bend your elbows at 90 degrees, and keep your wrists off the table. Setting up your body that way is supposed to help you type quickly, accurately, and painlessly for long periods time.

Likewise, you should set up yourself and your environment to proofread as effectively as possible, making sure your posts are perfect before clicking the Publish button. But before we get to my tips, let’s review what’s already out there.

Two proofreading articles you should read first

It seems like blogs have done proofreading to death. I found tons of blog articles with advice on proofing your work. Many of them rehash the same tips over and over again (another post for another day), but there are two posts in particular I want to highlight because they are the most comprehensive.

ProBlogger – 11 Blog Proofreading Tips You Can’t Afford to Ignore

Copyblogger – 14 Foolproof Proofreading Tips for Bloggers

Both of these posts are process-oriented—they focus on proofreading techniques rather than pointing out common writing mistakes. The Copyblogger post is particularly unique because Shane Arthur helps you to get into a good mindset for successful proofreading.

For some of the most common errors to look out for when proofreading, start here and there.

Posture for Proofreading

Now here are five of my own tips I’ve come up with based on my own experience since I started blogging. These aren’t about physical positions per se. They are ways to set up your body and computer so you’ll catch errors more quickly and easily.

1. Use two different environments

Accomplish the ProBlogger tip to “Choose a different font” by proofreading in two different applications. Each application should use a different font. For example, I compose and proof my posts in MS Word. Then, after I’ve copied everything into WordPress, I click the Preview Changes button and take a few more passes proofreading the post.

Since my blog’s theme uses Arial (a sans-serif font), I set Word to use a serif font such as Times New Roman. The post preview looks different enough from the Word version that it helps catch more errors, especially subtle ones like it’s/its, your/you’re, their/there, etc.

2. Make it easy on your eyes

Hopefully, your blog’s content is narrow enough, and your font size large enough to make it easy on your readers’ eyes. Likewise, your editor should also use a large font and relatively narrow width to help facilitate your proofreading.

In Word, I compose in the Web Layout view using an 18pt font, and adjust the window width so the content is slightly narrower than that of my blog’s. This makes sure the amount of words on each line in Word is different from the blog, contributing to the “change of scene” effect that helps pick out errors.

3. Sleep on it

A common tactic to help find errors is to take some time off and come back to your post a few hours to a day later for a final proofread. That won’t do any good if you’re not alert. Make sure you get a good night’s sleep.

4. Slow down

Copyblogger suggests slowing down your pace of reading when looking for errors, but you should also slow down in general. A favorite quote of mine by the late great basketball coach John Wooden is:

“Be quick, but don’t hurry.”

Rushing causes performance and results to suffer. So if you’re scrambling to publish your post before you leave for the Katy Perry concert, don’t. Come back the next morning and finish your edits. Your readers won’t mind a day-late post as much as they will a badly written one.

5. Get rid of distractions

Proofreading takes concentration. Turn off the TV. Don’t check your traffic stats. Quit checking out the hot new barista at Starbucks. If you’re in a distracting environment, try putting on your headphones and listen to a single song over and over again.

Get in the habit

If you’re new to blogging, go through these tips every time before you publish until they become second nature. The odd typo here or there won’t make or break your blog’s credibility, but these habits will help you avoid the kind of lapse I had a few weeks ago.

Even though errors can be found and fixed after you publish your post, keep in mind that email subscribers will see the errors regardless of when, or if, you fix them. So get it right the first time.

Do you have any tips? Add to this list and share with us in the comments.

Add Social Share Buttons to Genesis Post Info Using Simple Edits

Google, Twitter, and Facebook Share Buttons with StudioPressUpdated 2/23/2013: Now there’s code for adding a Pinterest “Pin it” button.

In my last post I showed how to create a custom PHP function to add Twitter, Google+, and Facebook share buttons to your Genesis theme’s Post Info section. But if you’re like me and use Genesis’s Simple Edits plugin to modify your theme’s post-info (byline), post-meta, or footer sections, Simple Edits will override your custom function, and the buttons won’t appear.

The solution is to create your own PHP shortcode that will add the share buttons using Simple Edits. Here’s an outline of the four steps to add the buttons:

  1. Create a shortcode by adding a custom function to your theme.
  2. Add some JavaScript for each button to your theme’s footer.
  3. Align the buttons with some CSS code.
  4. Add the shortcode to the Post Info section in Simple Edits.

When you’re done, your byline will look something like this:

Twitter, +1, Like Buttons in Post-Info

These mods are pretty simple to do, but just in case something goes wrong, back up your blog first.

1. Create a shortcode

A shortcode is a shortcut: a way to refer to a whole bunch of PHP code with a short bit of text that looks like [my_fantabulous_shortcode].

To insert the share buttons on the byline, we’re going to create a shortcode called [post_share]. In order for this shortcode to do something, we need to create a handler function that will tell WordPress what to do whenever it sees [post_share].

Create the handler function in the WordPress by going to Appearance -> Editor and click on the link that says “Theme Functions (functions.php)” at the right. Paste this code at the end of your theme’s functions.php file.

 // Create shortcode for Post Info sharing icons
function post_share_shortcode() {
if (!is_page()) {
 $permalink = get_permalink();
 $datatext = get_the_title();
 $share_buttons = '

<div class="all-buttons">
 <!-- Facebook Like Button -->
 <div class="fb-like" href="'.$permalink.'"
 data-send="false" data-layout="button_count"
 data-width="90" data-show-faces="false" data-font="arial">
 </div>

<!-- Google +1 Button -->
 <div class="plusone">
 <g:plusone size="medium" href="'.$permalink.'">
 </g:plusone>
 </div>

<!-- Tweet Button -->
 <div class="tweet">
 <a href="https://twitter.com/share" class="twitter-share-button"
 data-url="'.$permalink.'" data-text="'.$datatext.'">Tweet</a>
 </div>
 </div>
<div style="clear:both;"></div>
';

return $share_buttons;
}}
add_shortcode('post_share', 'post_share_shortcode'); 

Note: If you’re using a StudioPress theme that has a Custom Code option in the Genesis menu, like Prose 1.5, you’re not supposed to edit the functions.php file. Instead, click on the Custom Code link, and paste the code in the Custom Functions section.

Genesis Menu -> Custom Code

2. Paste JavaScript code

Each network provides a bit of JavaScript code for their button, which tells them when a reader clicks on it to Tweet, +1, or Like your post. I’ve compiled the code for all three buttons for you.

To ensure that the buttons will load on any page that contains [post_share] shortcode, you’re going to paste this code in your theme’s footer.

Do this by going to the Genesis -> Theme Settings page and scroll down to the Header and Footer Scripts Section. In the “wp_footer()” field, paste this script code:

<!-- Tweet Button -->
<script>!function(d,s,id) {
 var js,fjs=d.getElementsByTagName(s)[0];
 if(!d.getElementById(id)){js=d.createElement(s);
 js.id=id;js.src="//platform.twitter.com/widgets.js";
 fjs.parentNode.insertBefore(js,fjs);}
}(document,"script","twitter-wjs");
</script>

<!-- Google +1 Button -->
<script type="text/javascript">
(function() {
 var po = document.createElement('script');
 po.type = 'text/javascript'; po.async = true;
 po.src = 'https://apis.google.com/js/plusone.js';
 var s = document.getElementsByTagName('script')[0];
 s.parentNode.insertBefore(po, s);
})();
</script>

<!-- Facebook Like Button -->
<div id="fb-root"></div>
<script>
(function(d, s, id) {
 var js, fjs = d.getElementsByTagName(s)[0];
 if (d.getElementById(id)) return;
 js = d.createElement(s); js.id = id;
 js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
 fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>

As a sidenote, we’re putting this JavaScript in the footer to make sure your content loads first. Otherwise, if you paste it in the header, as the social networks recommend, your readers can’t read your content until after the buttons have loaded. This lag could be significant enough to give your readers the perception that your blog loads slowly, which might increase your bounce rates. It’s better to have the share buttons load after your content.

3. Align the buttons with CSS

To make sure the buttons align horizontally with the byline text, you need to add some code to your custom.css file. Go to Dashboard -> Appearance -> Editor, click on the style.css link at the right, and then paste the code below at the end of your theme’s style.css file.

Note: If you’re using one of StudioPress’s new themes, like Prose 1.5, there’s no custom.css file to edit. Instead, go to Genesis -> Custom Code, and paste the code in the Custom CSS section.

 /**** Share Icons in Post-Info *******************/

/* Tweet Share Button */
div .tweet {
 float: right;
 width: 95px;
}

/* Google +1 Button */
div .plusone {
 float: right;
 width: 87px;
}

/* Facebook Like Button */
div .fb-like {
 float: right;
 width: 90px;
}

Another note: For Prose 1.0 users, a change in WordPress 3.4 prevents the custom.css file from being loaded into the code editor. If you’re using WP 3.4 or later, you’ll have to use FTP or your host’s file manager to edit the custom.css file.

4. Add shortcode to Simple Edits

If you haven’t already installed the Simple Edits, install it now. It’s a lightweight plugin for the Genesis theme framework that allows you to add different elements to your theme’s post-info (byline), post-meta, and footer sections using shortcodes.

For example, adding the [post_date] shortcode in the Simple Edits Post Info field will add the post date of your articles to your byline. By default, Simple Edits sets up your Post Info to look like this where you’re logged in:

Simple Edits Default Post Info

Keep in mind that your readers won’t see the “Edit” link. Only users that are logged into WordPress will see the link.

Once the plugin is installed, go to Genesis -> Simple Edits, and add [post_share] to the end of the Post Info field.

Add Shortcode to Simple Edits Post Info

Click the “Save Settings” button, reload your blog in your browser and you should see the share icons in the post info section.

If you want to change the order of the buttons, refer to the Customization section in my previous post.

Now, whether or not you’re using Simple Edits, you can insert sharing buttons into your Genesis theme’s Post Info making it easier for your readers to promote your blog. Thanks to everyone who helped me iron out the issues with adding these buttons.

Update 2/23/2013: Adding a Pinterest “Pin it” button:

Due to popular demand (well, three requests anyway), here is the code to add a Pinterest “Pin it” Button with the pin counts to the right of the button. If you have a featured image set for your post, that will be the one shown on Pinterest. Otherwise, it will show your post’s first image.

Add the block below to the shortcode section in your functions.php file as described in Step 1. Where you place this block relative to the blocks for the other buttons will affect where you see the button. It must come after the $share_buttons = ' line near the top, or before the
</div>
<div style="clear:both;"></div>

lines near the bottom.


<!-- Pinterest Button -->
<div class="pinterest-button">
 <a href="http://pinterest.com/pin/create/button/?url=%s&media=%s"
 class="pin-it-button" count-layout="horizontal">Pin It</a>
</div>

Then add the next block below to the JavaScript code in Genesis -> Theme Settings as was done in Step 2. It doesn’t matter where you put it relative to the code for the other buttons.


<!-- Pinterest Button -->
<script type="text/javascript" src="http://assets.pinterest.com/js/pinit.js"></script>

Finally, below is the CSS code block for your style.css file in Step 3. Again, it doesn’t matter where you put it relative to the code for the other buttons. Feel free to play with the width for this button to get it to look right depending on how many Pins you expect your posts to get.


/* Pinterest Button */
div .pinterest-button {
 float: right;
 width: 80px;
}

Credit goes to Brian Gardner’s Pinterest “Pin It” Button post for helping me figure out the functions.php and JavaScript sections.

Thanks for all your comments so far.

Learn More

How To Integrate Facebook, Twitter And Google+ In WordPress
How to Customize the Post Info Function
WordPress Shortcode Reference
Genesis Simple Edits

3 [Better] Steps to Quickly Add Social Sharing Buttons to Genesis Post-Info

Google, Twitter, and Facebook Share Buttons

A couple of posts back, I showed how to add social sharing buttons to the post-info sections (bylines) of Genesis child themes using their Simple Edits plugin. An alert reader, Greg Simas from m1p, noticed that the share counts on the buttons on the homepage bylines were different from those of post pages. In fact, the share counts for each network were the same on every byline appearing on the homepage

You can refer to that post for more details on why that method doesn’t work.

Thanks to Santel Phin and Kevin Muldoon, I’ll show you the new and improved way to add share buttons to your post-info sections for Google+, Twitter, and Facebook–the “big three” social platforms. If you’re using Genesis’s Simple Edits plugin, read this post instead.

<late-night infomercial overhyped voiceover>

But wait! There’s more!

I’ll show how to do it in only three, that’s THREE, steps. That’s a 25% improvement over the old, four-step method.

And if you ACT NOW, I’ll show you how to do it without using the Simple Edits plugin used in the old method.

Aaannd, if you follow this exclusive, one-time post in the next 999 minutes, you’ll get a byline that looks like this:

Twitter, +1, Like Buttons in Post-Info

READ MORE NOW!

</late-night infomercial overhyped voiceover>

1. Create custom function for Post Info section

In your WordPress Dashboard, go to Appearance -> Editor and click on the link that says “Theme Functions (functions.php)” at the right. Paste this code at the end of your theme’s functions.php file.


// Custom function to add share buttons to Post Info
add_filter( 'genesis_post_info', 'post_info_share_filter' );
function post_info_share_filter($post_info) {
if (!is_page()) {
 $permalink = get_permalink();
 $datatext = get_the_title();
 $post_info = '[post_date] By [post_author_posts_link] [post_comments] [post_edit]

 <!-- Facebook Like button -->
   <div class="fb-like" data-href="'.$permalink.'"
   data-send="false" data-layout="button_count"
   data-width="90" data-show-faces="false" data-font="arial">
 </div>

 <!-- Google +1 button -->
 <div class="plusone">
   <g:plusone size="medium" href="'.$permalink.'">
 </div>

 <!-- Tweet button -->
 <div class="tweet">
   <a class="twitter-share-button" href="https://twitter.com/share"
   data-text="'.$datatext.'" data-url="'.$permalink.'">Tweet</a>
 </div>
';
 return $post_info;
}}

Note: If you’re using one of StudioPress’s new themes, like Prose 1.5, you’re not supposed to edit the functions.php. Instead, go to Genesis -> Custom Code, and paste the code in the Custom Functions section.

Genesis Menu for Custom Code

2. Paste JavaScript code for the buttons in your theme’s footer

Go to the Genesis -> Theme Settings page and scroll down to the Header and Footer Scripts Section. In the “wp_footer()” field, paste this script code:


<!-- Tweet Button -->
<script>!function(d,s,id) {
 var js,fjs=d.getElementsByTagName(s)[0];
 if(!d.getElementById(id)){js=d.createElement(s);
 js.id=id;js.src="//platform.twitter.com/widgets.js";
 fjs.parentNode.insertBefore(js,fjs);}
}(document,"script","twitter-wjs");
</script>

<!-- Google +1 Button -->
<script type="text/javascript">
(function() {
 var po = document.createElement('script');
 po.type = 'text/javascript'; po.async = true;
 po.src = 'https://apis.google.com/js/plusone.js';
 var s = document.getElementsByTagName('script')[0];
 s.parentNode.insertBefore(po, s);
})();
</script>

<!-- Facebook Like Button -->
<div id="fb-root"></div>
<script>
(function(d, s, id) {
 var js, fjs = d.getElementsByTagName(s)[0];
 if (d.getElementById(id)) return;
 js = d.createElement(s); js.id = id;
 js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
 fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>

Genesis Theme Settings - Footer Scripts

Putting the JavaScript in the footer instead of the header will make sure the buttons don’t slow down the loading of your content.

3. Align buttons with CSS code

To make sure the buttons are horizontally aligned with the byline text, you need to add some code to your custom.css file. Go to Dashboard -> Appearance -> Editor, click on the style.css link at the right (custom.css link if you’re using Prose 1.0), and then paste the code below at the end of your theme’s style.css file.


/**** Share Icons in Post-Info *******************/

/* Tweet Share Button */
div .tweet {
 float: right;
 width: 95px;
}

/* Google +1 Button */
div .plusone {
 float: right;
 width: 87px;
}

/* Facebook Like Button */
div .fb-like {
 float: right;
 width: 90px;
}

Again, if you’re using one of StudioPress’s new themes, like Prose 1.5, there’s no custom.css file to edit. Instead, go to Genesis -> Custom Code, and paste the code in the Custom CSS section.

Customization

If you want to change the order of the buttons you just have to change the order of the code snippets in the custom function. Because the CSS code that places the buttons uses the float property, paste the button HTML code in reverse order. So if you want the button order from left to right to be Facebook Like, Twitter, +1, paste the HTML code in this order:


 <!-- Google +1 button -->
 <div class="plusone">
   <g:plusone size="medium" href="'.$permalink.'">
 </div>

 <!-- Tweet button -->
 <div class="tweet">
   <a class="twitter-share-button" href="https://twitter.com/share"
   data-text="'.$datatext.'" data-url="'.$permalink.'">Tweet</a>
 </div>

 <!-- Facebook Like button -->
 <div class="fb-like" data-href="'.$permalink.'"
   data-send="false" data-layout="button_count"
   data-width="90" data-show-faces="false" data-font="arial">
 </div>

For options to customize the look of each button, check out these links:

Google +1 Button
Facebook Like Button
Twitter Buttons

Some caveats

This method does not play nicely with Genesis’s Simple Edits plugin. It will override the custom function we’ve created. If you’re not already using Simple Edits, great. If, like me, you’re using Simple Edits to customize your footer and/or post meta, I’ll write a post in few days on creating a custom shortcode that you can use in the Simple Edits Post Info section.

Also, like I said in the original post, the buttons might not be perfectly aligned in some cases. Depending on the width of your theme’s content area, one or more of the buttons might appear below the byline. If you view this blog on an iPhone, you’ll see what I mean.

Also, readers using Internet Explorer 9 in compatibility mode or IE 7 will see the buttons one line below the byline. Chances are that few of your readers will experience this, though.

Thanks again to Santel Phin for his input and letting me know I was heading down the right road.

Update July 7, 2012: There were a couple of typos in the custom function code (Step 1) causing the Twitter button to display inaccurate counts on the homepage. I also changed the name of the custom function to avoid any potential conflicts with the StudioPress code.

Update July 13, 2012: For Prose 1.0 users, a change in WordPress 3.4 prevents the custom.css file from being loaded into the code editor. So if you’re using WP 3.4 or later, you’ll have to use FTP or your host’s file manager to edit the custom.css file.

Credit to the following for the button graphics I used in this post’s featured image:
Like button: Small Buck
+1 button: MachoArts
Twitter button: Edudemic

Resources

How To Integrate Facebook, Twitter And Google+ In WordPress
How to Customize the Post Info Function

How to Reorder StudioPress’s Simple Social Icons and Add Tooltips

I love StudioPress’s Simple Social Icons plugin. I’ve been using it ever since I created my Google Plus Page. My big quibble with it, though, is that you can’t change the order of the icons. They’re simple ordered alphabetically by name, left to right. Take it or leave it.

So if I use the email, Facebook, Google+, and RSS icons, this is how they’ll be ordered.

Simple Social Icons in Alphabetical Order

Another feature that would be nice is to have tooltips appears when readers mouseover an icon. A directive-laden tooltip might be the push a reader needs to click on the icon and check out your social media presence.

These omissions are no big deal. Simple is in the plugin’s name afterall. The ability to add tooltips and change the icon order from the Dashboard would make it less so, especially for the developer.

I’ll show you how to customize the order of the Simple Social Icons as well as add tooltips to each of them by editing the plugin’s PHP file using the WordPress plugin editor.

STOP!

Before you even look at the code, make sure you have a recent backup of your site, especially if you’re already using Simple Social Icons. Inadvertently typing even a single character in the wrong place can create errors that will end up deactivating the plugin.

OK, now that the alarm bells have stopped ringing, let’s get a quick orientation to the plugin code and then reorder the icons.

Getting to know the plugin code

First, get to the plugin editor by going Dashboard -> Plugins -> Editor.

WordPress Plugins Menu

Once you’re in the editor, find the “Select plugin to edit” dropdown menu, choose “Simple Social Icons,” and click the select button to right of the menu.

WordPress Plugin Editor Plugin Selection Menu

Scroll about a fifth of the way down and below the line containing $this->profiles = array, you’ll see blocks of code for each of the social icons. You can see the email icon block highlighted in blue below.

Simple Social Icons Code Block

Zooming in, you can see that each block of code (about nine lines per block) begins with the name of the social network in single quotes. The block for a given icon ends with a line that contains only a closing parenthesis and comma.

Simple Social Icons Code Block Zoomed In

Change the order of your icons

To change the order of your icons, all you have to do is change the order of the icon code blocks. For example, if you want to place an icon between your Dribble and Email icons, cut the code block of the icon you want to move, and insert it between the Dribble and Email blocks.

Simple Social Icons Insert Code Block

If you’re not using the Dribble and Email icons, you can still move an icon’s code between those code blocks, and the icon you moved will be the first one on the left.

Adding tooltips to the icons

Tooltips are the little text boxes that appear whenever your mouse hovers over an HTML element, a link for example, that uses the title attribute.

To add a tooltip to an icon, find the link element in the icon’s code block. The link element begins with <a, and is at the end of the line that begins with ’pattern’. Add the title attribute between the <a and the href.

Simple Social Icons Google Plus Block

Create a title attribute simply by typing title= followed by the text you want to appear in the tooltip. The tooltip text must be surrounded by double quotes.

Here’s a sample title attribute for the Google Plus icon: title=”Follow me on G+”.

Simple Social Icons Google Plus Block With Title

You can change the text between the double quotes to anything you like.

Now when readers mouseover your social icons, they’ll get an extra hint about where they’ll go when they click on it.

Custom Ordered Simple Social Icons With Tooltip

As a final note, if StudioPress updates the plugin and you download the update, you’ll have to redo these changes.

All this might be easier to understand in video format, so viola! Here’s my first video for the blog.

Can’t see the video? Watch it here.

Please check out the video and let me know in the comments which format was more helpful: this post or the videos.

4 Steps to Quickly Add Social Sharing Icons to Your Genesis Post-Info

Google, Twitter, and Facebook Share Buttons

Note (7/5/12): This method is obsolete. The button counts on the homepage weren’t accurately reflecting the counts on the post pages. Here’s a short explanation. A new method that doesn’t require the Simple Edits plugin has been posted here. I’ve also come up with an alternative method that’s compatible with Simple Edits.

For the Genesis users out there, I want to give you a quick tutorial how to add share buttons to your article bylines for the “big three” social platforms: Twitter, Google+, and Facebook.

In my quest to “get more social” at The Hobby Blogger, I recently added Twitter share, Google +1, and Facebook Like buttons to the byline (aka post-info) section of each post. I’m in the midst of auditioning floating sidebars, but in the mean time, I wanted to offer readers an easy way to share my posts. After all, it’s a good way to bring more traffic to the blog.

Here are four steps to add a Tweet, +1, and Like button to Genesis’s default byline so that it looks like this:

Twitter, +1, Like Buttons in Post-Info

 1. Install Genesis Simple Edits plugin

This is a lightweight plugin that creates a new Genesis settings page allowing you to modify the post-info (byline), post-meta, and footer area on any Genesis theme. As usual, you can download and install it from your WordPress Plugins panel.

2. Insert html for buttons into Post-Info

Once the Simple Edits is installed, go to Dashboard -> Genesis -> Simple Edits and copy this code into the end of the “Post Info” field.

<div class="fb-like" data-send="false" data-layout="button_count"
 data-width="90" data-show-faces="false" data-font="arial"></div>
<div class="plusone"><g:plusone size="medium"></g:plusone></div>
<div class="tweet"><a href="https://twitter.com/share"
 class="twitter-share-button">Tweet</a></div>

Genesis Simple Edits Post Info

3. Paste JavaScript code for the buttons in your theme’s footer

Go to the Genesis -> Theme Settings page and scroll down to the Header and Footer Scripts Section. In the “wp_footer()” field, paste this script code:

<!-- Tweet Button -->
<script>!function(d,s,id) {
 var js,fjs=d.getElementsByTagName(s)[0];
 if(!d.getElementById(id)){js=d.createElement(s);
 js.id=id;js.src="//platform.twitter.com/widgets.js";
 fjs.parentNode.insertBefore(js,fjs);}
}(document,"script","twitter-wjs");
</script>

<!-- Google +1 Button -->
<script type="text/javascript">
(function() {
 var po = document.createElement('script');
 po.type = 'text/javascript'; po.async = true;
 po.src = 'https://apis.google.com/js/plusone.js';
 var s = document.getElementsByTagName('script')[0];
 s.parentNode.insertBefore(po, s);
})();
</script>

<!-- Facebook Like Button -->
<div id="fb-root"></div>
<script>
(function(d, s, id) {
 var js, fjs = d.getElementsByTagName(s)[0];
 if (d.getElementById(id)) return;
 js = d.createElement(s); js.id = id;
 js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
 fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>

Genesis Theme Settings - Footer Scripts

Putting the JavaScript in the footer instead of the header will make sure the buttons don’t slow down the loading of your content.

4. Align buttons with CSS code

To make sure the buttons are horizontally aligned with the byline text, you need to add some code to your custom.css file. Go to Dashboard -> Appearance -> Editor, click on the custom.css link at the right, and then paste the code below into your theme’s custom.css file:

/**** Share Icons in Post-Info *******************/

/* Tweet Share Button */
div .tweet {
 float: right;
 width: 95px;
 }

/* Google +1 Button */
div .plusone {
 float: right;
 width: 87px;
}

/* Facebook Like Button */
div .fb-like {
 float: right;
 width: 90px;
}

Customization

If you want to change the order of the buttons you just have to change the order of the code snippets in the Simple Edits Post-Info field. Because the CSS code that places the buttons uses the float property, paste the button HTML code in reverse order. So if you want the button order from left to right to be Facebook Like, Twitter, +1, paste the HTML code in this order:

<div class="plusone"><g:plusone size="medium"></g:plusone></div>
<div class="tweet"><a href="https://twitter.com/share"
 class="twitter-share-button">Tweet</a></div>
<div class="fb-like" data-send="false" data-layout="button_count"
 data-width="90" data-show-faces="false" data-font="arial"></div>

For options to customize the look of each button, check out these links:

Google +1 Button
Facebook Like Button
Twitter Buttons

It’s quick, but not perfect

While I’ve shown you a quick way to get Twitter, Google +1, and Facebook share buttons on your byline, in a few cases, it comes at the expense of imperfectly aligned buttons. Depending on the width of your theme’s content area, one or more of the buttons might appear below the byline. If you view this blog on an iPhone, you’ll see what I mean.

Also, readers using Internet Explorer 9 in compatibility mode or IE 7 will see the buttons one line below the byline. Chances are that few of your readers will experience this, though.

If you have any recommendations for other social sharing plugins, let us know in the comments.

Shout out to the following for the button graphics I used in this post’s featured image:
Like button: Small Buck
+1 button: MachoArts
Twitter button: Edudemic

Unclogging the Pipes: Overcoming My First Blogging Dry Spell

Storm Trooper with a Plunger

Licensed under Creative Commons by JD Hancock

Seems like I’ve fallen into the same rut that inspired me to start this blog in the first place. Back then, a blog I intended to start never got off the ground, because I spent seven weeks reading about blogging.

See what I just said? I was reading about blogging, but not actually blogging. I created this blog because of that frustrating realization.

It’s funny because the tendency to do a lot of research plagues me often. When I bought my first car, I did about two months worth of research—reading forums, magazine reviews, etc.—before I made my purchase.

Of course, that was almost thirteen years ago. I still drive that car every day to work, and I haven’t had to put any money into it other than routine maintenance. All in all, I’ve regretted few, if any, of my major purchases. So doing a lot or research is usually a good thing for me.

When it comes to blogging though, my penchant for research and preparation gets in the way if I’m not careful.

Lately I’ve been working on a couple of projects for this blog that have kept me from posting for a while. The projects are taking longer than planned because I want to get some other things in place (like setting up MailChimp) to take full advantage of the posts: the over-preparing thing.

I hadn’t created a Facebook or Google+ page because I wanted to learn more about the best ways to create and use them. Again, things not getting done because I didn’t feel completely prepped.

So my drive and motivation have waned, and I’ve been slacking a bit.

Finally, Jason Mathes’s (from avgjoegeek.net) comment on my last post woke me up and made me realize the over-research/prep monster was creeping in and blocking up my blogging.

I know it happens to bloggers­­––losing motivation or inspiration. More and more time elapses between posts, and soon the blogs drift into the ether. Three newish blogs I was reading a regularly have gone completely dark over the last month. I hope they come back, but it doesn’t look promising.

I refuse to let that happen to me. Just like how I started this blog, I just went and created my Google+ page. It’s barren, but I’ll figure it out and improve it as I go along.

I know Nike’s “Just Do It” slogan can be trite at times, but they’re right. Get off the schneid and do something, anything, to keep your momentum going.

Thanks Jason for shaking me up a bit.

I wonder if any of you have hit dry spells. When did you hit your first blogging wall? How did you get through it?

State of the Blog: Months 4-7 and the Importance of Blog Commenting

Airplane Taking Off

Image copyright ssuaphoto – iStockphoto.com

It’s been a little over seven months since I launched The Hobby Blogger, and it’s really starting to come into its own. I’ve fleshed out the blog’s structure and given it a new look. Traffic is growing. Posts are getting comments. It feels like a full-on blog now.

In this post I’ll tell you how have I’ve grown my traffic, and we’ll look back on the goals I set in the last update and see how well I stuck to them.

Strong traffic growth

During the first three months, I had very little traffic and no one had commented on any of my posts. I hadn’t performed any blog promotion either: no social media, only one comment on another blog, and I had told only two people about my blog.

Starting in December, I began regularly commenting on a number of blogs, growing my traffic significantly. Here’s a graphic showing the number of THB’s monthly unique visits. Note that Google Analytics data is missing because I didn’t install it until right before the New Year.

THB Unique Visitors First 7 Months

While the numbers between AWStats and Google Analytics differ significantly, the trend is the same: traffic has been roughly doubling every month since I began commenting on other blogs. The total visits also shows the same trend.

THB Total Visitors First 7 Months

In February, I got a big lift in traffic from a comment I made on StudioPress’s blog. It wasn’t the comment’s backlink that brought in the new traffic. Rather, Brian Gardner checked out my blog through the backlink, and liked my recent design changes so much that he featured The Hobby Blogger in their showcase.

You can see the traffic spike in the Referral component of traffic sources below. This is a stacked area plot in which the amount of each type of traffic is represented by how much area each color covers. So because you see very little green relative to the other colors, it means that the amount of direct traffic (via bookmarks or typing the site’s address into the browser’s address bar) I get is relatively small—about 20%.

THB Traffic Sources Jan-Apr 2012

The other interesting part of this graphic is the recent increase in search engine (organic) traffic. Recently, it’s been about 40-45% of my traffic. This is because I’ve been more mindful of putting relevant keywords in my post titles and headings.

Overall, the number of visitors is still quite small, but I’m psyched about the rate of growth. Also keep in mind that I still have no presence on any social networks yet, so there’s still a lot of growth potential.

One final traffic stat is that my Alexa Rank has gone from 8,899,358 on Dec. 6 (when I installed the Alexa Toolbar), to 428,726 as of March 31.

Regular comments

Most of my posts now get a handful of comments, and I gratefully reply to every one of them. It’s really nice because many of the comments have been helpful and pointed out things I’ve missed, or have given me something new to think about. A nice little community is starting to grow here.

Room for improvement

While I’m happy with the traffic and participation, the blog still isn’t firing on all cylinders.

  • Email list – I only have about 12 FeedBurner subscribers, two of them by email. Everyone says that the money is in the list. Well, I’ve got a long way to go then.
  • Revenue – I’ve earned a whopping total of $0.00. Not that I’m surprised. I’ve had quite a few click-throughs on my StudioPress affiliate links, but no commissions yet. That’s OK. I realize my traffic is way too low to be making any significant money. At this point, creating content is still my main focus.
  • Bounce rates – Bounce rates are running about 60%, which is still way too high. Though it’s understandable given that so much of my traffic is coming from the StudioPress showcase. Those visitors are probably bloggers just checking out the look of my theme, and unless they’re interested in this niche, few of them will stick around for long.
  • Posting schedule – I’m still struggling to post regularly every week. I’m striving to set a standard schedule of posting every Thursday. I don’t have any posts in reserve either. I’d like to build up a cache of five to ten posts to cover vacations, intense times at work, etc., and perhaps build up to posting twice a week.

Previous goals

Here’s a status report on the goals I set for months four through six, and how well I met them.

Add more basic blog elements

  • Contact page – Yep. I’ve even received a few emails through it.
  • Email subscription form – Got it. Though I only have two subscribers so far.
  • Newsletter subscription form – Nada. Can’t yet justify devoting any time to setting up a newsletter.
  • ChangeBlog – Check. Not yet sure if this is a “hit” yet, but it does get quite a few views, and it’s unique to my blog. My apologies to Internet Explorer users on the formatting. It’s the only browser that centers the text in each table cell, but a fix is on the way.
  • Privacy and disclosure policies – Extra credit. I didn’t originally plan for these pages, but I discovered their necessity when I started my affiliate programs.

Grow readership and traffic

  • Engage blogging community
    • Comment on blogs – Started doing this in earnest at the beginning of December, and that’s exactly when my traffic started to grow.
    • Participate in forums – Haven’t got around to doing this yet because of time, but I wonder if it’s even worth doing. I’ve wanted to join WarriorForum, but which gives more bang for the buck in terms of driving traffic: blog commenting or forum posts?
  • Create presence on Facebook, Google+, Twitter – FAIL. The good thing is that my traffic is still growing without the use of any social media.
  • Research/improve search engine optimization– I’ve slowly picked up and started implementing a few SEO tricks:
    • Front-loaded keyword-rich post titles that are less than 70 characters
    • Keyword-rich h2 and h3 headings
    • Using Google Web Master tools
    • Creating a sitemap using Google XML Sitemaps plugin
    • Changing my permalink structure to a custom structure with keyword-rich slugs

Site design

  • Create color scheme – More than just a color scheme change – also created a new logo, moved the navigation menu to the header, snazzier email subscription box.
  • Add visual gradients to comments – Haven’t gotten to this yet, but will soon. Not a super high priority though.
  • Security tweaks – Umm, yeah. Hackers, please stay away a little bit longer. Already have a few things locked down like changing the admin username and using a subfolder for the WordPress files.
  • Speed optimizations – enabled gzip compression, reducing bandwidth by half and hopefully speeding up your load times.
  • Development site – Extra credit. When I wanted to work on my design changes, I needed to install a local copy of the blog on my laptop so I could test design changes without messing up the live blog. It was indispensable in coming up with the new design.

Revenue groundwork

  • Become affiliate for Genesis, HostGator, and NameCheap, and add their banners to my sidebar – Got the first two done. Haven’t made a dime yet.
  • Experiment with Google AdSense – Not yet. As a nod to John Saddington’s recommendation of getting at least 250 unique visits a day before advertising, I’m going to hold off on implementing AdSense until I get more traffic, especially since there are far more pressing issues to deal with that will help increase said traffic.

Goals for next three months

Here’s what I’d like to accomplish by the end of June:

  • Add Google+, Facebook, Twitter presence – Though I’m worried about time being taken away from writing, I need to at least get going with Google+ to keep growing traffic.
  • Build up a reserve of at least five posts – This will help ensure I post regularly every week.
  • Blog enhancements
    • Add visual gradients to comments.
    • Add sitemap to blog – I want readers to be able to find older content more easily.
    • Security tweaks – Would love to be able to securely login on public wifi without worrying about my password getting hacked.
    • Speed tweaks – Add a caching plugin to speed up page loads.
    • Add an affiliate box like Darren Rowse does on ProBlogger that promotes Genesis and HostGator.
    • Update Prose theme to version 1.5 – I’m really excited about the responsive design aspect of this update so that the blog works better on mobile devices.

Bottom line

The main idea to take away from this post is that simply commenting on other blogs will help get your blog’s traffic off the ground. And doing a little search engine optimization on your posts will enhance that traffic. So if you’re pressed for time when you start out blogging, you can put off promoting your blog through social media, and you’ll still get visitors.

Keeping those visitors is a whole other ballgame. I’m only scratching the surface by analyzing visits. We should also be paying attention to repeat visits, bounce rates, how many pages deep our visitors go, and so on.

How did your blog’s traffic grow early on? Also, any tips to help me post more regularly? Let us know in the comments.

7 Convincing Reasons Why You Should Cloak Your Blog’s Affiliate Links

[This post is part of a series on Exploring Affiliate Marketing.]

Cloaked Woman

Licensed under Creative Commons by Drodeian

I’ll get straight to the point: cloak your affiliate links and you’ll maximize their earning potential and save time managing your links. In my research, I came across seven important points that convinced me bloggers should cloak their affiliate links.

What is cloaking?

Link cloaking is when you make a link to a third-party website appear to point to another page on your blog. So when a reader hovers their cursor over the affiliate link, they see something like:

http://www.yourdomain.com/go/affiliate-merchant/

in their browser’s status bar instead of

http://www.affiliate-merchant.com

There are several ways to cloak your links (JavaScript, PHP, plugins, etc.). Since I use StudioPress’s Simple URLs plugin for my affiliate links, I’ll base my examples in this post on this very handy plugin.

1. Increase clickthroughs

Affiliate URLs are usually quite ugly. If someone hovers over an uncloaked affiliate link to StudioPress, they see something like this in their browser’s status bar (note not a real link):

http://www.shareasale.com/r.cfm?b=34as0&u=5sd11&m=2ds469&urllink=&afftrack=

It doesn’t look very elegant, and the fact that it goes to a seemingly unrelated site might prevent a wary reader from clicking on the affiliate link.

However, I can (and do) cloak my StudioPress and other affiliate links by creating an internal link that redirects to the affiliate link. Doesn’t this URL look more inviting?

http://www.thehobbyblogger.com/go/studiopress/

It appears to go a page on my own site, so the trustworthiness of the link is much higher than the naked ShareASale link.

2. Higher email delivery rates

If you put affiliate links in an email to your subscribers, cloaked links are less likely to trigger spam filters than bare affiliate links. Overzealous affiliate email marketers can cause the domain of an affiliate program to get blacklisted by spam filters. So any email you send containing a blacklisted link might never reach your subscribers.

If you send text-only emails, cloaked URLs which tend to be shorter are also less likely to improperly formatted by email clients than long affiliate URLs.

3. Easier link management

What if your affiliate program changed the links to its products or closed business? Unless you’re comfortable with database editing, it’d be a big chore to go back through all your posts and change the links.

If you use a plugin like Simple URLs to cloak your links, you only have to change the link in one place—very convenient.

4. Reduced commission loss

A lot of affiliate marketing websites (usually ones that push cloaking software) warn of malware on your visitor’s computers that can replace your affiliate code with another affiliate code, stealing your commission. The thing is, I can’t find any hard data on how prevalent this might be. There’s really nothing you can do about it, anyway, except partner with networks such as ShareASale or Commission Junction that actively discourage these “parasite” affiliates.

Another form of hijacking is when someone arrives at a product page, and then replaces your affiliate code in the address bar with his own code. However, this is only an issue with programs like ClickBank that allow affiliates to make purchases through their own links. If you belong to one of these programs, then cloaking will help.

Cloaking will also help against bypassers, who, when they notice they’re about to click on an affiliate link, will just chop off the affiliate ID and go straight to the product page. Though if someone really wants to deny you a commission, all they have to do is delete their cookies, so it’s better not to obsess over thwarting bypassers.

5. Tracking

Many of the cloaking or link shortening WordPress plugins out there like Simple URLs or Pretty Link will also keep track of how often your links are clicked. This is very useful for finding which posts, pages, and/or parts of your blog’s layout are driving your commissions.

6. Beat ad blockers

Many of your readers might be using browser extensions such as AdBlock Plus that will prevent them from seeing your ads. Among other techniques, ad blockers look for affiliate links to determine if an image is an ad banner. By cloaking your links, ad blockers will usually let the banner appear as long as it is not hotlinked from the merchant’s domain. So you should also download the banner ad graphic file and host it on your server.

7. Easier to nofollow your affiliate links

In my last post, I talked about nofollowing your affiliate links to make sure Google doesn’t penalize your blog’s search ranking. However, manually adding the rel=nofollow attribute by hand every time you create an affiliate link is a pain.

However, once you make sure your cloaked link is nofollow, you can easily use that link over and over again throughout your blog. Some plugins, like Pretty Link, give you an option to nofollow the cloaked links from within the plugin interface.

I use StudioPress’s Simple URLs because, just as the name says, it’s simple and doesn’t add a lot of extra overhead to my blog. It works by using WordPress’s custom post types and 301 redirects.

Unfortunately, Simple URLs doesn’t have a nofollow option like Pretty Link, but Yoast shows how to block search engines by simply adding one line to your site’s robots.txt file. If you don’t yet have a robots.txt file, all you have to do is create a text file named robots.txt with these two lines:

User-Agent: *
Disallow: /go/

Assuming you’re using the Simple URLs’s default /go/ slug, this code effectively nofollows your affiliate links by preventing search engines from crawling any link that contains http://yourdomain.com/go/.

On a side note, if you’re not fond of the /go/ slug, I discovered from trotterWay that you can change it to anything you like by editing the plugin.php file in the simple-urls/ plugin folder. You can easily edit this file from your WordPress Dashboard by going to the Installed Plugins panel and clicking on the Edit link for Simple URLs.

Edit Simple-URLs in WordPress Dashboard

In the editor, search for the word “slug” and replace the word “go” with your own word, maybe “recommends” or “affiliate”. Make sure you don’t erase the single quotes around the word.

Edit Simple URLs Slug

Also remember to change your robots.txt file to reflect the new slug.

But what about honesty?

Some might argue that link cloaking is a deceptive practice. But which of these two links do you think most people would say more accurately tells the reader that the link goes to a StudioPress page:

http://www.shareasale.com/r.cfm?b=34as0&u=5sd11&m=2ds469&urllink=&afftrack=

or

http://www.thehobbyblogger.com/go/studiopress/

I’d say the cloaked link is more “honest” than the naked affiliate link. If you’re still concerned, there are a couple of steps you can take to make sure you stay in your readers’ good graces:

  • You should have a good disclosure policy in place that discloses all of your affiliations.
  • You could also edit the title attribute of your affiliate links to show something like “Affiliate Link” whenever your readers mouse over the links.

You won’t be able to please everybody, but the benefits of cloaking far outweigh the few readers you might put off using this technique.

Final notes

For well-known merchants such as Amazon, some say that bare affiliate links are good because the reader sees the merchant’s domain (amazon.com) in the link. While that’s a good point, I feel the same can be accomplished with a cloaked link like

http://www.yoursite.com/go/Amazon-product-name/

and you still get all the other benefits of cloaking.

Finally, if you’re interested in using Simple URLs, Corrupted Development has a good run-through on how to set it up.

How do you handle your affiliate links? Do you think it’s shady to cloak your affiliate links?

NoFollow Affiliate Links? What Bloggers Need to Know to Save PageRank

[This post is part of a series on Exploring Affiliate Marketing.]

While learning how to be an effective affiliate marketer, you might read about how Google penalizes your blog’s PageRank if you don’t “nofollow” paid links. Since search engine traffic is key for getting commissions from your affiliate links, you can’t afford a hit to your blog’s ability to be found by search engines.

I had to wade through a lot of confusing information about nofollowing affiliate links. Here’s a break down of the issue so you don’t have do all the slogging I did.

Nofollow Your Blog's Affiliate Links

Licensed under Creative Commons.

What is nofollow?

I’ll let Wikipedia tell you:

nofollow is a value that can be assigned to the rel attribute of an HTML a element to instruct some search engines that a hyperlink should not influence the link target’s ranking in the search engine’s index.

So when you create a nofollow link to a site, you’re telling search engines not to use that link as a factor in figuring out the site’s rank in their search results.

Google devised the nofollow value to fight comment spam on blogs. The idea was that if links in comments couldn’t affect PageRank, there would be less incentive for spammers to post comments.

Why Google doesn’t like paid links

Paid links are links that appear on a blog because someone paid you to put them there.

Because a site’s search rank is partly based on the sites that link to it, Google doesn’t want paid links affecting its ranking. Makes sense right? Otherwise, websites with huge budgets would dominate search results.

Instead, Google wants a site to rank high because other bloggers linking to it believe its content is relevant and useful to their readers. Google allows bloggers to be paid for links as long as bloggers use the nofollow value in the paid links. If they don’t, Google will lower the bloggers’ rank in its search results.

The problem for Google is that they have a hard time detecting paid links. If I gave you money to put a link to my blog on yours, Google can’t distinguish it from a link selflessly posted because it was valuable to your readers. This is why they want to you to nofollow paid links: to help them know when a link exists for monetary purposes.

Google also asks people to report sites that try to increase PageRank using paid links.

How does nofollow apply to affiliate links and banners?

Does Google consider affiliate links and banners paid links? In a word, yes.

In an interview with Eric Enge, Matt Cutts, the head of Google’s Webspam team said of affiliate links:

“…the link is essentially driving people for money, so we usually would not count those as an endorsement.”

Later in the interview, Cutts specifically says that Google doesn’t “want advertisements to affect search engine rankings.”

In other words, Google feels affiliate links benefit the site owner more than its readers, so they don’t want those links influencing your blog’s search results.

Will Google penalize your blog if you don’t nofollow affiliate links?

Probably not. Matt Cutts has said that because of the way affiliate links work (redirection, affiliate IDs in the URL), “Google does a pretty good job of detecting and handling things like affiliate links or banner ads.” So they’ll automatically remove those links from their PageRank algorithm without penalizing your site.

However, if you stuff your site full of affiliate links and they’re not relevant to high quality content, then your PageRank will suffer.

How to make your affiliate links nofollow

If you typically use WordPress’s visual editor, switch to the HTML editor by clicking on the HTML tag.

Wordpress Visual Editor

Find the anchor tag (it starts with <a), and inside the closing angle bracket insert this text: rel=”nofollow”.

WordPress HTML Editor

This might become tedious if you use affiliate links often. When my next post in the affiliate marketing series talks about link cloaking, I’ll show you a more convenient way to make sure that search engines don’t follow your affiliate links.

Conclusion

To ensure you don’t hurt your blog’s search engine results, you should nofollow all your affiliate links and banners. It’s really a no-brainer. After all, your merchants don’t need the boost in PageRank. You’re already giving them what they really want: their products promoted on your blog.

Reduce Comment Spam on WordPress without Paying for a Plugin

Reduce Comment Spam

Image copyright redmal – iStockphoto.com

Eventually, your blog will draw enough traffic and attention that you’ll have to deal with a significant amount of comment spam.

It’s almost a rite of passage. You’re getting your content out into the blogosphere, Google starts to rank your site, and new readers visit your blog. Unfortunately, spammers also become aware of your blog, and they’re very eager to get their links onto your comments section.

With traffic comes spam

I got a nice bump in traffic last week after StudioPress featured my blog on their showcase.

Then yesterday, I started getting hammered by comment spam—thirty-one spam comments in one day. Okay, I know that’s not a lot considering others might have to deal with a few hundred a day, but to this point, I never had to deal with more than ten in a given day. In fact, thirty-one were more than I had over the blog’s first five and half months!

I love any comment I can get on this fledgling blog, but I only have a few hours a day to devote to it. So having to manually filter spammy comments to make sure the legitimate ones don’t get overlooked was going to be a real drag.

I realized I might have to start using a plugin like Akismet to filter the spam. The problem is that because of affiliate ads hosted here, The Hobby Blogger is now a commercial blog, which means I have to pay $5 a month to use Akismet; big bummer since I’m not making any money yet.

And while Akismet seems to be the de facto comment spam blocker, it’s not perfect. You’ll still have to check for legitimate comments that get marked as spam (false positives).

So what do you do? Is there any way to put off using a plugin to combat spam? Yes there is. I found the answer on WordPress’s Combating Comment Spam/Denying Access page.

Referrer Requests

There’s a key difference between readers and spam-bots when they post comments. When a reader posts a comment, their browser tells WordPress from which webpage he or she’s requesting to leave a comment. So if you comment on this post, your browser accesses wp-comments-post.php and says the browser was referred to that code from http://www.thehobbyblogger.com/reduce-comment-spam/.

When a spam-bot tries to leave a comment, it will bypass your site altogether and directly access wp-comments-post.php. In this case, wp-comments-post.php usually gets an empty referrer request.

Your server can detect this empty referrer request allowing you to deny the spam-bot access and send it packing.

To do this, you’re going to add the following code to the .htaccess file in your WordPress root folder. This is the folder that has folders such as wp-admin/ and wp-content/. In most cases this will be in your public_html or www folder.

# BEGIN Deny access to No Referrer Requests
RewriteEngine On
RewriteCond %{REQUEST_METHOD} POST
RewriteCond %{REQUEST_URI} .wp-comments-post\.php*
RewriteCond %{HTTP_REFERER} !.*thehobbyblogger.com.* [OR]
RewriteCond %{HTTP_USER_AGENT} ^$
RewriteRule (.*) http://%{REMOTE_ADDR}/$ [R=301,L]

# END Deny access to No Referrer Requests

This code detects when a request is made to post a comment. If the request is not made from a page on your site, or if there’s no referring page with the request, the requester (spam-bot) is denied access and redirected back to its own IP address.

Edit .htaccess file in cPanel

If you’re using a cPanel-based host like HostGator, you can edit the .htaccess file in your browser. Click on the File Manager icon in Files section of cPanel.

File Manager Icon in cPanel Files Section

Navigate to your WordPress root folder, click once on the .htaccess file to select it, and then click on the Edit icon at the top.

cPanel File Manager WordPress Root Folder

If you get a popup asking to select the encoding, just click on the Edit button at the bottom right.

cPanel Text Editor Encoding Check

Now paste the code at the end of the file and click on the Save Changes button at the top right of your browser. Make sure you replace thehobbyblogger.com on line 5 with your own domain, without the www.

It works!

This little trick was huge. I haven’t had a single comment spam since denying access to no referrer requests.

It won’t stop all spam, and I’m sure some more sophisticated bots will find their way here and try to leave their mark. For the time being at least, I’ve put off having to spend any money to stop them.

Update July 28, 2013

While this method worked for about a year, spambots eventually found their way around it. I found a new way to stop the mountain of spam that returned, and I write about it here. And yes, it’s still free.