Tag: css

Edited to note: The popup is NOT on this site. You’re not missing anything.

Blame Chris Lema. Not for “making” me do anything, but for making a good article that was insightful and inspiring. But then again, he’s good at that.

When I read the article he wrote about Growing your Email List, I was interested. While I don’t have the same needs he does, I do want to pull in more subscribers to one site. Look, in general, I don’t worry about who’s following me on my personal sites. However I do have a site, one site, where I do care about the followers, especially since I broke my old mailing list a while back.

Revisiting My Options

The old mailing list worked, but no one could sign up any more, and it was becoming a hassle. It was finally time to move off the old and embrace some new. But what new? I’m a huge proponent of self hosting, but to be frank, I hated managing email server stuff and Mailman is both long in the tooth and not exactly user friendly for the non-technical people. It was time to accept that this was not my forte, and you know what? I didn’t want to learn it. Since 100% of the news on that site was pushed via WordPress, it was logical to use something I already had: Jetpack. It had subscriptions, done.

“I broke it.”

That was in the body of the email I sent.

I emailed everyone on that old list and explained the situation. I apologized for my screwup, and explained how they could re-subscribe if they wanted. Within 12 hours, 50% of them did. That was good enough for me, and while I’m watching more people trickle in, I think it’s going to top out around a 70% retention rate. That’s not bad at all. A handful of people emailed me back laughing (literally ‘LOL’ was the entirety of more than five replies) and saying it was okay, thank you for letting them know. I was heartfelt, I was honest, and I was deprecating.

I’ve always had a link to my email list in my sidebar as an alias, domain.com/updates linked to domain.com/mailman/list/updates, so changing that to an actual page all it’s own with a subscription form was crazy simple. New page, delete redirect, done.

Back to Chris though. See, the most enlightening thing I gleaned from his email was the horrifying fact that pop-ups work. He didn’t give me stats or anything, but I believe him. When I read that, I believed him enough that I went and read other articles about those ‘non-annoying’ pop-ups. Chris and I are vastly different people, passionate about different things, and obsessive about others. But we share a talent for writing, telling stories, and engaging. We also share a hate of pop-ups. His is certainly not annoying.

Actually I’ve barely noticed his, except to go “Oh, there was a pop-up to get him in my email.” No, I didn’t sign up, I like getting Chris in my RSS box.

jquery

This was the hardest part so let’s tackle it first. All I have to do is show it in a pop-up. Except it’s not really a pop-up, it’s a sliding tab. Sure, I could use anything I wanted, but like Chris, I hate pop ups.

This part stumped me hard. Chris got it easy by having a third-party hand him the code. I, like many people, have an email list and want to use that. But I’m still very much a rookie when it comes to jquery, so when I ran into this information about how to code a wordpress.com follow button and Follow me button on WordPress with MailChimp, I did a little dance.

The jquery actually comes straight from WordPress.com (I viewed a lot of source to reverse this one):

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 = $('#bitsubscribe').height(),
		$bit = $('#bit');
	setTimeout(function () {
		$bit.animate({
				bottom: '-' + bitHeight - 10 + 'px'
			}, 200);
		if ( document.location.href.indexOf('subscribe=') > -1 ) {
			open();
		}
	}, 300);
	var open = function() {
		if (isopen) return;
		isopen = true;
		$('a.bsub', $bit).addClass('open');
		$('#bitsubscribe', $bit).addClass('open')
		$bit.stop();
		$bit.animate({
			bottom: '0px'
		   },{duration:400, easing:"easeOutCubic"});
	}
	var close = function() {
		if (!isopen) return;
		isopen = false;
		$bit.stop();
		$bit.animate({
			bottom: '-' + bitHeight - 10 + 'px'
		}, 200, function() { 
			$('a.bsub', $bit).removeClass('open');
			$('#bitsubscribe', $bit).removeClass('open');
		});
	}
	$('a.bsub', $bit).click(function () {
		if ( !isopen )
			open();
		else
			close();
	});
	var target = $bit.has('form').length? $bit : $(document);
	target.keyup(function(e) {
		if (27 == e.keyCode) close();
	});
	
	$( '#loggedout-follow' ).submit( function() {
		email = $( '#loggedout-follow-field' ).val();
		if ( '' === email || !email.match( /^.*@.*\..*$/ ) ) {
			var error = LoggedOutFollow.invalid_email;
			$( '#loggedout-follow-error' ).text( error ).css( 'opacity', 1 ).fadeIn( 'slow' );
			$( '#loggedout-follow-field' ).focus( function() { $('#loggedout-follow-error').fadeOut(); } );
			return false;
		}
		return true;
	});
});;

If I enqueued that in my theme, then all I’d have to do is call this somehow in my theme:

<div id="bit" class=""><a class="bsub" href="javascript:void(0)"><span id="bsub-text">TITLE</span></a><div id="bitsubscribe">CONTENT</div></div>

The jquery would automatically handle placement and everything, so I struck upon the dead-simple solution.

Widget

Since I only need to use this on a WordPress site, I put it in a widget, and slapped some CSS around it to make it sexier. The very simple (Genesis skewed) widget is as follows:

//* Register side-up-bit area
genesis_register_sidebar( array(
	'id'            => 'slide-up-bit',
	'name'          => __( 'Slide Up Bit', 'mygenesis' ),
	'description'   => __( 'This is a widget area that slides up.', 'mygenesis' ),
) );

//* Hook after post widget area after post content
add_action( 'genesis_after_footer', 'my_slide_up_bit' );

function my_slide_up_bit() {
    genesis_widget_area( 'slide-up-bit', array(
        'before' => '<div id="bit"><a class="bsub" href="javascript:void(0)"><span id="bsub-text">Follow SITE</span></a><div id="bitsubscribe">',
        'after' => '</div></div>',
	) );
}

Yes, I hard coded in the “Follow Site” title bit. Couldn’t figure out how not to, since I needed the link in the title. If this was a normal widget, I’d use the ‘before_title’ and ‘after_title’ trick, and while that’s supposed to work with Genesis too, I hit a wall and was in a time-crunch. That said, afterwards, all I had to do was drop Jetpack subscribe widget into the widget area, and the jquery code went into a function to show in my footer. Done. Time for the elf to study up on jquery, though, as I still don’t understand it all.

Bonus note:

if (document.location.href.indexOf('subscribe=') !== -1) 

That little bit of code says “If someone has subscribed, make sure the popup is up when they visit.” It shows them that they have subscribed successfully, which is great, but I quickly realized I could tweak that to pop up when someone visited my site from, say, Facebook or RSS links:

if ( (document.location.href.indexOf('subscribe=') > -1) || (document.location.href.indexOf('fb_source=') > -1) || (document.location.href.indexOf('utm_source=rss') > -1) ) 

The RSS folks are pretty small, and I doubt they care, but the FaceBook people were absolutely delighted. I want to stress that I was doing this specifically because I have very non-technical people, and even having a link for email updates was beyond them. But having this slide-up is non-offensive and apparently much needed. My email subscribers tripled within a week.