How to Build a Blog Announcement List With Google Feedburner

The most notable difference between a blog and a website is the RSS feed.

A very practical application of the RSS is to feed it to a free feed management service such as Google’s Feedburner.

Whenever you publish a new blog post, the RSS feed also gets updated.

Feedburner constantly polls for new content from your feed. As soon as Feedburner sees new content on your feed, it emails all of your blog subscribers on your behalf letting them know that you’ve got something new on your blog.

Here we’ll step you through the process of how to set up a Feedburner subscription form and email notification.

Step 1: Login to Feedburner

Visit http://www.feedburner.com

You will be prompted to login to your Google Account. If you don’t have one, create one.

Step 2: Set up your feed

Once logged in, you’ll be asked to enter a RSS feed address. If you have a WordPress blog, it should be http://yourdomain.com/feed.

If you are not sure, simply enter your blog address for auto-discovery:

Next, Feedburner will auto-populate your blog title and choose a feed URL for you. You can simply go with what it populates for you:

Now that Feedburner has your feed set up, click on the “Skip directly to feed management” link next to the “Next” button. You can always come back to set up your podcast (if you are podcasting) and traffic analytics:

Next, click on the “Publicize” tab to get to the email subscription service:

Click on “Email Subscriptions” service, and activate this service by clicking on the “Activate” button:

You will be given a subscription form HTML code to publish on your blog. Copy and paste that code:

Step 3: Publish your subscription form on your blog

Usually you’ll find the blog subscription form on most other blogs located “above the fold” in the sidebar. Somewhere obvious and not hidden.

To put this subscription form on the top of the sidebar, you’ll have to either use a Text widget (from your dashboard, Appearance -> Widgets) or modify your sidebar.php theme file (Appearance -> Editor).

Alternatively, here are a few plugin to help you with putting a Feedburner subscription form.

The standard text that goes on the subscription form is “Enter your email address:” so be sure to change it to something more compelling such as “Please enter your email address below to be notified whenever I post something new on this blog:”

Here is a sample HTML code where the text is highlighted:

<form style=”border:1px solid #ccc;padding:3px;text-align:center;” action=”http://feedburner.google.com/fb/a/mailverify” method=”post” target=”popupwindow” onsubmit=”window.open(‘http://feedburner.google.com/fb/a/mailverify?uri=howtostartablogforfunnprofit’, ‘popupwindow’, ‘scrollbars=yes,width=550,height=520′);return true”><p>Enter your email address:</p><p><input type=”text” style=”width:140px” name=”email”/></p><input type=”hidden” value=”howtostartablogforfunnprofit” name=”uri”/><input type=”hidden” name=”loc” value=”en_US”/><input type=”submit” value=”Subscribe” /><p>Delivered by <a href=”http://feedburner.google.com” target=”_blank”>FeedBurner</a></p></form>

Here is an example subscription form and what it will look like:

Show off your blog!

Got Feedburner subscription box on your blog? Make a comment below with a brief description of what your blog is all about, and your blog URL to show it off! Hope to see you in the 100K subscriber Hall of Fame

Blog in Multiple Languages? How to Use Multilingual Text WordPress Plugin and Google Translator

Helen from veldiglondon.com asks, “My blog is aimed at Norwegian anglophiles wanting to know where it’s happening in London away from the usual tourist traps. However, many of my english speaking friends wants to read it too so I wondered if you know of a way to give a choice of language norwegian/english? I am using the Twenty Eleven 1.2 WordPress theme.”

Thanks for this great question, because even if you only speak one language, you can still offer other languages to your international readers.

Using Google Translate

Google Translate is a free service that allows you to translate words, phrases, or even web pages from one language to another.

The translation technology is, in my opinion, still infant at best (especially translating to Chinese). I find that the translation is dead on when translating just words, but still very weak when it tries to translate phrases. Just have a look at what this blog reads like in Chinese (link to actual translated page):

Click to enlarge

I happen to be Chinese and I can read the translation. It quite frankly sucked, but at least it provides me a translated copy that I can improve on.

To make Google Translate available to your readers, either:

Follow Google’s guidance on how to add Google Translate to your blog.
Install Google Translator plugin.

Write your own translation

If you can write in another language, then do so! Human translation is way more readable, understandable, and flexible than computer translation.

A handy plugin that allows you to designate your text in multiple languages is the Multilingual Text Wrodpress plugin. This plugin also displays clickable flag images for the translated content (click image to enlarge):

Click to enlarge

After you’ve installed and activated the plugin, it’s quite simple to use. Let’s say you want to provide your blog post in English and Norwegian, all you have to do is “tag” a country short code to the beginning of the language text in your editor.

