Having just finished a pledge drive month and in the process of preparing to overhaul SOPTV's entire online membership section, I find myself thinking about the usefulness (and unfortunate neccessity) of those pop-over, pledge nag boxes stations use to force the subject of giving to be front and center on their website.
As annoying as we may find them, they're still very effective tools. Public broadcasting lives or dies based on the level of local support. I'm providing this script because I know that there are stations out there that would love to do this, but simply don't have the know-how. It's not that hard--just five easy steps--and it's all based on freely available scripts.
...pop-over, pledge nag boxes...
This method uses PHP and JavaScript to have the box slide down from the top and display a random message. I think that the slide-in makes the box even more noticable and harder to ignore than just having it appear on the page. The random text keeps it from being too predictable. I've made it fairly wide at 600 pixels to again maximize impact. You can view the demo in a new window.
STEP 1
...the code that will be randomly chosen to place into the pop-over box...
The place to start is with the actual text, links, images, or whatever else you want to have appear in the box. This resides in a text file that you are going to create entitled random.txt which you will create and place in your site's root directory. This is where you store the code that will be randomly chosen to place into the pop-over box. You can create this in any text editor. You can use the code I've provided below as a starting point or create your own. (If you look carefully then you'll notice that the coding used in this text file is XHTML. If your site uses plain HTML, then you'll have to recode this accordingly.)
Each section of code that will be imported into your pop-over box is placed on a separate line, because an entire line is chosen randomly for import. This can be as simple or complex as you want. I've stuck with basic text, images, and links here, but this could just as easily use Flash or other embedded video if you prefer. Just remember to place the whole thing on a single line. Also, if you prefer, you can use just one message by having only one line in this file. The text, graphics, and code you choose are up to you. By the way, please don't forget to change all the link and graphic URLs to point to your station's website and really look over and personalize the text.
random.txt
<h4 align="center">Support the news and quality programs you depend on.<br />Join or renew today!</h4> <h4 align="center">Your gift to public broadcasting makes a difference.<br />Join or renew today!</h4> <h4 align="center">Help connect our community with programs that educate, enlighten, inspire, and entertain.<br />Join or renew today!</h4> <h4 align="center">Your gift makes great television happen for Southern Oregon.<br />Join or renew today!</h4> <h4 align="center">For TV that educates, enlightens, inspires, and entertains.<br />Join or renew today!</h4> <h4 align="center">Help your community Be More by supporting public broadcasting today.<br />Join or renew today!</h4> <h4 align="center">Your support makes public broadcasting possible.<br />Join or renew today!</h4> <h4 align="center">You are the public in Public Television.<br />Join or renew today!</h4> <h4 align="center">Programs on PBS are made possible by you.<br />Join or renew today!</h4> <h4 align="center">Pledge you support -- see what your dollars can do.<br />Join or renew today!</h4> <h4 align="center">If you care about quality programs -- do your part.<br />Join or renew today!</h4> <h4 align="center">Aren't the quality programs worth supporting?<br />Join or renew today!</h4> <h4 align="center">Member support makes it possible.<br />Join or renew today!</h4> <h4 align="center">If you like what you see -- become a member.<br />Join or renew today!</h4> <h4 align="center">You rely on us -- we rely on you.<br />Join or renew today!</h4> <h4 align="center">For great television -- without commercials!<br />Join or renew today!</h4> <h4 align="center">Members are our #1 source of support.<br />Join or renew today!</h4> <h4 align="center">The more members we have, the more great TV we can provide.<br />Join or renew today!</h4> <h4 align="center">An investment in PBS is an investment in quality TV.<br />Join or renew today!</h4> <h4 align="center">You count on public broadcasting and we count on you.<br />Join or renew today!</h4> <h4 align="center">Build a well educated and informed community.<br />Join or renew today!</h4> <h4 align="center">Ensure that PBS continues to educate, enlighten, inspire, and entertain.<br />Join or renew today!</h4> <h4 align="center">Member supported for over 30 years.<br />Join or renew today!</h4> <h4 align="center">PBS support fits any budget.<br />Join or renew today!</h4> <h4 align="center">Tell us what you think your favorite programs are worth.<br />Join or renew today!</h4> <h4 align="center">We are grateful for whatever you can give.<br />Join or renew today!</h4> <h4 align="center">Thanks to your support everyone can enjoy quality arts and entertainment.<br />Join or renew today!</h4> <h4 align="center">Quality Television is not free.<br />Join or renew today!</h4> <h4 align="center">Thanks to your support everyone has access to reliable news and information.<br />Join or renew today!</h4> <h4 align="center">PBS begins and ends with you -- our viewers. <br />Join or renew today!</h4>
STEP 2
...randomly pulls a single line of code...
The next step is the creation of another file called random.php which will also be placed in your site's root directory. This is the file that actually locates your random.txt file and then randomly pulls a single line of code from it. Again, please don't forget to change the link URL to point to your station's website and the the text file you just created.
random.php
<?php
$textfile ="http://www.YOURSITE.ORG/random.txt";
$items = file("$textfile");
$item = rand(0, sizeof($items)-1);
echo $items[$item];
?>
STEP 3
...make the box slide down the page...
This is the JavaScript that goes into the head section of your page right before the close head (</head>) tag in order to make the box slide down the page. If you notice at the end of that code, there's some styling for the actual appearance of the box on your page. Please don't forget to change that styling to fit your site.
Header Script
<script type="text/javascript">
var timeout;
function appear(){
var the_style = getStyle("floatingflash");
if (the_style) {
var current_top = parseInt(the_style.top);
var new_top = current_top + 5;
if (document.layers) {
the_style.top = new_top;
} else {
the_style.top = new_top + "px";
}
if (new_top < 150) {
the_timeout = setTimeout('appear();',10);
}
}
} // appear
function disappear() {
var the_style = getStyle("floatingflash");
the_style.display = 'none';
} // disappear
function getStyle(ref) {
if(document.getElementById && document.getElementById(ref)) {
return document.getElementById(ref).style;
} else if (document.all && document.all(ref)) {
return document.all(ref).style;
} else if (document.layers && document.layers[ref]) {
return document.layers[ref];
} else {
return false;
}
} // getStyle
</script>
<style type="text/css">
#floatingflash {
position: absolute;
border: 2px solid white;
background-color: #001838;
width:600px;
}
</style>
STEP 4
...the script runs after the page loads...
This is where we place a JavaScript onLoad event into the <body> tag so that the script runs after the page loads. It tells the browser to look for the function we just placed in the header. Depending on how your site is coded, you may have to add this attribute in addition to other ones already included in your <body> tag.
Body Script
<body onload="appear();">
STEP 5
...creates the box off-screen...
I've called this the Footer Script because of its placement right before the close body (</body>) tag. This is the code that actually creates the box off-screen initially before it begins sliding down. The styling at the top will allow you to reposition the box differently to prevent possible conflicts with other content on your page. The PHP include that you see in there is the part that calls the random.php file you created earlier and brings the randomly chosen code into your page. You'll notice that I placed a paragraph with a centered image above that. This is a great place to put your station's logo or a membership graphic, but you can drop that whole paragraph if you prefer. There's also a spot below that include for a GIVE-NOW graphic to link to your membership section. And finally, there's a small graphic to allow the user to close the box and make it disappear. You can change any of these graphics and links to reflect the style of your station's site. Once again, please don't forget to change all the link and graphic URLs to point to your station's website and set the graphic size attributes accordingly.
Footer Script
<div id="floatingflash" style="top:-600px;left:-150px;margin-left:55%;z-index:999;"> <p align="center"> <img src="http://www.YOURSTATION.ORG/PATH-TO-YOUR-GRAPHIC/YOUR-GRAPHIC.jpg" alt="ALT TEXT FOR YOUR GRAPHIC" title="TITLE FOR YOUR GRAPHIC" width="WIDTH-FOR-YOUR-GRAPHIC" height="HEIGHT-FOR-YOUR-GRAPHIC" /> </p> <?php include "http://www.YOURSTATION.ORG/random.php" ?> <p align="center"> <a href="https://www.YOURSTATION.ORG/YOUR-MEMBERSHIP-LINK/" target="_blank"><img src="http://www.YOURSTATION.ORG/give-now.gif" alt="GIVE NOW" title="GIVE NOW" border="0" width="WIDTH-FOR-YOUR-GRAPHIC" height="HEIGHT-FOR-YOUR-GRAPHIC" /></a> </p> <p align="right"> <a href="javascript:disappear();" title="Close box."><img src="http://www.YOURSTATION.ORG/close.gif" alt="Close box." border="0" width="16" height="16" /></a> </p> </div>
Hope This Helps
Well, that's it. I hope this helps someone out there. It's handy tool to have at your disposal--especially around pledge time. If you have any questions or need help, just ask in the comments below or feel free to contact me directly.
Thank you all. Code well. And good night.
If you enjoyed this post, then make sure you subscribe to the RSS feed!
Fan Me >>
Follow Me >>
