Since the last release of my Wordpress plugin Splashscreen version 0.20, there’s been many requests for new features. You may also want to read the original post for version 0.10 for completeness. One of the most requested feature was to allow search engine bots to get the blog content so they can traverse the website properly.
Ask and ye shall receive… version 0.30 of the plugin, that is.
To control the new feature, I’ve added some new options in the settings as shown below:
Enable Overlay:
When this option is enabled, the splash screen will be an overlay on top of the content of your blog page. In other words, your blog will still be there, but the splash screen will be on top of your page. This way, the search engine bot can still “see” your blog, even though your visitors cannot while the splash screen covers the contents.
If you turn this option off, you will get the non-overlay version of the splash screen which will NOT have your blog contents “under” the splash screen. I kept this feature in the plugin for backward compatibility for people who are using it right now.
Overlay Opaque:
The new overlay splash screen is made up of a background and a dialog-type box with links, as shown below.
Normally, you would want the background to be opaque (cannot see-through) so this option should be enabled. However, for some bloggers, you may want to have the background transparent so that you can see a little of what is on your blog. Of course, this would not be a good idea for “adult” websites, but for people using this plugin for non-adult websites and wanting to force the users to agree to your “terms of service,” you might want to tease them with a preview of your blog.
Overlay Background Color:
This is the color of the background using normal CSS specifications (e.g. #000000, rgb(0,0,0), black). If you don’t know what CSS colors are, see this article.
The rest of the options are the same as in version 0.20. However, if you are using the new “overlay” feature, you must use a new template. The default overlay template is called “splash-overlay.htm” as shown below:
<script type='text/javascript'>
function setsplash() {
setCookie("splash", "1", "", "/");
}
</script>
<div style="left: 50%; top: 50%; position: relative; background-color: #F5F5F5; margin-top: -150px; margin-left: -300px;
width: 600px; height: 300px; padding: 30px;">
<center>
<table border="0">
<tr>
<td colspan="2" align="center">
<img src="<?php echo plugins_url('splashscreen/images/wordpress-logo.png'); ?>">
</td>
</tr>
<tr>
<td colspan="2" align="center">
<script type="text/javascript">checkcookies();</SCRIPT>
<h3>
To enter this website, you must agree to the terms below.
</h3>
</td>
</tr>
<tr>
<td colspan="2" width=100%>
<FORM>
<P><TEXTAREA style="font-size: 14px;" NAME="comments" COLS="70" ROWS="7" READONLY>By
using this website, you agree to the Terms of Service below. This Terms of Service is a binding contract
between you and this website. If you do not agree with any of these terms, please exit this website.
TERMS OF SERVICE:
[enter terms of service here]
With more text here, there will be a scroll bar on the right to allow the user to scrool to read the terms of service.
If he/she does not wish to read the entire contents, they may simply agree without reading. Even if they do
so, they are agreeing to the terms of service by clicking on "Agree".</TEXTAREA><br />
</td>
</tr>
<tr>
<td align="left"><h2><a onclick="setsplash();showcontent();return false;" href="#"><font color="green"><b>I Agree</b></font></a></h2></td>
<td align="right"><h2><a href="http://google.com/"><font color="red"><b>I Do Not Agre</b></font></a></h2></td>
</tr>
</table>
</center>
</div>
Changing the template:
Be very careful about what you change in the template. My recommendation is to copy it to a new filename (e.g. mytemplate.htm) then start editing it. Do NOT change the original template because if you break it, you may not be able to get back to a working version.
- The first item of interest in the template is near the top and is highlighted in green. If your website re-directs www.mywebsite.com to mywebsite.com, you will want to change the line to:
setCookie("splash", "1", "", "/", ".yourdomainname.com");
Notice that you must have the dot (“.”) before your domain name.
That’s it.
If you want to get fancy, you could change the size and look of the dialog box itself. This is left as an exercise for the student. One thing to keep in mind is that you need to center the dialog box properly.
Free Cool Feature:
While working on the new version of this plugin, I realized that if the underlining website is vertically long, the user could scroll down the page and not be able to see the dialog box. This can also happen if the URL is using a bookmark down the page (e.g. pointing to a comment near the bottom of the page). At first, I tried forcing the page to automatically scroll up to the top. After a lot of work, I got this to work but when the overlay goes away, you are looking at the top of the page instead of what you wanted to see.
The solution was to copy the technique that terrible SPAM boxes use to follow you when you scroll. Basically, when you scroll, the javascript code will automatically move the dialog box so that it’s ALWAYS centered on the screen. This also works for bookmarks in the URL. Nice feature if I do say so myself.
You can see the new version of the plugin in action at alexisbreeze.com. This website is “adult” so don’t say I didn’t warn you.
Until I get this up on the Wordpress plugin page, you can get it here.
December 5, 2009:
I took some code out of the template and created version 0.31. This should make modification of the template a little easier.
Responses to “Splashscreen Wordpress plugin version 0.30”
-
-
Hi cochinoman,
buddypress works only with WPMU installation,
so, I hope that you'll try BP as soon as possible.
Great work, and thanks…
Best wishes for the new yearAndrea
-
Hello,
I really like this plugin and would love to know if you have any idea on how to get a flash actionscript 3.0 button to work with it? Any help is appreciated!
Thanks,
Matt
-
Is there a simple cookie variable setting that will always display the splash page when hitting the index page, even in the same session?
-
Now I see there is a newer version to handle the SE spiders while splash screen is there.
Last thing is what if the user has JS disabled? How can he actually get to the homepage from the splash screen?
-
Hi,
I have a little error with the plugin. On first browsing to the site the splash is being showed, but when trying to navigate the site, the site breaks and there's a blank screen with only this error:
Fatal error: Call to a member function getSettings() on a non-object in /data/15/1/116/83/1768735/user/1912227/htdocs/wp-content/plugins/splashscreen/splashscreen.php on line 347
What can it be?
Thanks,
Maor -
@cochinoman thanks for your quick answers.
About the error message I've got, it because I tried to set a $_SESSION cookie named splash.
I finaaly set a regular setcookie () with expiration time. This is for the case that js is disabled ..It's a bit problematic that plugin don't work if js is disabled, since there are 10-15% of users that disables the JS.
Is there a way to deal with it?
What I did is, as I wrote, add in my WP template header the setcookie of splash. That ensures that a user without js will be shown my splash and on next refresh he will get into the site. I don't need the user to confirm something, just to show him a nice small flash before entering the site.If you think of something, I'll be happpy to know…
You may see it in work, even with js disabled, in the link –
http://www.saadifoundation.org





Hi cochinoman,
great plugin!!!
I use this plugin in combination with Buddypress! Do you know Buddypress? Buddypress is a plugin that expand the WPMU into a social network. Try out, it's fantastic.
Ok, splashscreen is a great plugin, but with buddypress there is one problem, at first access, the admin bar (adminbar of buddypress) don't appear.
Can you solve this issue?
Thanks for your great work…
Andrea