Follow me button on wordpress.com with MailChimp

Some work for a client to move his blog from wordpress.com to his own wordpress installation. But it is really worth it if you want to be able to do as one pleases. WordPress.com forcing its user into any permanent structures and have little flexibility with the theme you want to use and plugins.

One of the challenges was how to get the functionality as “Follow Me” button that wordpress.com has available to its users. For me this is very accurate on some that can be easily imitated by MailChimp. MailChimp for those who do not know, is a very good mail service for those who want to collect email addresses. They have a free solution that can be used to send 2000 number of mail a month. That’s enough for most people at first, but they are also quite reasonable prices if you were to have greater needs. The advantage of using this type of service is that they specialize in mail and you can be sure that the email that is sent out is actually being delivered. This is quite a big topic that I might come back another time.

Back to the topic. First, I gathered together a code that you can use and add to the home page, take note, this works on any website.

<style type="text/css" media="screen">
#bit, #bit * {}
#bit {
bottom: -300px;
font: 13px "Helvetica Neue",sans-serif;
position: fixed;
right: 10px;
z-index: 999999;
}
.loggedout-follow-typekit {
margin-right: 4.5em;
}
#bit a.bsub {
background-color: #464646;
background-image: -moz-linear-gradient(center bottom , #3F3F3F, #464646 5px);
border: 0 none;
box-shadow: 0 -1px 5px rgba(0, 0, 0, 0.2);
color: #CCCCCC;
display: block;
float: right;
font: 13px/28px "Helvetica Neue",sans-serif;
letter-spacing: normal;
outline-style: none;
outline-width: 0;
overflow: hidden;
padding: 0 10px 0 8px;
text-decoration: none !important;
text-shadow: 0 -1px 0 #444444;
}
#bit a.bsub {
border-radius: 2px 2px 0 0;
}
#bit a.bsub span {
background-attachment: scroll;
background-clip: border-box;
background-color: transparent;
background-image: url(<?php bloginfo('wpurl'); ?>/wp-content/plugins/follow/include/star.png);
background-origin: padding-box;
background-position: 2px 3px;
background-repeat: no-repeat;
background-size: 20% auto;
padding-left: 18px;
}
#bit a:hover span, #bit a.bsub.open span {
/*background-position: 0 -117px;*/
color: #FFFFFF !important;
}
#bit a.bsub.open {
background: none repeat scroll 0 0 #333333;
}
#bitsubscribe {
background: none repeat scroll 0 0 #464646;
border-radius: 2px 0 0 0;
color: #FFFFFF;
margin-top: 27px;
padding: 15px;
width: 200px;
}
div#bitsubscribe.open {
box-shadow: 0 0 8px rgba(0, 0, 0, 0.5);
}
#bitsubscribe div {
overflow: hidden;
}
#bit h3, #bit #bitsubscribe h3 {
color: #FFFFFF;
font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
font-size: 20px;
font-weight: 300;
margin: 0 0 0.5em !important;
text-align: left;
text-shadow: 0 1px 0 #333333;
}
#bit #bitsubscribe p {
color: #FFFFFF;
font: 300 15px/1.3em "Helvetica Neue",Helvetica,Arial,sans-serif;
margin: 0;
text-shadow: 0 1px 0 #333333;
}
#bitsubscribe p a {
margin: 20px 0 0;
}
#bit #bitsubscribe p.bit-follow-count {
font-size: 13px;
}
#bitsubscribe input[type="submit"] {
-moz-transition: all 0.25s ease-in-out 0s;
background: -moz-linear-gradient(center top , #333333 0%, #111111 100%) repeat scroll 0 0 transparent;
border: 0px solid #282828;
border-radius: 5px 5px 5px 5px;
box-shadow: 0 1px 0 #444444 inset;
padding: 0.4px 20px;
text-decoration: none;
text-shadow: 0 1px 0 #CCCCCC;
color: #FFFFFF;
/*font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;*/
font-size: 16px;
font-weight: 300;
margin: 0 0 0.5em !important;
text-align: left;
text-shadow: 0 1px 0 #333333;
}
#bitsubscribe input[type="submit"]:hover {
background: -moz-linear-gradient(center top , #333333 0%, #222222 100%) repeat scroll 0 0 transparent;
box-shadow: 0 1px 0 #4F4F4F inset;
color: #FFFFFF;
text-decoration: none;
}
#bitsubscribe input[type="submit"]:active {
background: -moz-linear-gradient(center top , #111111 0%, #222222 100%) repeat scroll 0 0 transparent;
box-shadow: 0 -1px 0 #333333 inset;
color: #AAAAAA;
text-decoration: none;
}
#bitsubscribe input[type="text"] {
border-radius: 3px 3px 3px 3px;
height: 30px;
font: 300 15px "Helvetica Neue",Helvetica,Arial,sans-serif;
}
#bitsubscribe input[type="text"]:focus {
border: 1px solid #000000;
}
#bitsubscribe.open {
display: block;
}
#bsub-subscribe-button {
margin: 0 auto;
text-align: center;
}
#bitsubscribe #bsub-credit {
border-top: 1px solid #3C3C3C;
font: 11px "Helvetica Neue",sans-serif;
margin: 0 0 -15px;
padding: 7px 0;
text-align: center;
}
#bitsubscribe #bsub-credit a {
background: none repeat scroll 0 0 transparent;
color: #AAAAAA;
text-decoration: none;
text-shadow: 0 1px 0 #262626;
}
#bitsubscribe #bsub-credit a:hover {
background: none repeat scroll 0 0 transparent;
color: #FFFFFF;
}
</style>
<script type="text/javascript" charset="utf-8">
jQuery.extend(jQuery.easing, {
easeOutCubic: function (x, t, b, c, d) {
return c * ((t = t / d - 1) * t * t + 1) + b;
}
});
jQuery(document).ready(function () {
var isopen = false,
bitHeight = jQuery('#bitsubscribe').height();
setTimeout(function () {
jQuery('#bit').animate({
bottom: '-' + bitHeight - 30 + 'px'
}, 200);
}, 300);
jQuery('#bit a.bsub').click(function () {
if (!isopen) {
isopen = true;
jQuery('#bit a.bsub').addClass('open');
jQuery('#bit #bitsubscribe').addClass('open')
jQuery('#bit').stop();
jQuery('#bit').animate({
bottom: '0px'
}, {
duration: 400,
easing: "easeOutCubic"
});
} else {
isopen = false;
jQuery('#bit').stop();
jQuery('#bit').animate({
bottom: '-' + bitHeight - 30 + 'px'
}, 200, function () {
jQuery('#bit a.bsub').removeClass('open');
jQuery('#bit #bitsubscribe').removeClass('open');
});
}
});
});
</script>
<div id="bit" class="">
<a class="bsub" href="javascript:void(0)">+<span id='bsub-text'>Follow</span></a>
<div id="bitsubscribe">
<h3><label for="loggedout-follow-field">Follow <?php bloginfo('name' ); ?></label></h3>
<form action="" method="post" accept-charset="utf-8" id="loggedout-follow">
<p>Get every new post on this blog delivered to your Inbox.</p>
<p class="bit-follow-count">Join other followers:</p>
<p>
<input type="text" name="email" id="s2email" style="width: 95%; padding: 1px 2px" value="Enter email address" onfocus='this.value=(this.value=="Enter email address") ? "" : this.value;' onblur='this.value=(this.value=="") ? "Enter email address" : this.value;' id="loggedout-follow-field"/>
</p>
<p id='bsub-subscribe-button'>
<input type="submit" name="subscribe" value="REGISTRER MEG" />
</p>
</form>
</div>
</div>

About the Author

Kenneth is computer engineer with over 15 years experience with data and media marketing, he has worked with many large companies both domestically and internationally. Everything from GE Money Bank, Nordnet, Chess, Hi3G, Netcom, Call me, Norsk Rikstoto to name a few and has been involved in major projects implementation and venues throughout the world.

Leave a Reply 3 comments