For example:

[:en]This is in English

[:no]dette er på engelsk

Here is screenshot to help you understand better how to “tag” the country code to the text (Click image to enlarge):

Click to enlarge

The [:en] tag is optional if you’ve set the default language to English (go under Settings->General in the WordPress dashboard).

The plugin author did not provide a list of flag images along with their country short code, so I had to do some digging around.

Here is a page that provide a list of country short codes.

The plugin uses the short code for the flag image filename, so be sure to keep your short codes in lower case (because the image file names are in lower case).

Here is a list of flag image files that came with the plugin. It may be of help to you to verify that the short code does indeed pull the right flag image you want displayed.

Multilingual Blog Showcase

If you have a multilingual blog, then leave a comment below to show it off, and for some link love. Happy blogging!

How to add a contact form page on your blog

My last post on ”How to add an icon (favicon) next to your browser tab“ I talked about having a favicon helps with your blog’s branding and page completeness. Today, I’m going to show you how to add a “Contact Me” page on your blog.

Unarguably, having a “Contact Me” page is a trust factor and gives you a huge credibility boost, it also allows potential advertisers and joint venture partners to contact you for business deals.

Most amateur bloggers publish an email address right on their blogs, or use the mailto:email@address.com anchor link as a quick and dirty way of allowing their readers to contact them - BIG mistake!

By leaving your email address out in the open,you are also inviting email spammers to send you unsolicited emails. And once your email is on the spammer’s list, there is really nothing you can do other than to use a spam filter to reduce the amount of time in sifting through legitimate emails from spamvertisements, or to simply trash that email address and move on to a new email address (nothing but a headache).

So, using a contact form plugin for your blog allows visitors to email you without disclosing your email address.

I have tried a few plugins, and found “Fast Secure Contact Form” a fast and easy to use contact form plugin. It is what I use for my blogs.

The setup page for the plugin can be daunting at first, but you can use all the default settings they have for you out-of-box.

Here is how.

Step 1: Install Fast Secure Contact Form plugin

You can do this right from your WordPress Dashboard. Go to Plugins -> Add New menu, and type in “fast secure contact form” and the first search result should be it:

Click on “Install Now” link below the plugin name.

Alternatively, you can broaden your search by using just “contact” as the search keyword, and it should return many more contact form plugin options that you can try.

Step 2: Activate and setup your contact form

Once the plugin is installed, click on “Activate Plugin”

Once you’ve activated the plugin, you will see a new menu item “FS Contact Form Options” under the Plugins menu box:

In the options page, copy the shortcode for the contact form in the Usage heading. Specifically,

[si-contact-form form='1']

You will need to paste this shortcode to the contact page you’ll be setting up next.

Step 3: Create a “Contact Me” page on your blog

Now, let’s create the “Contact Me” page by adding a new page:

1. Give your new page a title. This title will be the visible menu link on your blog’s navigation bar.

2. Paste the shortcode from previous step into the editor box.

3. Set the order of the page to a high number, like 99, if you want your “Contact Me” menu link to be the last link of the navigation bar. If not, WordPress by default will order all of your menu links alphabetically.

You can preview this page before publishing, or simply publish it and see how it looks like on your live blog.

Step 4: Test it!

Let’s make sure people can actually contact you. Go ahead and test the form out by filling out a test message. Then check your email to see that you actually got it.

That’s all there is to it!

How to add an icon (favicon) next to your browser tab

Favicons are these little 16 by 16 pixel icons that appear next to your browser tab. Here is a comparison between a site that has a favicon, and one that doesn’t:

Of course, after publishing this blog post, my blog now does have a favicon.

If your blog has it defined, and someone bookmarks your blog, your favicon will also appear next to your site, instead of a default icon:

In this blog post, I’m going to give you my take on why you should have a favicon, and hold your hands through the steps of creating a simple favicon, and placing it in your header code to make it appear.

Why Favicon?

The reasons are quite simple – branding & page completness.

Logo is a part of branding, and so should your favicon, and any part of your website as a matter of fact.

Remember, it’s the little things that make you stand out from millions of other bloggers. One extra screenshot, one extra paragraph of explanation, putting alt tags to your images, having meta keyword and description tags, and having a favicon for your blog.

I’m suggesting this, and it is quite possible that taking care of all these little things make you stand out not just in human eyes, but also in the eyes of major search engines, which helps you rank higher in search results. Higher ranking in the search results bring you more visitors to your blog, and more visitors to your blog motivates you to make a better blog, and so on.

So, perhaps the the real question is why NOT?

