Fix For “Loading…” Keeps Spinning In MailPress

One of the most annoying problems I encounter regularly with MailPress is the “Loading…” icon keeps spinning in the subscription form. Sometimes it spins before you’ve even done anything; other times it spins after form submission and never stops.

It’s always some form of problem with the MailPress Javascript or CSS used to power the form. I recommend you apply the following changes to any new MailPress installation, so that you can save yourself the grief of having to deal with this annoying problem.

If you’re applying my MailPress hacks, it’ll be called “Processing…” instead of “Loading…”. Either way, the solution is the same.

Here are my solutions:

Enable MP_wp_enqueue_script

There is an option in MailPress that enqueues the problematic Javascript for generation at the bottom of the page. With recent versions of WordPress, this is pretty much always a good thing; but this option isn’t the default yet as it requires your theme to call wp_footer in footer.php. Any decent theme should be doing this anyway, but it’s worth checking first.

To enable this option, copy or rename mailpress-config-sample.php in the mailpress top directory to mailpress-config.php

Edit the file and remove the // comment at the start of the line:

define ('MP_wp_enqueue_script', true);

Add The MailPress Widget CSS Rules To Your Themes style.css

By default, MailPress inserts style information for it’s signup form inline. You could argue that it shouldn’t be doing this, and you’d probably be right because it breaks in certain situations.

For example, if you use SEO Smart Links Pro and create a custom tag for “MailPress” (which you probably don’t; but I do, because I write about it on this blog), the style information gets damaged because SEO Smart Links Pro isn’t expecting it to appear in the middle of a post.

The fix is to move the MailPress form style information to your WordPress theme’s style.css. Add these lines there:

div.MailPress div.mp-container, div.MailPress div.mp-formdiv {
 position:relative;
}

div.MailPress div.mp-loading, div.MailPress div.mp-message {
 position:absolute;
 filter:alpha(opacity=0); // IE
-moz-opacity:0;
-khtml-opacity: 0;
 opacity:0;
}

Then, in the MailPress widget (under Appearance → Widgets → MailPress), tick the box next to “Preloaded: CSS”

Conflict With Simple Facebook Connect Plugin

If you use the Simple Facebook Connect plugin to update your Facebook wall or fan page automatically when you post, you may notice the MailPress “Loading…” icon spinning when you use the mailpress shortcode on a page along side the MailPress widget. This happens because the Simple Facebook Connect plugin uses an evil hack to generate OpenGraph tags based on a WordPress page contents, which causes the WordPress page to be generated twice internally. Second time around, the MailPress widget CSS rules mentioned above get omitted.

This problem is also fixed by putting the MailPress widget CSS rules into your WordPress theme’s style.css, as described above and specifying “Preloaded: CSS” in the MailPress widget.

If that’s too hard or doesn’t work for you, you can [intlink id=”978″ type=”post”]disable OpenGraph tag generation in Simple Facebook Connect[/intlink]. Then enable OpenGraph tag generation in one of the other plugins capable of doing it, like WordPress SEO by Yoast.

Alternatively, use the Facebook plugin instead of Simple Facebook Connect, which has the potential added bonus that it was written by Facebook engineers, so it may be better insulated from future Facebook API changes. Unfortunately it’s not as easy to configure as Simple Facebook Connect and has way less features.

If you can’t get the Facebook plugin to work, you can always fall back to Network Publisher, which does all the hard work for you; for instance, you don’t need to create your own Facebook app for it to work. The downside is that the “via” link it generates in your postings links to their app instead of yours.