Wait, What Happened to My WordPress Blog’s Header?

Has the header image or logo on your WordPress blog recently disappeared and been replaced with the text of your blog’s title and tag line? Have you recently upgraded to WordPress 3.5 or later? If so, the two are likely related, and I’ll show you how to easily fix it.

If you’re still using WordPress 3.4 or earlier, you should read also this post so you are aware of what might happen when you decide to upgrade to WordPress 3.5 or later.

Last week I noticed that this blog’s header went from looking like this

The Hobby Blogger's Correct Header

to looking like this

The Hobby Blogger's Messed Up Header

DOH!

I had just returned to blogging with my first post in five months, and I noticed the change to my header four days after I published the post. Not exactly a triumphant return.

I frantically began troubleshooting the issue. Here’s what I tried:

  • Deactivated all plugins – This is one of the first things to do when you notice something wrong with your blog. If turning all of them off fixes the problem, then re-activate only one plugin at a time until you see the “wrongness” rear its ugly head. Now you’ve pinpointed the culprit plugin. In my case, deactivating all my plugins didn’t return my header back to normal.
  • Browse to the header image – If your header image or logo has disappeared, try navigating to the image in your browser to make sure the image is still readable. My header image is located in my theme’s images folder, so I confirmed it was still viewable by pointing my browser to:

www.yourdomain.com/wp-content/themes/theme_name/images/banner-logo.png

The key symptom

Next, in my Dashboard I went to Appearance ­-> Header. In the Header Text settings, I noticed that the box next to “Show header text with your image” was checked. It should not have been. Also, the Text Color selector widget was missing.

WordPress Header Text Settings

I unchecked the box, but when I clicked the Save Changes button, the box was checked again. Something was overriding the Custom Header settings.

It took a little bit of Googling and filtering through WordPress.org and StudioPress’s community forums before I started to clue in on what was going on.

How to fix it

In your Dashboard, go to Appearance -> Themes. The takes you to WordPress’s new Theme Customizer. Make sure you’re in the Manage Themes tab.

WordPress Manage Themes Tab

Then click the Customize link.

The left sidebar shows a list of options for customizing your theme. The rest of your browser shows a live preview of the changes to the look of your theme.

WordPress Customize Theme Site Title Tagline

Click on Site Title & Tagline to show the related settings. Uncheck the box next to Display Header Text to remove the site title and tagline from your header. Wait a few seconds and the live preview should update the change. If the text goes away and your header image returns, you’re good to go. Just click the Save & Publish button to make the change go live on your site.

Why is this happening?

It appears that my header going all wonky is related to upgrading to WordPress 3.5.

The day after my “return” post, I decided to update my plugins as well upgrade from WordPress 3.4.2 to 3.5.1. Of course, in my haste to get back into the swing of things, I was lazy and neglected to try out the updates on my laptop’s test copy of The Hobby Blogger.

Knowing that my plugins weren’t the issue, it had to be the upgrade to WordPress 3.5. My best guess is that, even though the Theme Customizer feature was added in WordPress 3.4, the changes weren’t enforced until version 3.5.

What this means is that some themes might need to be updated to take advantage of the new Theme Customizer instead of using the old Appearance -> Header settings page. I’m using the older, pre-responsive design version of StudioPress’s Prose theme, so it makes sense that it would affect me. And it’s not limited to themes for the Genesis framework. I’ve seen people using other frameworks have the same issue with their headers as well.

Backup and test

This should serve as a gentle reminder to backup your blog before making any significant changes (I had). In addition, try to test your changes on something other than your live site if at all possible. Otherwise, you risk making a bad impression like I did for three or four days.

Hopefully this helped you out more quickly than it took me to figure out. If you have any more insight into what’s going on, please share in the comments.

More Reading

How to Back Up Your WordPress or Blogger Blog – AwesomelyLuvvie.com
WordPress Backups – WordPress.org

How to Add a Gradient to Your Genesis Theme’s Comments Section

Today I’m going to show you how to dress up your blog’s comments section by adding a gradient to the top of each comment. A background color that gradually fades away from the top of the comment header to the comment text is a subtle way to separate comments from one another and help guide a reader’s eyes down the page.