Now, on to creating a favicon!

Step 1: Create your icon graphic

I’m no graphic artist, so I simply used Microsoft Powerpoint (you can do this in Word also) to create a simple text-based graphic. In this case, I used the WordArt, a red outline for the text, and a rectangle filled with black color for background:

You don’t have to worry about making it super tiny, or to 16×16 pixels, because Dynamic Drive has an online favicon generator tool that will take your picture and size it down to the right size for you as I will demonstrate for you.

Step 2: Save the icon image

If you have Windows 7, then you may use the SnippingTool to do this. I have XP, so to capture what I created in Powerpoint, I used my all-time favorite screen capture softare called PrintKey – you may download it here.

Use PrintKey’s rectangle tool to capture a portion of the screen. In this case, I drew the rectangle as close to the HTSAB letter as possible, and also making sure the dimensions are close to a square. If it’s not a square image, the favicon generator will crop it to a square and you may lose part of the icon image you intended.

Step 3: Generate the Favicon

Now, go visit Dynamic Drive’s favicon generator tool:

1. Browse to the icon image you saved in previous step.

2. Click on “Create Icon”

3. Look at the preview, and if you are satisfied, down it to your computer.

Step 4: Update your header code to activate your favicon

Go to your WordPress Dashboard (or via cPanel File Manager), under Media -> Add New menu. We want to first upload the favicon file, so you can link it from your header file.

Once you uploaded it, you will be given the URL to your favicon. Copy it somewhere, like notepad.

Now, go to Appearance -> Editor menu. Click on Header (header.php) file, and somewhere among all the other <link rel=”…” > codes we want to insert our favicon code:

<link rel=”shortcut icon” href=”this is the URL to your favicon” type=”image/x-icon”/>

Note that you will substitute the URL to your favicon with the one you just uploaded:

If you do not find any <link rel=”…”> codes in your header file, a safe place to put it is right before the </head> tag.

Step 5: Refresh your page!

If you did everything correctly, your new favicon should show up on your next page refresh. This works for me in Firefox browser. If not, clear your cache by going to Tools -> Clear Recent History menu.

It may take up to 24 hours for it to show in Internet Explorer, as some people have reported. But, if you see it working in one browser, it should work in all browsers.

Show off your Favicon!

Leave a comment below with a link to your blog if you want to show off your favicon!

How to put ads in between my posts?

A blogger asks,

Hello, I recently started to put up ads on my blog but I would like to know how to put ads in between my posts? also a banner at the very top. Thank you.

Answer:

There isn’t a pretty way to do this, other than to modify your WordPress template file(s).

From your question, I’m assuming you want to be able to insert ads (such as Google Adsense) in between each posts on your homepage. Similar changes can be made to archive, category pages to have ads shown in between posts, but for this tutorial I’m going to demonstrate how to change your homepage (index.php) template file.

For this particular tutorial, I’m going to use your current blog theme, Blue Taste v1.3. For other templates, you may spot similarity in coding placements, and make changes there.

Let’s get started!

From your WordPress Dashboard, go to “Appearance -> Editor” menu, and edit your Main Index Template (index.php) file.
Add this line of code:

<? $counter = 1; ?>

Right above this line:

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

Add this code block:
```
<?
switch($counter){
	case 1:
?>
ad code #1
<?
	break;
	case 2:
?>
ad code #2
<?
	break;
	case 3:
?>
ad code #3
<?
	break;
	case 4:
?>
ad code #4
<?
	break;
}
$counter++;
?>
```
Right above this line of code:
```
<?php endwhile; ?>
```
Where it says “ad code #x” is where you would put the HTML advertisement code snippet.

The above code allows you to insert 4 different (or the same) ad codes in between the posts. This will be useful for Google Adsense because Google Adsense only allows you to have up to 3 ad blocks on the page.

Just copy the case/break structure to add more ads:
```
	case 5:
?>
ad code #5
<?
	break;
```

