How to fix the WPAudio plugin if it’s not working

January 23, 2012 By Leave a Comment

I’ve recommended the WPAudio plugin for placing easily playable and downloadable audio files on your WordPress site. But with the release of WordPress 3.2 in 2011, the plugin stopped working on many sites (including mine).

In this post, I’ll show you how to get this plugin working again.

Fair warning: This fix involves directly editing the plugin’s source code. I’ve provided all the necessary code so you can just copy and paste. This has worked on all the sites I’ve tried it on, but it’s possible that it won’t work for you — you might have a different hosting setup or a plugin conflict that I haven’t run across.

But even if this fix doesn’t take, really, the worst that can happen is that your copy of the WPAudio plugin still won’t work. What I mean is, a copy-paste mistake isn’t going to break your entire site or erase your database or anything disastrous like that.

Why you might not want to fix this plugin at all

I chose to research the fix because I like to know how things work, I’ve got a hardcore DIY streak, and I’m stubborn — I like the way WPAudio looks and works and I just don’t want to switch, doggone it.

However, I fully realize that I might be in a tiny minority here and that you might decide that it’s just easier and simpler to switch to a different audio player on your WordPress site. And that is totally OK (I’m actually researching some WPAudio alternatives and will post about those later this week).

One big reason to switch to a different plugin is that WPAudio’s author is no longer supporting it or releasing new versions. WordPress will continue to change and improve, and it’s very possible that future versions of WordPress will break this plugin again. So this code fix is a bit like wrapping a frayed wire with electrical tape — a temporary measure that’s fine for now but not built to last.

Still here? On with the tinkering!

Step 1: Download these two text files. You’ll need to copy and paste their contents later in these instructions. Right-click (on a PC) or CTRL-click (on a Mac) the filename, and choose “Save Link As” or the closest equivalent.

  1. wpaudio.js.txt
  2. wpaudio.min_.js.txt

Step 2. Open the files in a text editor (Notepad, TextEdit, or the like). Because they have the .txt suffix, they may automatically open with the right application if you simply double-click them.

Step 3. In your WordPress dashboard, go to Plugins –> Editor. 

Step 4. Choose “WPaudio” in the drop-down list at the top right corner of your Plugin Editor screen. When you first arrive at this screen, it will show the first plugin in alphabetical order (often Akismet). After you select WPaudio, click the “Select” button next to the drop-down menu and you will then see a list of that plugin’s source files.

Step 5. In this list, click the link labeled “wpaudio-mp3-player/wpaudio.js” to display the contents of that file in the editing pane. It should begin with these lines:

/*
 * WPaudio v3.1 (http://wpaudio.com)
 * by Todd Iceton (todd@wpaudio.com)
 *
 * Converts an mp3 link to a simple player styled by HTML & CSS, powered by
HTML5 with SoundManager2 Flash fallback

Step 6. Copy the entire contents of the first text file you downloaded — the one called wpaudio.js.txt — and replace the entire contents of the wpaudio.js file onscreen with your copied text. You want to completely overwrite the file contents, so in the WordPress Editor screen you can either Select All and Paste, or Select All and Delete before Pasting.

Step 7. Click the blue “Update File” button at the bottom of your screen. You should see a success message appear at the top of your screen that reads “File updated successfully.”

Step 8. Repeat steps 5, 6, and 7 with the file named wpaudio.min.js. You’ve just replaced the entire contents of two of the plugin’s source files, and saved your changes. Your site is still there, right? No smoke coming out of your hard drive? Good! On to the final step:

Step 9. Go to Settings –> WPaudio, and click the blue “Save Changes” button at the bottom of the screen. It’s a good idea to check the settings to make sure they’re correct, but go ahead and click the blue button even if you don’t make any changes. This is similar to refreshing a web page to get the latest version — you want your copy of the plugin to read the new code you added.

Now go test one of your audio files on your site. Fingers crossed that it plays the way it is supposed to! And if not, stay tuned for my upcoming post on audio player alternatives (you can subscribe to get updates in your inbox or grab the RSS feed to get it in your reader). And feel free to leave a comment if you have a favorite WordPress audio plugin, too!

It’s important to note that I didn’t do this coding work on my own. All the code fixes came from helpful users on the WordPress.org support forum; I’m merely trying to let more people know about these fixes, and maybe make them a bit less scary to implement. Here are the original posts describing the code changes:

Frayed cord image by blmurch on Flickr, used under a Creative Commons ShareAlike License

Filed Under: WordPress How-To's Tagged With: , ,

AWeber introduces Subscribe by Commenting to the Web Form plugin

November 9, 2011 By 1 Comment

I’ve previously written a guide to using the AWeber WordPress plugin. Last week, AWeber announced a new feature in the plugin that lets your blog commenters subscribe to one of your lists without filling out a separate form.

Specifically, this feature adds a simple checkbox to your blog comment form. If a commenter checks the box, the commenter is treated the same as someone who fills out your AWeber subscription form: They will receive a confirmation email message asking them to click a link to complete their subscription.

Want to see it in action? It’s on this very post! If you’re reading this in a feed reader or in your email, swing by the original blog post to see my shiny new checkbox.

It’s super-simple to activate on your own blog, and I’ll show you how in a minute.

First, let me be perfectly clear that the AWeber WordPress plugin does not automatically subscribe commenters to anything; they have to check the checkbox and complete AWeber’s double-opt-in confirmation process. You cannot set the checkbox to be checked by default (that would be a pretty clear violation of AWeber’s stated privacy policy, after all).

Commenters can subscribe with one click

I activated the new feature as soon as I heard about it, because I figure if someone is interested enough in my blog to leave a comment, and they’re not already subscribed to my Weekly Web Tips, I might as well give them a really easy way to subscribe without filling out another form or clicking through to another page.

Here’s how to activate this feature on your blog:

First, navigate to Settings –> AWeber Web Form in your WordPress dashboard. Assuming you’ve been able to connect your AWeber account to your installed plugin as described in my instructions for configuring the AWeber WordPress plugin, here’s what your plugin settings now look like:

You just need to do three quick things here:

  1. Select a list from the dropdown (if you only have one list in AWeber, that will be pretty easy).
  2. Edit the “Promotion text” to accurately reflect the list you’re asking your commenters to sign up to.
  3. Don’t forget to click the blue “Save” button!

The two checkboxes here are checked by default. The “Allow subscriptions when visitors comment” is the important one here. Leave it checked to give commenters the option to subscribe.

A note about blog registrations

The second checkbox, “Allow subscriptions when visitors register to your blog,” is irrelevant for most of us, because you shouldn’t even be allowing registrations to your blog unless you have a good reason, such as a membership site. To check this setting on your site, visit Settings –> General in your WordPress dashboard, and verify that there is no check in the box labeled “Anyone can register.”

On the other hand, if you do have a membership site and you want to add your members to an email list at the same time they sign up, this is a super-simple way to do it. In this case, you’d want to UNcheck the first box, so that only new registrations to your blog, and not blog commenters, are added to the membership email list.

Remember that you can’t autosubscribe people, though, so you will almost certainly have members who register but don’t bother to check the box and thus don’t receive your emails. So you’ll want to have a backup method to ask those members to subscribe.

Anyway, here’s a shot of my saved settings for the AWeber WordPress plugin after I chose my list and edited my promotion text (the very same text you’ll see next to the checkbos on the comment form of this post…infinite meta loop alert!):

As you can see, it’s quick and easy to add a subscription checkbox to your comment form with the addition of this new feature to the AWeber WordPress plugin.

Limitations of the AWeber WordPress plugin “Subscribe by Commenting” feature

The plugin only allows you to connect one AWeber list with your comment form, so if you have more than one list, make sure you choose the one most relevant to your blog commenters sitewide to add to your comment form. You can switch lists and re-save after you’ve selected one in the drop-down menu, but remember that the new list will now apply to all your comment forms. There’s no way to let commenters on different posts subscribe to different lists.

There’s also no way to let commenters subscribe to one list and blog registrations to another — both checkboxes are connected to the same list. So if you are contemplating the membership-site option, you won’t be able to also use this plugin to add newsletter subscribers from your comment form.

Even with these small limitations, the new “Subscribe by Commenting” feature is a welcome addition to the AWeber WordPress plugin.

Comment card image adapted from Boonerator on Flickr, used under a Creative Commons ShareAlike License

Filed Under: AWeber Tagged With: , , , ,

How to use the WPAudio plugin to embed an audio clip in WordPress

March 16, 2011 By

Image credit: joanna8555; song credit: They Might Be Giants

Want to know how I got this humble audio link to be playable right within this post? C’mon, click it — it’s only 19 seconds long.

What’s that blue thing doing here?

With a plugin, of course!

There is a nifty plugin you can install that makes your audio files into one-click mini-players. There are lots of audio plugins, of course — but I’ll tell you about my favorite one: WPAudio.

Step 1: Install the WPAudio Plugin

In Plugins –> Add New, search for WPAudio (no spaces, no quotes). If the first line of the description is “All the other WordPress audio players were crappy or ugly so I made a better one,” that’s the one you want. Install and activate the plugin in the usual manner.

Step 2: Upload an audio clip to your WordPress Media Library

This process is illustrated in my post How to add an audio clip to your WordPress site, but here’s a quickie refresher:

  1. On the post (or page) editing screen, click the small gray musical note to the right of the words “Upload/Insert”, below the page title.
  2. Choose the From Computer tab in the popup window, and browse to find your audio file.
  3. Once you’ve found the file, click “Upload” and watch the pretty progress bar.
  4. When it is done, click the “show” link.
  5. Edit the “Title” field — this will become the click-to-play title of the audio clip.
  6. Click “Insert into post” at the bottom of the window.

What you have now is a link to your audio file. When people click on it they will get a blank web page with a small play button, and the file will autoplay.

What the WPAudio plugin does is make the link into a mini audio player right on that very page, instead of forcing the opening of a new window. It’s a much less confusing experience for your users.

There are two ways to make the WPAudio plugin do its magic on your .mp3 files.

Step 3(a): Using the plugin on one link at a time

In the post editing screen where you’ve inserted your audio link, click the HTML tab so you see the code-y gobbledygook. Look for the code for your sound file, which will look something like this:

<a href="http://www.yoursite.com/wp-content/uploads/pieceofmusic.mp3" >Piece of Music</a>

You need to insert this snippet:

class="wpaudio"

into that link, so it looks like this:

<a class="wpaudio" href="http://www.yoursite.com/wp-content/uploads/pieceofmusic.mp3" >Piece of Music</a>

Now you can go back to the Visual tab.

The link probably looks just the same, but try Previewing the post. In your Preview, you should see that the link text is bigger, and there’s a little gray triangle to its left. The idea is that if you click the triangle (or anywhere in the link text) the file will begin to play, and a play/pause/progress bar will appear below the link automatically.

Just like that link at the top of this post. Did you click it? Go on, you know you want to!

Step 3(b): Converting all your audio links with no code-wrangling

If you use lots of audio files, or plan on using lots of audio links, or just plain don’t want to deal with the HTML, WPAudio has a one-click solution that detects and converts all .mp3 links to mini-players.

Go to Settings –> WPAudio in your WordPress dashboard, and the first thing you’ll see is a checkbox labeled “Convert all MP3 links.”

WPAudio Options checkbox for converting all .mp3 links to audio players

Check that box, and scroll to the bottom to click the blue “Save Changes” button, and you should be good to go.

I still think it’s handy to know how to convert the links manually, though…

Also included in WPAudio Options is the ability to change the font, color, and size of your audio links. Styling your links is optional — the plugin will work just fine with its default settings. Also, remember that these settings will apply to all the audio links on your site, including links in your sidebar, footer, etc.

WPAudio Options for styling the audio links

WPAudio Options for styling the audio links

OK. You should now have the file uploaded, the proper plugin installed, and a link embedded in the post that will play that link. Time to publish your post and give yourself a round of applause!

This crowd is cheering for you!

Filed Under: WordPress How-To's Tagged With: , , ,

WordPress Plugin: AWeber Web Form

December 22, 2010 By

Last month, AWeber released its official WordPress plugin, so their customers can now install web forms on WordPress websites without copying-and-pasting bits of code. In short, adding a sign-up form to your sidebar just got a lot easier.

As a big fan of both WordPress and AWeber, I’m delighted to see the two working together like this. And AWeber has announced that more applications are being developed — I, for one, would love to see seamless integration with E-Junkie.

But let’s get back to WordPress.

In the illustrated steps below, I’ll show you how easy it is to use this plugin on your own WordPress site — as well as describe a couple of limitations you should be aware of.

Step 1: Install the plugin in the usual way

If you need a refresher, go check out my post on how to install a WordPress plugin, or grab your copy of my free WordPress Essentials Toolkit by subscribing to my Weekly Web Tips (if you’re already subscribed, thank you! Your download link should be over there on the right).

If you’re using the search function inside WordPress, type the phrase “AWeber Web Form” (yes, with the quotes). You’ll find this handy plugin right away. Go ahead and install and activate it.

As soon as you activate the plugin, you’ll see a red-bordered message at the top of your screen (shown in Figure 1), telling you to update your settings to start using the plugin.

Click on the red “settings” link or navigate to Settings –> AWeber Web Form to proceed.

Figure 1: Upon activation, the plugin asks you to update your settings.

Step 2: Connect your AWeber account to your WordPress Dashboard

On the Settings page, as shown in Figure 2, you’ll see the two steps you need to complete to link your AWeber account with your WordPress Dashboard.

Figure 2: Two steps to connect your AWeber account to your WordPress Dashboard

Step 1 is to get an authorization code from AWeber. See where it says “Click here to get your authorization code”? Do exactly that, and you’re shown a mini-login form for AWeber, shown in Figure 3.

Enter your AWeber login name and password (not your WordPress login and password — they should be different for better security!) into the form and click “Allow Access.”

Figure 3: Fill in your AWeber login name and password to begin the connection process.

Once you’ve confirmed that you are the owner of the account in question by entering the correct login name and password, you’ll see a Success! message, followed by a verrrrry long string of random letters, numbers, and characters. This is your activation code.

The screen is shown in Figure 4. Although I grayed out the actual code for security purposes (because that code is unique to my account), I wanted you to see how long the code is so you know that’s normal.

Figure 4: Copy the incredibly long string of gibberish code AWeber gives you.

Now, you’ll need to select this entire piece of code and copy it.

Next, go to the AWeber Web Form settings page (the same page shown in Figure 2). Where it says “Step 2: Paste in your authorization code,” paste that long string of characters. The field where you’re pasting it does not look long enough to hold it, but it will. You won’t be able to see the entire string once you’ve pasted it — just the end.

Now click the blue “Make Connection” button.

Figure 5: Success connecting AWeber to WordPress.

If you copied and pasted the entire code correctly, you’ll get a success message as shown in Figure 5.

That whole make-a-connection step is the hardest part of using this widget, but fortunately it’s a one-time process — and whew, now it’s over!

The plugin helpfully tells you exactly what the next step is, and provides a link straight to your Widgets area so you can install a web form right away.

Step 3: Make sure you have a web form to use

This WordPress plugin doesn’t let you create or edit web forms — it lets you pick, preview, and use web forms you’ve already created inside your AWeber account. So if you don’t have any created, now would be the time to go and do that.

If you need instructions on this process, login to AWeber and follow their prompts, or check out the section on web forms in my Love Your List AWeber guidebook (until Friday, you can get a Personal Office Hour as an add-on to your Love Your List purchase — you can use your hour anytime before the end of February 2011).

Step 4: Set up your form widget

Inside your WordPress Dashboard, navigate to Appearance –> Widgets.

You’ll see a list of available widgets in the large left pane of this screen, and a list of widget areas in a column on the right.

Depending on your theme, you might see only one widget area, probably labeled “Sidebar,” or there might be many (the Atahualpa theme that I recommend comes with four different default sidebars, and you can add new widget areas, so make sure you’re adding your widget to the correct widget area!). In Figure 6, you can see that I created some extra widget areas for my header, and I’m adding this widget to an area called Header Widget 2.

As shown in Figure 6, click on the available widget labeled AWeber Web Form, and drag it over to one of your widget areas. When you see a dotted rectangle appear, you can let go and drop it.

Figure 6: Adding the AWeber Web Form widget inside your Appearance --> Widgets page

You can reorder your widgets (or drag them to different widget areas) by simply clicking and dragging. Once you’re satisfied with the location of the Web Form widget, click on the tiny gray triangle on the right side of the widget title, to open the widget settings.

Figure 7: Widget settings, step 1

Figure 8: Widget settings, step 2

The widget itself helpfully guides you through the process. Clicking the drop-down triangle next to “Step 1: Select A List,” as shown in Figure 7, gives you a list of your lists (if you have only one list, this step is super-easy — but it won’t be auto-selected).

After you select one of your lists, you should see a second drop-down area appear automatically, titled “Step 2: Select a Web Form.” Pick the web form you want to use — again, if you only have one form, there’s only one choice, but you still have to select it. It won’t be selected by default.

If you don’t see Step 2 appear automatically, or you see the wrong forms listed in Step 2 (both of these happened to me when I first set up this widget), you’ll need to clear your browser cache and cookies. Here’s how to clear your cache, and here’s how to clear your cookies.

When I first installed this plugin I found that I had to clear my cookies each time I changed the widget settings, which was annoying and counter-intuitive, but today when I played around with the plugin, I found I could change the settings without having to clear my cookies. So perhaps there was an issue that was fixed, or maybe the Internet was broken when I first installed the plugin.

Once you have both a list and a web form selected, a link labeled “preview form” appears below the dropdowns. This lets you see how the form will appear, so you don’t have to log into your AWeber account just to remind yourself what it looks like.

If you need to make any changes to the form, however, you will have to go to your AWeber account to make those changes. Anytime you change the form inside AWeber, the changes will instantly and automatically be reflected in your widget.

When you’re happy with your form’s appearance and placement, click “Save.”

And that’s it! You might want to go visit your website to make sure it’s showing up correctly (and isn’t too wide for your sidebar, or displaying any other formatting weirdness). Remember, if you need to resize the form, you’ll need to do that from inside your AWeber account.

Limitations of the AWeber Web Form plugin

This plugin is a great step forward for WordPress and AWeber users. I’m happily using it myself, in the header of my site (I edited the form to include a picture of the WordPress Essentials Toolkit cover, a customized Subscribe button, and text inviting people to get my free PDF by subscribing).

There are a couple of important limitations you should be aware of:

  1. You can only use one instance of the widget. Most of us will only need one, but this limitation could get frustrating if you want to place two different forms in two different places in your sidebar, or into two different sidebars.You can still use the old-fashioned way (copying and pasting AWeber’s form code) to add multiple forms to multiple places, but it would be nice if you could use this widget in more than one place.
  2. This plugin only works inside a widget. This means that you can’t use it to put a web form on a page or inside a post. And you can only place a web form into your header or footer if your theme has (or lets you add) widget areas into those sections of your site.
    So, for instance, I used the old-fashioned copy-and-paste method to place my newsletter sign-up form on my Subscribe page, and if I write a blog post inviting readers to sign up for a future teleclass, I won’t be able to use this plugin to insert the sign-up form.

I can still give this plugin a hearty thumbs-up, because what it does, it does well and seamlessly, and I love the way AWeber has built it to guide new users clearly and quickly through the process of installing, connecting, and setting it up. Many thanks to the AWeber team for developing this plugin!

Are you using this plugin on your site? Got a question about it? Leave me a comment!

And remember: You can call me for free during Thursday’s Office Happy Hour, or get your own Personal Office Hour if you need a helping hand with anything web-tech-related. The Personal Office Hour is a one-week experiment — I’m only selling them until December 24, but you have until the end of February 2011 to schedule and use your hour.

Filed Under: WordPress How-To's Tagged With: , ,
« Older Posts