Screenshot of Comments Gradient

I’ll show you CSS code snippets that will allow you to add comment gradients to any of StudioPress’s Genesis child themes. Non-Genesis users should read this post too because I have something special to give away at the end of this post that anyone can use.

Image vs CSS

There are two ways to create a color gradient on a webpage. The first is to create a gradient in Photoshop, GIMP, or other image/graphics editing software, save it as a small image, and upload it image to your blog. Then add a few simple CCS rules to your theme’s stylesheet that tells the browser to locate the image file and repeat it over and over from left to right until its container is filled.

The other way is add some CSS3 (version 3 of the Cascading Style Sheets specification) rules to your stylesheet that tell a web browser to how to render the gradient without using an image. There are free web-based generators that allow you to easily create the CSS3 gradient code like Colorzilla.

The advantage of the latter method over the former is that your blog’s load times are faster because the browser doesn’t have to use an extra HTTP request and bandwidth to download the image.

The tradeoff, however, is that most browsers need the generated gradients specified in a unique way. This means you have to generate slightly different rules for each browser. If you try the Colorzilla generator, for example, you’ll that see it creates seven different browser-dependent rules.

If you only had to do this once, it might not be that big of a deal. Unfortunately, though, browser updates can sometimes render the code obsolete and mess up the look of your gradients. So every time one of the major web browsers releases a new update, you have to check to make sure your blog’s gradients are rendered properly.

That may be par for the course for full-time web developers, but your average blogger doesn’t want that hassle. I mean, how many of us have Chrome, Firefox, Safari, Internet Explorer and Opera installed on our machines and religiously test our blog’s appearance whenever those browsers are updated? I don’t.

Not a big effect on load time

If your comments section is the only place your blog uses a background gradient, then using an image won’t significantly impact its download time. The image is small (only a few hundred bytes), and once it’s cached in your reader’s browser, it won’t need to be downloaded again.

So for this blog, I decided to go for the simplicity of using an image gradient for my comments section. This post will show you how to do it.

Elements of gradient image

Gradients are a visual cues that help your readers see where a new comment begins. They should gradually fade away before interfering with the body of the comment. Here are some basic guidelines for you comment gradients:

  • Subtle color ­­– Use a light color that fits with your blog’s overall color scheme. A light grey color is usually a safe choice if you can’t decide on a color, especially if your blog’s background color is white or very light.
  • Readable text – The gradient shouldn’t be so dark that it makes text difficult to read. Always try to maintain high contrast between text and its background.
  • Fade to background – The gradient should gradually disappear into the background color that underlies your comments section. In other words, if your blog’s background color is light blue, the bottom color of your gradient should match. The reliable way to do this is to make your gradient’s bottom color transparent.
  • Fade out before comment begins – The bottom of your gradient image should not spill over into the body of the comment. This helps to separate the comment’s header (commenter’s name, the date, and the avatar) from the rest of the comment.

Generating the gradient

I’m not going to go into a lot of detail about how to create a gradient image. It’s not the easiest thing to do in the world, but it’s not very difficult either. There are plenty of tutorials out there to teach you how to do it depending on what software you’re using.

But don’t worry. I’ve got a surprise for you at the end of this post that might save you the time and effort of creating your own gradient anyway.

The important thing to know is that when creating a gradient image, save it as a PNG file. It’s the only web image format that gives quality gradients and allows a transparent bottom. The dimensions of the image should be only a few pixels wide and about 75-150 pixels high, depending on the height of your comment headers. The Hobby Blogger’s gradient is 100 pixels tall.

Here’s a web-based tool to create a gradient PNG file with transparency. You just have to remember to crop the image before you use it.

Where to place the gradient file on your server

Before I get to the code, change the name of your gradient image to comments-grad.png. This is name that will be used in the code snippets you’ll see in a minute. Next upload the image into your theme’s images folder. This folder will be

wp-content/themes/your_theme_folder/images/

So if you’re using StudioPress’s News theme, you should be able see the gradient image in your browser if you go to:

http://your_domain/wp-content/themes/news/images/comments-grad.png

You should see it in the top-left corner of your browser window.

