Sending Out Content Digests with Rank It WP and Mailchimp

One of the great parts of Product Hunt – and there are many – is the regular email they send out with the top products for the day. Right at the top of the site, there is a subscription box that’s tied into a daily digest of the latest and greatest.

Screenshot 2015-04-05 09.53.57

This would be a nice feature to have on your Rank It WP site, no? With version 1.2 combined with Mailchimp, it’s quite straightforward.

Step 1: Sign up for Mailchimp

First, you’ll need a Mailchimp account. For the lowest tier of their service – 12,000 emails or less per month, 2,000 subscribers (as of this writing) – it’s completely free so this won’t cost you anything extra. If you’re sending a daily email, you have up to 400 subscribers to play with until you need to start paying.

Sign up for your account here and verify your email once it shows up in your inbox. If you use your personal email address, you’ll be given the option to change the address that you’re sending from later.

You’ll be asked a number of verification questions, including your mailing address. This is to make sure that you’re not a spammer trying to use Mailchimp’s good name to send bad emails. All standard procedure.

Step 2: Set up a list

In order to send out emails, you need a list of people to send to. So we’re going to create a list that will store all of the folks who want to receive our content.

After completing the verification, you should be seeing the Mailchimp dashboard. Click the Create a list button on the right, then Create list at the top.

  • The “List Name” tells people what’s being sent out
  • The “Default ‘from’ email” is the email that is used to send out the campaign; you can change this in each campaign and if it’s different from the one you signed up with, you’ll be asked to verify it.
  • The “Default ‘from’ name” is the name that appears associated to the email address you used. Keep it short and sweet as this is shortened in most email clients

Click Save and you’ll be sent to the list management screen.

Since you’ll probably want to make sure the emails are going out and look the way you expect, it’s a good idea to add yourself to this list. Click Add Subscribers > Add Subscriber and enter your information into the form. Check the permission box and click Add and you should see a success message.

Step 3: Create an RSS campaign

Here is where the magic happens! Mailchimp allows you to connect a recurring email campaign to an RSS feed that sends at specific intervals and times. For this example, we’re going to create a daily email that sends all the latest submissions from the site.

Look for the Create Campaign button on the top right of the dashboard, then click the down arrow to the right and select RSS-Driven Campaign:

Screenshot 2015-04-05 10.18.40

The first field you’ll see is the “RSS Feed URL.” This comes straight from your site and should look like:

http://demo.rankitwp.com/feed/?post_type=wpri_submit

Just replace “demo.rankitwp.com” with your domain and load that in a browser. You should see an ugly mash of XML code that tells you you’re in the right place. Paste this URL into the “RSS Feed URL” field in Mailchimp.

Now, select when the campaign should be sent out and how often. When you’ve got everything dialled in, click the Next button on the bottom right of the screen.

Keep the default list selection as-is and click Next again.

Give your campaign a name that will remind you of what it’s for and change the subject to something catchy. I recommend at least removing the *|RSSFEED:TITLE|* and replacing that with something more descriptive. WordPress create less-than-enticing RSS feed titles, for the most part.

There are many more options to configure here but the defaults should be fine. Read through these various checkboxes and selectors and make sure it’s doing what you would expect. Click Next when you’re ready to move on.

Screenshot 2015-04-05 10.32.08The next step is all about customizing how your email will look. This kind of thing is usually a big nuisance but Mailchimp makes it pretty straight forward. I would recommend the simple single-column template at first since you’re working with a simple feed of content and it should be as easy to peruse as possible.

Click Select next to the template you want to use and you’ll be redirected to the template builder interface. This is where things get fun!

There are many, many different tweaks you can make to the email template but I’m going to concentrate on the ones that we absolutely need, mainly the surrounding content and the RSS items themselves.

Start by replacing all the boilerplate content with what you’d like to surround your daily RSS submissions. You can add a header image, intro text, and anything else to give people context to what you’re sending out.

Once you’ve got the surrounding information in place, it’s time to add the data from your RSS feed. Click, hold, and drag the RSS Items block from the right side of the interface into the email.

Screenshot 2015-04-05 10.36.51

What you’re basically doing is creating a loop that displays all the submissions since the last email was sent out. The strange “merge tags” show you where each feed component is going to show up. The default output should work fine for now and if you sign up to the list before you make it public, you can see how everything comes together. You can also try one of the other styles from the drop-down, including “Custom” which allows you to create exactly what you want.

When everything looks right, click Next on the bottom right to continue setting up the campaign.

You should be ready to start your RSS campaign. Look through the checklist and make sure nothing is out of order. Click the Start RSS button on the bottom of the page and your campaign will begin!

If you added yourself to the list, you’ll want to wait until you see 1 or 2 emails come through to ensure that things are setup properly. Once you’ve confirmed that the list is working, move on to the steps below to add the form to your site.

Step 4: Create a form

Click the Signup Forms link, then Embedded Forms to get to the form builder. Here are the changes you want to make:

  1. Click Naked near the top of the form builder
  2. Turn off Include form title
  3. Select Show only required fields

You should have a fairly ugly little form showing, along with the code that creates it:

Screenshot 2015-04-05 10.11.15

Now you’re ready to add the form to your site.

Step 5: Add the form code and style

This step is simple but requires an additional plugin to add styling to your site. This is a good plugin to have around anyways as it makes customizing your site much easier if you decide to do so.

So, go to Plugins > Add New and search for “Simple Custom CSS” in the field on the top right. Here’s the one you’re looking for:

Screenshot 2015-04-05 10.14.30

Click Install now and follow the steps to activate the plugin. Now go to Appearance > Custom CSS and you’ll see a box for styling code. Paste in the below as a starting point:

.masthead-content {
    background: #ecfcff;
    padding: 0.8em 1em;
}

.masthead-content .mc-field-group label {
    display: none;
}

.masthead-content form {
    width: 60%;
    float: right;
    margin-left: 1em;
  	height: 2.6em;
}

.masthead-content .email {
    width: 70%;
    float: left;
}

.masthead-content .clear {
    clear: none;
}

.masthead-content .button {
    width: 25%;
    float: right;
    line-height: 2.6em;
    display: inline-block;
    min-width: 6em;
    border-radius: 2px;
    background: #A2A6A6;
    color: #fff;
    border: none;
    font-weight: bold;
    font-size: 0.8em;
    text-transform: uppercase;
    text-decoration: none;
    background: #02AFD1;
}

@media (max-width: 700px) {
  .masthead-content form {
      width: 100%;
      float: none;
      margin: 0 0 1em 0;
  }

  .masthead-content .email {
      width: 66%;
      float: left;
  }

  .masthead-content .button {
      width: 30%;
  }
}

Now that you have the styles in place, time to add a the form to complete the process.

Go to Appearance > Rank It WP Options and click on the Site Display tab. Scroll down to “HTML or text to appear below the header” and form the form HTML in that box. After the code, add a little message to prompt people to sign up, like “Enter your email address to get the latest submissions from our site!” Now, just below that text box, select the pages you’d like this form to appear on, then click Save Changes at the bottom. You should see something like this:

Screenshot 2015-04-08 14.26.49

Try adding your email address (a different one than before) and you should see a confirmation page and receive a validation email.

Here’s the email I received with the submission that was added to the site:

Screenshot 2015-04-09 12.31.54


 

That concludes our little tutorial here. If you have any questions or comments about the process above, let us know in the comments below. This isn’t a core feature of Rank It WP so I can’t go too far towards supporting it but if you follow the steps above, you should be in good shape!