Blog DIY – How to Make a Lightbox RSS E-mail Subscription Sign Up Form!
UPDATE: I’ve developed this DIY into a Wordpress Plug-in, you can get the ThickboxSignup Plugin for $25. It’s like you paying me to custom-install it on your blog so not a bad deal!
I’ve been noticing more and more internet marketers have been using lightbox sign up forms to increase their RSS readership. John Chow recommends using Aweber but I just don’t see the benefits of e-mail lists over my current “free” feedburner e-mail subscriptions.
Since I don’t really like paying for stuff (that should be free anyways), I’ve decided to make my own code to hack Wordpress and of course, a nice lightbox RSS e-mail subscription sign up form as shown here:
Basically, I couldn’t use Lightbox library since it doesn’t support iframes. I found a better solution, which is a similar open source library called, “Thickbox“.
First, download all the files and install it on your server. In this example, I will use /js and /css directories for simplicity. Also, try to use the compressed versions of the javascript files, they will load much faster.
Second, you will need to create a simple PHP or HTML file for the sign-up form.
Here’s my code I made for this Zedomax.Biz blog:
<?php setcookie(“zedomaxbiz”, “zedomaxbiz”, time()+360000);
//store cookie for about 1000 hours or about 40 days
?>
<html>
<div style=”width:300px;height:300px;margin:0 auto;”>Sign up for FREE e-mail delivery for daily newsletter on the latest internet marketing!
<br />
<br />
*Your e-mail will not be shared with anyone and you may cancel at any time by pressing on “unsubscribe” button at the bottom of your newsletter.
<br />
<br />
<form style=”border:1px solid #ccc;padding:3px;text-align:center;” action=”http://feedburner.google.com/fb/a/mailverify” method=”post” target=”popupwindow” onsubmit=”window.open(‘http://feedburner.google.com/fb/a/mailverify?uri=zedomaxbizblog’, ‘popupwindow’, ’scrollbars=yes,width=550,height=520′);return true”><p>Enter your email address:</p><p><input type=”text” style=”width:140px” name=”email”/></p><input type=”hidden” value=”zedomaxbizblog” name=”uri”/><input type=”hidden” name=”loc” value=”en_US”/><input type=”submit” value=”Subscribe” />
</div></form>
</html>
Now, you will see that I simply copy and pasted the feedburner e-mail subscription form from feedburner.
Pretty simple right?
Well, save this code as filename, “signup.php” and put it in your root directory. Try opening up the file in your browser to make sure it works. (example: http://zedomax.biz/signup.php)
Once you got the sign-up form page right, you are ready to hack your Wordpress theme and get the lightbox working. (or thickbox)
Now, copy and paste this code right before the </head> tag in your header.php file:
<script type=”text/javascript” src=”/js/jquery.js”></script>
<script type=”text/javascript” src=”/js/thickbox-compressed.js”></script>
<link rel=”stylesheet” href=’http://zedomax.biz/blog/og.php?url=/css/thickbox.css’ target=”_blank” rel=”nofollow” type=”text/css” media=”screen” /><script type=”text/javascript”>
function readCookie(name) {
var nameEQ = name + “=”;
var ca = document.cookie.split(‘;’);
for(var i=0;i < ca.length;i++) {
var c = ca[i];
while (c.charAt(0)==’ ‘) c = c.substring(1,c.length);
if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
}
return null;
}function thickBoxPopup(){
if(readCookie(‘zedomaxbiz’)==”zedomaxbiz”) {
tb_show(“Free Guerilla Internet Marketing Newsletter!”,”http://zedomax.biz/signup.php?KeepThis=true&TB_iframe=true&height=330&width=330″,null);
}
}
</script>
Make sure the paths are correct to where you’ve installed your thickbox js and css directories.
The readCookie functions are to store cookies so your lightbox sign-up form doesn’t annoy your regular readers everytime they come to your blog.
The function thickBoxPopup() is the actual function that checks for a cookie named, “zedomaxbiz“. (You can change it to anything else if you’d like) If such cookie doesn’t exist, it will create one to expire 1 year later. This is to NOT annoy your readers, the lightbox will only show up once per visitor. I could also store cookies only to those who subscribed but this would annoy those readers who never subscribe but like to visit your blog.
One more step and this lightbox (thickbox) RSS e-mail sign-up form will be done.
Add (or replace) the following <body onload tag to your <body> tag:
(This should also be on header.php file)
<body onload=”setTimeout(‘thickBoxPopup()’,5000);”>
Basically, this will set off the function thickBoxPopup 5 seconds after your blog has been “completely” loaded onto the browser.
Make sure to clear your Wordpress super cache (if you have it installed) and re-load your blog and wait 5 seconds. You should see a nice lightbox sign-up form.
Now, the lightbox sign-up form will only be activated once so if you want to see it more times for testing, simply clear your browser cookies and load your site again.
I’ve been testing this lightbox sign-up form on my Zedomax.com blog and have noticed dramatic improvements in daily sign-up numbers. It can be annoying to your regular readers but it’s very light-weight and doesn’t freeze your website like the Aweber lightbox sign-up form does. (I have noticed that John Chow’s or Shoemoney’s blog will freeze if you scroll way down before the sign-up form appears)
Of course, you are not limited to feedburner sign-ups here, you can probably use this for anything else you might need, even an e-store that needs lightbox/thickbox effects.
Well, I hope you enjoyed the read and make sure to subscribe to the blog!
Loading ...
April 13th, 2009 at 12:31 am
I tried this seems to work great BUT one HUGE problem. On your page the box seems to scroll with the page. I have copied everything exact, yet it does not scroll!!! If I scroll down before it appears it will be at the top of the page not where I am. Help please!!
Thanks
April 13th, 2009 at 1:21 am
It might crash with any other javascript code you are using for menus, what browser are u using and what’s your site?
April 20th, 2009 at 12:21 am
My site is http://www.presaleplace.com I looked at the html and I am using javascript for the date above the page as well as for Google adsense. Also, I tested this on my local computer by itself and same thing doesn’t scroll.
April 20th, 2009 at 8:36 am
First off, some of the code is wrong or plain didn’t work for me. Part of it was the smart quotes and part of it just didn’t work.
That said, I want to thank you. The shell of the code and idea was awesome. It gave me more than enough information to go out and figure out how to make it all happen. Instead of blindly copy and pasting the code, I figured out what each line meant and I have a foundation that will help me do some other awesome things with javascript and thickbox.
And for those coming onto this, just play around with it, you’ll get it to work and you’ll learn some about code in the process. It’s awesome!
April 22nd, 2009 at 5:42 am
That’s awesome Jack! Glad it helped u out and feel free to update us on any bugs.
February 16th, 2010 at 7:59 am
Sir I have ordered your Signup Plugin.but after I made a payment through paypal It shows error on the redirected page and cant download the Plugin.Paypal shows my Transition too.Reply me Quick.
March 9th, 2010 at 6:58 pm
Just purchased thickbox and the feedburner.com domain is no longer valid and all kinds of redlights and whistles are going off in firefox….says its identity theft. what’s the correction?
March 10th, 2010 at 5:28 am
Sorry Valeria, I stopped selling Thickbox, let me refund you!
July 30th, 2010 at 5:53 am
thanks for the code… exactly what i was looking for… though i made a modification with the function…
i needed it to display the popup on the first visit so i used
if(readCookie(‘mycookie’)!=”mycookie”) {
anyhow… thanks again!