Getting the code for your theme

The CSS code used to place the gradient image differs depending on the theme you’re using.

Using Google’s Chrome Developer Tools, I played with every StudioPress theme demo site until I got the gradients to work on every theme. I had to come up with a few variations, so I’ve created a page for each variation and link to them from the table below.

Every current StudioPress theme (and a few retired ones as well) is listed in alphabetical order, and links to a page on The Hobby Blogger containing the proper CSS code and an explanation of where to paste it.

Surprise! Free gradients

Okay, so you’re not a Photoshop wiz, and you don’t want to learn how to make your own gradients. You just want to quickly find a gradient image, upload it to your blog and see how it looks.

Well you’re in luck.

I sat down for a couple nights and created 249 gradient image files in several different colors and shades. You can see them all in the index image below.

Index of Free Gradient Images

I thought it’d be cool to just give something away with no obligation. I know I’m violating all kinds of blogging dogma by giving away something without requiring an email address first, but this is my first give away. Most people would probably sign up for my email list, get the download, and then unsubscribe anyway. So I figure I’ll just save them the trouble.

If you do want to sign up for email updates, in case, you know, I give away something else for free in the future, please do.

The download is a zip file containing several folders named according to the color of the gradients. Each image is 10 pixels wide by 100 pixels tall, a height that works pretty well with how most themes style the comments section.

Just browse through the gradients until you find one you like. Change the filename (or better yet, copy the file and change the copy’s filename) to comments-grad.png. Then upload the gradient image as described above. Assuming you’ve inserted the correct CSS code into your stylesheet, you should see the gradient in your comments when you refresh your browser. Note, you might have to clear your browser’s cache first.

So here you go. Click the button below to download the gradients.

And that’s it. If you use any of these gradients (or one of your own) on your blog, let us know in the comments so we can check it out.

Special thanks to Love with Bug for the Download button.

Bolster Your WordPress Blog’s Branding – Replace the Default Avatar

Happy Face on Mystery Man GravatarToday I’m going to help you reinforce your blog’s visual identity by showing how to swap out WordPress’s default comment avatar with your own custom avatar.

Why is this important?

By the time readers have scrolled down to the comments section, the most important part of your blog’s visual identity—the header—is no longer visible.

Any chance you can get to etch your blog’s identity into your readers’ minds is a good one.

Assuming you already have a square image ready to go, you can add your own default avatar in just a few minutes. First, though, here’s a little background.

Default WordPress avatar

When readers comment on your blog, WordPress uses the Gravatar platform to display a picture of the commenter next to his or her comment. If a commenter doesn’t have a Gravatar, or their email address isn’t associated with one, then WordPress displays the Mystery Man Gravatar as the default avatar.

Mystery Man Avatar

Not very exciting, is it?

Go to Settings -> Discussion and at the bottom of the page you’ll see some other options for default avatars, but they don’t have a lot of wow factor either.

WordPress Default Avatar Choices

Hopefully you have something you can use to create your own avatar. You can use your blog’s logo, or part of its banner shrunken down. Even some simple geometric shapes that use your blog’s color scheme will work.

What you’re going to do once you’ve created your new avatar is:

  1. Figure out the right size for your avatar.
  2. Upload it to your theme’s images folder.
  3. Add a custom function to your theme’s functions.php file.

1. Avatar dimensions

First, you want to make sure that your custom avatar has the same height and width that your blog’s theme expects. The simplest way to do this is go to the comments section in one of your posts, right-click (control-click for Mac users) on any of the avatars, and save the image.

OS X Chrome Web Image Context Menu

Determine its length and width (it should be square) by selecting the resize or similar function in your favorite image editing application. Alternatively, find the image you just saved in Explorer (Windows) or Finder (Mac), and right-click or control-click the file and select Properties (Windows) or Get Info (Mac).

Create and save your avatar using these same dimensions, and save it as a GIF, JPEG, or PNG file.

2. Upload avatar

Using an FTP program or your host’s web-based file manager, upload the avatar into your WordPress theme’s images folder. Need help finding that folder?

Go to the folder where WordPress is installed. Then go to the wp-content/themes/ folder and look for a folder named after your theme. That’s your theme folder. Inside it there should be an images folder, where you should put your avatar image.

