Cute MailChimp Subscriber Count Buttons

I recently came across the rather snazzy looking subscriber count button on the Smashing Magazine website. A quick Google revealed that these are no longer available after MailChimp redesigned their service. Boo!

An example of the Smashing Magazine counter:

image

So, a quick look through the coding on this Smashing Magazine page revealed the following:

{% highlight html %}


Note how this script simply relies on the user knowing the correct information for the various parameters. This means we can go and find out what our **'list-manage.com'** datacenter is, our **'u' ID** number is, and finally our **'ID' number**.

## How to
Log into your MailChimp account and select the list you wish to use for your subscriber count button. Select *Signup Forms* then *Embedded*, so that we can reveal the code used to make a signup form specifically for the selected list.

Select the *Naked* option, and you should see code similar to the following:

{% highlight html %}
<!-- Begin MailChimp Signup Form -->
<div id="mc_embed_signup">
<form action="http://YOUR-USERNAME-HERE.YOUR-DC.list-manage.com/subscribe/post?u=YOUR-U-NUMBER&amp;id=YOUR-ID-NUMBER" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>

So we simply replace these details with those in the code above, and we get your very own Subscriber Count Button!

Tada!

Customisation

That’s brilliant and all, but what if I don’t like orange!? Simple, change the b number after ‘subscriber-count?’.

There are 40 options to choose from, and examples of these can be seen here.