Your modified index.php template file should look like this (note line #10, 45-69):

<?php
/*
* Blue Taste Wordpress Theme By Jabox (http://www.jabox.com.ar)
*/  
?>
<?php get_header(); ?>
 
<div id="content">
	<?php wp_nav_menu(array('theme_location' => 'custom_nav_menu','menu' => 'custom_nav_menu','container_class' => 'cutom-nav-menu','fallback_cb'=>false)); ?>
<? $counter = 1; ?>
 	<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
 
    <div class="post-container">
    <div id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
		<div class="post-title">
      	  	<?php if (!is_page()) {  ?><div class="post-date"><span class="post-month"><?php the_time('M') ?></span> <span class="post-day"><?php the_time('d') ?></span></div> <?php } ?>
        	<h2><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2>
         	<?php if (!is_page()) {  ?><span class="post-auth">By <?php the_author(); ?></span><span class="post-comments"><?php comments_popup_link('No Comments', '1 Comment', '% Comments'); ?></span><?php } ?>
      	</div>
		<div class="entry">
		<?php  if ((!is_single()) && (!is_page()) ) the_post_thumbnail(array(100,100)); ?>
    		<?php the_content('Continue reading this entry &raquo;'); ?>
    		<?php wp_link_pages(); ?> 
      	</div>
 
  <?php if (is_page()) {
  	  global $id;
  $children = wp_list_pages("title_li=&child_of=$id&show_date=modified&echo=0");
  if ($children) {
  	?> 
  <h3>More under this page: </h3>
  <ul>
  <?php   wp_list_pages("title_li=&child_of=$id&show_date=modified");?>
  </ul>
  <?php }} ?>
      <?php if (!is_page()) {  ?><div class="post-cat"><?php the_category(', ') ?></div><?php } ?>
      <?php if (!is_page()) {  ?><div class="post-tag"><?php the_tags('') ?></div><?php } ?>
      <div style="clear: both"></div>
	</div> 
	</div>
 
<?php comments_template(); ?>
	 <div class="separator"></div>
 
<?
switch($counter){
	case 1:
?>
ad code #1
<?
	break;
	case 2:
?>
ad code #2
<?
	break;
	case 3:
?>
ad code #3
<?
	break;
	case 4:
?>
ad code #4
<?
	break;
}
$counter++;
?>
 
<?php endwhile; ?>
 
    <div class="navigation-down"><span class="previous-entries"><?php next_posts_link('&lt; Older') ?></span><span
	class="next-entries"><?php previous_posts_link('Newer &gt;') ?></span>
</div>
 
	<?php else : ?>
 
		<h2>Not Found</h2>
<p>Sorry, we couldn't find what you were looking for.</p>
 
	<?php endif; ?>
 
 </div>
 
<?php get_sidebar(); ?>
<?php get_footer(); ?>

How do I edit how much of my posts appear on the home page?

A blogger asks,

How do I edit how much of my posts appear on the home page? Also the posts seem to have lost their punctuation and spacing when they appear on the home page but are fine when you click on them individually. How would I go about changing that?

Answer:
You are seeing this because in your Main Index Template (index.php) file the_excerpt() function is used to display the post content. By default, the_excerpt() function displays the first 55 words of each post, and unfortunately it does not preserve the spacing and paragraph formatting.

Solution 1:
To get around this, you may simply enter a manual excerpt in your post edit page, in the Excerpt box. Yes, this is a bit of a manual work, but it does seem to preserve the line spacing.

Solution 2:
The other alternative, which I recommend, is to use a teaser text. You do this by inserting the <!–more–> quicktag (in the post editor, it is this icon ) in your post content where you want WordPress to cut off in the display.

This works great in getting people to read your entire blog post, because it gives you precise control as to how much of the entire blog content you want to show. You can use this to your advantage.

As humans, we have a natural tendency to want to complete the sentence. We are also curious creatures. You can see great usage of the <!–more–> quicktag in my passive income blog, where I cut off the post content display in the middle of a sentence, and it just drives people nuts to want to read more.

Now, for this to work, you will need to replace the_excerpt function in your template file.

tip: If you are new to PHP (or don’t know what it is), make sure you make a copy of your theme file before making any changes to it. That way if you screw up, you can revert back to your back-up copy.

Go to Appearance -> Editor menu link in your WordPress dashboard. On the right hand side, find index.php file – this is the file you want to modify.

Then do a search for “the_excerpt” and replace that entire function with

<?php the_content(“Continue reading ” . the_title(”, ”, false)); ?>

What this does is it tells WordPress to display your post content until the <!–more–> tag that you place in your post content, and then show a “Continue reading [your post title]” link.

Now that you have modified your index.php template file, you will need to go back to your blog posts and insert the <!–more–> tag where you want it.

Last resort:
Until WordPress makes a modification to the_excerpt() core function in their future upgrades, you will have to rely on manual excerpt, or use the <!–more–> tag to show excerpt text with formatting preserved.

If you are absolutely disgusted with the above 2 alternatives, try the Advanced Excerpt plugin which claims to preserves formatting.

References:
http://codex.wordpress.org/Template_Tags/the_content – talks about the_content() function and teaser text.

http://codex.wordpress.org/Customizing_the_Read_More – more programming reference for customizing the “Read More” link when using teaser text.