For example, I use Genesis’s Prose theme, so I put my avatar in wp-content/themes/prose/images/

WordPress Theme Images Folder

3. Add custom function

Next, we’ll add a function to your theme’s functions.php file that will add the custom avatar to list of default avatars in the Discussion Settings page. 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.

// Add custom avatar
add_filter( 'avatar_defaults', 'custom_avatar' );

function custom_avatar ($avatar_defaults) {
$myavatar = get_stylesheet_directory_uri() . '/images/custom-avatar.png';
$avatar_defaults[$myavatar] = "Branded Avatar";
return $avatar_defaults;
} 

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

This function expects the avatar you uploaded is named custom-avatar.png. If your file has a different name, either change the file’s name to custom-avatar.png, or edit the name of the file in the code on line 5 where it says '/images/custom-avatar.png';.

Line 6 controls the label you see next to your avatar in the Discussion settings. Feel free to edit the text between the double quotes as you like. Spaces between words are okay here.

Thanks to Bourne Creative Blog for the code snippet.

Why this code is better

If you’ve read other blogs that cover this topic, some of them have a slightly different function. Instead of using get_stylesheet_directory_uri() in line 5, they use get_bloginfo('template_directory').

The problem with get_bloginfo('template_directory') is that if you using a child theme for a WordPress theme framework like Thesis or Genesis, the get_bloginfo statement will look for your avatar file in the parent theme’s folder (e.g. the Genesis folder), not the child theme’s folder. In that case, a broken image icon will appear instead of your avatar.

Using get_stylesheet_directory_uri() will cover you in either case.

Custom Avatar as an Option in WordPress Discussion Settings

Now you can go back to the Discussion Settings and select your new avatar from the bottom of the list.

Take advantage of every opportunity

Granted, few if any of your legitimate (non-spam) comments will use the default avatar. You will get some, though, so why not take advantage of those opportunities to spice up your blog’s visual appeal and increase its brand awareness?

Oh, and if you want to use the happy face avatar at the top for your custom avatar, feel free.

Thanks for reading.

References
WordPress Codex – Function Reference/get stylesheet directory uri
WordPress Code – Function Reference/get bloginfo

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

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.

How to Set up Your Blog’s Contact Page to Use Contact Form 7

A Contact page is a “must have” element that your blog can’t live without­—it’s right up there with your About page in importance. It encourages more interaction with your readers, and brings about opportunities for advertising and guest posts.

So, a couple of weeks ago, I added a Contact page to The Hobby Blogger. Though it would have been very easy to just post my email address on the Contact page, it also would have made it very easy for ne’er-do-wells to harvest the address and start spamming away.

Solving that problem is easy with a contact form plugin, which let’s your readers send an email to you by filling out a simple form.

Why I chose Contact Form 7

I did a lot of reading trying to find the best form plugin. Out of the plugins available on WordPress.org, Contact Form 7 is the most popular and highly rated. Other free plugins that I saw mentioned frequently in reviews and comment sections are Fast Secure Contact Form, and cforms II.

Formidable Forms seems to be gaining traction, offering a basic free version as well as paid pro package. On the paid side of the spectrum, Gravity Forms is well reputed, but it costs $39 for a single site.

Besides cost, I couldn’t find any major knocks against the above plugins, so I decided to stop wasting time and go with Contact Form 7.

In this post I’ll show you how to:

  • Create a contact form on in WordPress using Contact Form 7.
  • Replace the default spam-preventing Really Simple CAPTCHA with Google’s reCAPTCHA.
  • Add some code to your theme’s functions.php file to keep the Contact Form 7 software from loading on pages that don’t use the form.

Basic setup

Inserting the form on your Contact page is pretty straightforward.

Install plugin

Install CF7 by going to Dashboard > Plugins > Add New and enter “contact form 7” in the search box. Contact Form 7 should be at the top of the search results. Click the “Install Now” link. When the installation finishes, click the “Activate Plugin” link at the bottom of the status page.

Create Contact page

If you haven’t already, go to Dashboard > Pages and create a new page for your contact form.

