Introduction
In last tutorial we introduced two plugins to do (1) SEO and (2) social media auto-publish. Here we continue introducing the third content sharing technique: Email subscription via MailChimp.
MailChimp Service
Mailchimp is an online email campaign service (with a free pricing plan). Website owners can create email campaigns to get subscribers and automatically send them email updates.
Account Registration
To use MailChimp you have to first create an account. You must have a domain name to register due to anti-spam regulation. It is also recommended that you create an email acount that ties to your domain.
After entering your domain MailChimp will ask to verify your domain. For me I have to further set some DNS records outlined in this article. See this tutorial for DNS record configuration.
Creating a Campaign
Once you register an account you can start create campaigns by clicking top left menu icon and then the campaigns
tab. For ModernBlackHand we use an RSS campaign that gets post updates via wordpress RSS Feed.
Then you have to specify your wordpress’ RSS url and the frequency and time your campaign send out updates. Usually wordpress’ rss url is http://your_domain/index.php/feed
but plugins may change it.
RSS url and frequency.
You can check your rss url by typing it in the browser. It should look something like this, similar to a web page source code:
RSS url shown in the browser.
Then it will ask to use a list for the campaign. A list is simply a table to store subscriber information. The default list example should work.
Then you enter some basic campaign information.
Then select an email style, and customize its content display.
Confirm and review your setting, then hit “Start RSS” to start the campaign!
MailChimp for WP Plugin
Now the campaign is ready to send email updates, the next step is to configure your site to get subscribers. For MailChimp there is the MailChimp for WP plugin.
After installing and activating the plugin you have to:
- Link to your MailChimp account.
- Create a sign-up form and configure error messages.
- Include the codes in your wordpress template, like
footer.php
.
Link to Your MailChimp Account
You need to find out what your API key is to let wordpress connects to MailChimp. Simply click “get your API key here” link in the MailChimp API Settings
tab. You might need to create one the first time.
Save it and if it is successful it will display a green “CONNECTED” text.
Create Sign Up Form
Then click on the Forms
tab. There you can determine:
- The form’s HTML.
- Prompt and error messages.
- Sign-up behaviors.
- CSS Style
Once you are done, click <>Get shortcode
just below the form name to get the wordpress code that tells wordpress where to insert the form.
Include the shortcode in your wordpress template
For me I put it inside footer.php
inside a modal. The code segment is as follows (get the complete file on my Github):
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 |
<!-- modal: subscribe ================================================== --> <div class="modal fade modal-footer" id="myModal"> <div class="modal-dialog modal-sm"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button> <h4 class="modal-title" id="myModalLabel"> <?php if(get_locale() == 'zh_TW') : ?> 只需輸入您的姓名和電子郵件就可接收我們的最新文章: <?php else : ?> Simply enter your name and email to receive our latest posts: <?php endif; ?> </h4> </div><!-- modal-header --> <div class="modal-body"> <!--==================== Form Location ========================= --> <?php echo do_shortcode('[mc4wp_form id="33"]'); ?> <!--==================== Form Location ========================= --> </div><!-- modal-body --> <hr> <p class="modal-disclaim"> <?php if(get_locale() == 'zh_TW') : ?> 通過提供您的電子郵件,你同意接受不定期的推薦郵件和電子報。我們沒有垃圾郵件。只有好東西。我們尊重您的隱私權, 你可以隨時取消訂閱。 <?php else : ?> By providing your email you consent to receiving occasional promotional emails & newsletters. No Spam. Just good stuff. We respect your privacy & you may unsubscribe at any time. <?php endif; ?> </p> </div><!-- modal-content --> </div><!-- modal-dialog --> </div><!-- modal --> |
The codes have the usual three <div>
tags with classes modal
, modal-dialog
and modal-content
(line 3-5). See this tutorial for using modals.
Line 7-16: modal-header
Here we use a header to explain the subscription form.
Line 18-24: modal-body
Here is the main modal body (the subscription form), and we put the shortcode here.
Line 28-34: disclaimer
It is good practice to explain to your viewers that you repsect their privacy and won’t abuse their information.
Test Your Subscription!
You have completed setting up email subscription for your site! Open the form, enter your own email, and check your mailbox to test it!