I am a huge fan of Michael Hyatt, his GetNoticed! theme, and Platform University.  I really like how he is using the Smart Podcast Player, but I couldn’t figure out how to make it work when using RSS with MailChimp.

I really enjoy watching how Michael and his team accomplish what seems to be the impossible each week.

Recently I have considered reviving my podcast, so I turned my attention to how Michael does it.

The User Experience I Want to Emulate

In particular I want to be able to use RSS to feed my blog posts and my podcasts to my reading list.

I really like the look of the audio player that Michael uses.  I don’t get around much so I had never seen this player before, and I just assumed that this was one of the custom coded things that Michael does for his site.

Not so.

Turns out the player is the Smart Podcast Player available (for a small fee) by Pat Flynn.

I subscribed to this WordPress plugin to test out the player on my site.  I was very surprised to learn that the player does NOT survive the transition through RSS to my MailChimp emails!

Trouble in River City

After installing the plugin and putting the player in a test post on my bl0g, I sent the post to MailChimp.

No Smart Podcast Player appeared in the ensuing email.

At all.

Not even a hint that a player ever existed in the original post.

At first I found this really hard to believe.  I thought for certain that the plugin was some HTML5 player that does well in email.

I had tested HTML5 players before, and I did not experience this problem. They survived the same RSS-to-MailChimp test with ease as evidenced in the following screen capture.

What to Do?

I took a second look at Michael’s email that I was using as a baseline.  Turns out the “player” that shows in this email is not a player at all.

It is just an image with a built-in link.

This was confirmed after hearing back from the tech support person (Ray) at the Smart Podcast Player Support Team.

So now I have a dilemma.

Why do emails sent through MailChimp via RSS from the website show an image that does not exist in the blog post?

I can’t tell you exactly how long I beat my brains out over this.

I’m not a coder, but I eventually figured out how to do it.  At least this method works for me.

Here’s the Answer

There are two parts – 1) the code that you’ll need, and 2) a clickable image that looks like the player

It turns out that you need to use something called a “fallback” image.  Again, I’m not a coder, so I had never heard of this.

A fallback is your plan B in the event that something doesn’t load properly.  In this case, if the player doesn’t load properly, then resort to plan B — our image that looks like the player.

The Code

I had to comb through the plugin code to learn how to call the plugin without using the shortcode.  This is important because I could not figure out how to make the fallback image work while using the shortcode.

In the code snippet below you will notice that I do, however, start with the shortcode.  Notice how the url field is empty and no other parameters are listed.

I had to do this to “wake up” the player to let it know I would be passing it some parameters.  There must be some javascript here that calls the player to attention.

This is a critical step, so do not leave out this initial shortcode.  I could not get the rest of this to work otherwise.

[smart_track_player url=" "]

<object class="smart-track-player" width="300" height="150" data-url="http://traffic.libsyn.com/Your_Podcast_Name/Your_Podcast_Episode.mp3" data-download="true" 
data-speedcontrol="true" data-title="Your show title here" data-paid="true" data-social="true" data-social_twitter="true" data-social_facebook="true" data-social_gplus="true">
<a href="http://traffic.libsyn.com/Your_Podcast_Name/Your_Podcast_Episode.mp3"><img src="https://yourdomain.com/wp-content/uploads/20xx/yy/Your_Fallback_Image.png" alt="Click to hear Jason's Podcast" border="0" /></a>
<a href="https://itunes.apple.com/us/podcast/itunes_podcast_name/idXXXXXXXXX">Subscribe in iTunes</a></object>

In the event that you want to look for more parameters to pass in this html, try this:

1. Go to WordPress -> Plugins -> Editor
2. Select Smart Podcast Player from the dropdown
3. Find and double-click on smart-podcast-player/classes/core.php in the right-hand menu

I found all of the parameters I needed by going through this core.php file.  Do a search on “<div” (yes, leave out the last “>”) and this should take you to about the middle of the file where the parameters live.

The Image

I created the image by creating an instance of the player and then simply taking a screen capture (on Macs, use command+shift+4).

You might be wondering how to get the player to look like the one that Michael uses.  Notice how his player has only the arrow and the circle.  The download icon, the speed icon, and the share icon are all missing.

If you want to create a version of this all you need to do is use the code above but strip out the parameters defining social and downloads, etc. Try pasting this code to your site.

<object class="smart-track-player" width="300" height="150" data-url="http://traffic.libsyn.com/YourPodcastShow/Your_Podcast_Episode.mp3" data-paid="true">

Just preview the post and then take a screen capture of the image.

Trim out the left half of the bar with a photo/image editor.  Otherwise, you will get a long thin bar (above) instead of a shorter one (below) which looks better on mobile.

Upload this to your WordPress media library and then put the image url in the first code snippet I provided.

The Results

Now I have a podcast post that functions much the way Michael’s does in that I can pass the “player” in an email that is generated through RSS!

[reminder]If I can answer any questions for you, just drop them into the Disqus box below.[/reminder]