If your permalinks use the page title for the page URL, edit the Contact page’s permalink to “yoursite.com/contact” in order to make it easier for visitors to enter the URL in their browser’s address bar.

WordPress Contact Page Slug

Insert contact form into Contact page

Follow the tutorial on CF7’s site.

Insert Contact Form 7 In WordPress

Preventing spam with reCAPTCHA

Contact forms are vulnerable to spammers using automated software (aka bots) to fill out and submit contact forms. An effective way to fight this form of spam is to require users to solve a (somewhat) simple puzzle before the submission is accepted.

CAPTCHA, an acronym for Completely Automated Public Turing Test To Tell Computers and Humans Apart, is such a test. It works by creating an image of distorted text that only humans, and not computers (hopefully), can solve by retyping the text in a small form.

CF7 natively supports Really Simple CAPTCHA, but it looks too simple to crack (solve automatically), so I decided to use Google’s reCAPTCHA instead. Admittedly, I don’t if many spammers actually try to crack CAPTCHAS.

Also, the cool thing about reCAPTCHA is that its service helps to digitize books and newspapers–a worthy cause.

In order to use reCAPTCHA with Contact Forms 7, follow the steps below, which include installing and activating two plugins:

  1. Install and activate the WP-reCAPTCHA plugin.
  2. Sign up for reCAPTCHAand create your public and private security keys (you’ll need a Google account).reCAPTCHA Security Keys
  3. Copy the public and private keys from Google reCAPTCHA site, and paste them into WP-reCAPTCHA panel.WP-reCAPTCHA Settings
  4. Uncheck the boxes next to “Enable for comments form” and “Enable for registration form” if you’re not using these features.
  5. Click on the “Save reCAPTCHA Changes” button.
  6. Install and activate the Contact Form 7 reCAPTCHA extension plugin.
  7. Navigate to the “Form” section at the top of the Contact Form 7 settings panel.
  8. Click on the “Generate Tag” dropdown menu and select “reCAPTCHA.”Generate reCAPTCHA Tag for Contact Form 7
  9. Copy the code snippet and paste it into the “Form” box.Contact Form 7 reCAPTCHA Tag
  10. Save the form.

Speed optimizations

A significant issue with Contact Form 7 is that it loads its JavaScript and stylesheet code on every one of your pages, regardless of whether or not they have a form. This has the potential to slow your site down. If fact, after installing CF7 my Google Page Speed Score went from 80 down to 77.

I should mention that the score isn’t a measure of how fast your site loads; it’s an indication of how well your site is optimized for speed. A low score means that there’s room for improvement. A perfect score of 100 means you’ve implemented every possible optimization.

Anyway, about a month ago, Jimmy Pena posted an elegant solution in a comment on WPBeginner. It’s a modification of WPBeginner’s method, but Jimmy’s is better because it’s more computationally efficient.

All you have to do is paste this code at the end of your theme’s functions.php file:

// Deal with Contact Form 7 JS and CSS loading on every page
add_action( 'wp_print_scripts', 'my_deregister_javascript', 100 );
function my_deregister_javascript() {
    // automatically deregister the wpcf7 js script
    wp_deregister_script( 'contact-form-7' );
    if ( is_page('contact') ) {
        // load the script only on the contact page
        wp_enqueue_script( 'contact-form-7' );
    }
}

add_action( 'wp_print_styles', 'my_deregister_styles', 100 );
function my_deregister_styles() {
    // automatically deregister the wpcf7 style
    wp_deregister_style( 'contact-form-7' );

    if ( is_page('contact') ) {
        // load the style only on the contact page
        wp_enqueue_style( 'contact-form-7' );
    }
}

The first code block takes care of the JavaScript, and the second block deals with the CF7’s stylesheet.

See where the code says 'contact_form_name'? Whatever is between the quote marks should match what you entered earlier for the Contact page’s slug.

Contact Page Slug for Optimization Code


Update 8/28/13: Jason Mathes of avgjoegeek.net had a great question: what if you have a contact form on multiple pages? How do you modify the code above so that the JavaScript and CSS is loaded on those pages?

In that case, you have to specify an array of page slugs in each of the two “if” statements. So if you have contact forms on your About, Contact, and Services pages, and they have the slugs “about”, “contact”, and “services”, respectively, the two “if” statements change from:

if ( is_page('contact') ) {

to

if ( is_page( array( 'about', 'contact', 'services' ) ) ) {

End update

Once you’ve finished the draft of your contact page, test the form by sending an email from a preview version of your new Contact page. If you receive the email, your contact form is ready to go, and you can publish your new Contact page.

Now you’ve given your readers (and potential advertisers) a safe and hassle-free way to get in touch with you.

Leave a comment telling us what you use for your contact form.

A Blogger’s Guide to Setting Up FeedBurner Email Subscriptions

FeedBurner Logo in Envelope

Licensed under Creative Commons.

More often than not, the first time someone visits your blog is usually the last. To keep from losing these readers forever, bloggers should make it as easy as possible for readers to know when new content is available.

After setting up The Hobby Blogger’s RSS feed, the next task was to enable readers to get blog updates by email. Not everyone wants or knows how to use an RSS reader, so offering an easy way to get email updates helps maximize subscriptions to your blog’s RSS feed.

In this post, I’ll show you how to offer email subscriptions to your readers using Google’s FeedBurner service.

Why I chose FeedBurner

Originally, I intended to use MailChimp for email subscriptions. Among other features, I liked that it’s free (up to 2,000 subscribers), and that you could brand the emails to look more like your web site.

I also wanted to send an email out every time I published a new post.

Then I began thinking:

  • If I start racking up email subscribers, and begin posting more than a couple times a week, I’ll have to move up to the paid tier sooner.
  • What if some readers don’t want an email every time I post? Maybe they would only want a weekly email summarizing the posts for that week.
  • What if I want to send out special emails to my readers, like teasers for upcoming posts?

To cover my bases, I decided to offer my readers a choice between daily and weekly updates, and using a different service to manage each choice.

Giving readers a choice

With daily updates, readers will get an email on any day that I publish a new post. These emails will be powered by FeedBurner because it’s free and unlimited in the number of subscribers I can have.

I’ll use MailChimp to manage the weekly newsletter style emails that will contain synopses of the week’s posts as well as teasers for upcoming content. Since these emails will go out less frequently, I can go longer before bumping up against the free 12,000 email/2,000 subscriber limit that would force me to start paying for the service.

So today, I’ll walk you through setting up FeedBurner to manage your email subscriptions.

Setting up FeedBurner

After logging into your FeedBurner account, go to the Publicize tab of the FeedBurner Dashboard, and click on “Email Subscriptions” on the left. Then click the Activate button.

FeedBurner Email Subscriptions

After clicking the Activate button, links to four preferences panels will appear.

Feedburner Email Subscription Preferences

Let’s look at these settings in more detail.

Communications Preferences

Email “From” Address – This is the address from where your feed emails will appear to come.

If you’re using a Google account, go to your mail account settings and check out the “Send mail as” setting. By default, it’s set to your first and last name.

You might consider setting it to the name of your blog, especially if you have more than one. It will help your readers realize that the email is a blog update. However, if you consider your name to be your “brand,” then using your first and last name is probably best.

Confirmation Email Subject – I feel that FeedBurner’s default subject line your subscribers will receive to confirm their subscription is good enough. Of course, you could personalize it a bit more by using something like, “Welcome to yourblog.com.”

Confirmation Email Body – Again, FeedBurner’s default is pretty good, but I added a couple lines saying that readers can unsubscribe at any time. I also assure readers that their email addresses won’t be used for anything other than blog updates. It’s good to make your readers feel as comfortable as possible before they click on the confirm link.

Email Branding

This section will let you customize the look of your feed update emails to better reflect your website’s design.

Email Subject/Title – Follow the hot tip suggestion to use the title of your most recent post as the email subject by entering ${latestItemTitle} in the box. Since I already use my blog’s name in the “From” address, I don’t add it the email subject line to avoid being redundant and leave more room for the post title.

Even though I don’t anticipate posting more than once a day, I also checked the box next to “Change Subject when an email has 2 or more items” just in case. Paste the suggested “${latestItemTitle}” plus ${m} more in the adjacent box.

Always have the latest post title in the subject line, no matter how many times you post in one day. Readers are more likely to read the email if they actually see a title that attracts their attention.

Logo URL – Pasting a link to link to an image of your logo will help your blog’s brand recognition. Just remember that if you’re protecting your images from being hotlinked, make sure you allow Google access to your images so the logo will display in the email.

Typeset – Help give your readers an experience that’s similar to reading your website by adjusting the look of the email text. You can preview it in the box below.

Delivery Options

When’s the best time to send out your email updates? It depends on your target audience. Do they work 9-5? Are they stay-at-home moms with kids in school? KISSmetrics has a great infographic to help you figure out the best time to send updates.

Select Timezone – If you don’t yet know where your readers are, just select your timezone. That way, at least you’ll know when your emails will go out relative to when you publish your post.

Schedule Email Delivery – FeedBurner will send out the email updates within a two-hour window of your choosing. It’s not very precise, but it probably helps Google balance the load on their email servers.

Subscription Management

These options control the form and/or links that your visitors will use to subscribe to email updates.

Subscription Form Code – Here you’re given an HTML code snippet that you can paste into any web page to create an email subscription form. The default form looks like this:

Enter your email address:

Delivered by FeedBurner

If you want to see the confirmation popup window that appears after clicking the Subscribe button, try submitting your email address in the form. Did you notice the not-so-subtle attempt to get you to subscribe to my updates?

Subscription Link Code – This HTML code snippet lets create a simple subscription link that would look something like Subscribe to The Hobby Blogger by Email (another shameless attempt). Go ahead. Click it.

Subscriber Management – Here you can view a list of your subscriber email addresses by clicking on the “View Subscriber Details” link.

Make sure to click the “CSV” link regularly to back up your list to a comma-separated file.

Also, if there are any subscriber addresses with an “Unverified” status, this means that a subscriber never clicked on the link in the confirmation email send from FeedBurner. It might have gone to their spam folder, so consider sending a personal email to introduce yourself and remind them to look for the email and confirm their subscription.

Feedburner Email Subscriber List

Where to put the form on your blog

If you’re focused on converting first-time visitors into subscribers, there are two vitally important places to put your subscription form:

  • Above the fold – Place the form somewhere at the top of your homepage so it can be seen without having to scroll down. The top of your sidebar is a good spot—it’s where I put mine. On some blogs, the form is the only thing above the fold.
  • About page – This is usually your blog’s second-most popular page. Hopefully you’ve hooked the reader’s attention, so this is the perfect time to ask them to subscribe to your feed.

Inserting the form in the sidebar

Remember the subscription form code snippet from the “Subscription Management” section? Go back and copy that code, then follow these steps:

  1. Go to Appearance > Widgets in your Dashboard.
  2. Expand the “Primary Sidebar” box at the top right of the page. Your theme might have some other name for the sidebar like “Main Sidebar.”
  3. Find the Text widget at the bottom of the “Available Widgets” box on the left of the page.
  4. Click and drag the Text widget to the “Primary Sidebar.”
  5. Enter “Get Free Email Updates” or something to that effect for the “Title” of the widget. The “Free” hopefully lowers the reader’s barrier to subscribing.
  6. Now paste the code snippet into the main box of the Text widget you just created, and click the Save button.

Email Text Widget Box

If you want to put the form in the content area of a static page—your About page for example—just switch to the page’s HTML editor and paste in the code. Voila.

To make the form more compact and save space, I deleted the “Delivered by FeedBurner” text and link by removing this code from the text widget box:

<p>Delivered by <a href="http://feedburner.google.com" target="_blank">FeedBurner</a></p>

 

Wrapping it up

Now readers can get your blog posts by email, but this might not satisfy all of your readers. A little farther down the road we’ll offer a newsletter email option using MailChimp.

Having an email list of subscribers can be very powerful asset for your blog. It provides you a captive audience to whom you can offer products (e.g. ebooks) that you might develop in the future.

What about you? Do you have an email list? How do you manage it?

Related Posts

How to Setup an RSS Feed Using Feedburner and the Genesis Framework
How to Own Your RSS Feed