4 Dec 2009

Splashscreen WordPress plugin version 0.30

Category: Coding, Wordpress

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:

splashscreen1

Click on image for large version

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.

splashscreen2

Click on image for large version

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.

  • Next, the blue  highlighted item is the WordPress logo that appears in the overlay dialog box.  You can replace it with your own logo and enter the name there. Place your logo file inside the subdirectory “images” inside the splashscreen directory. If you don’t want any image, remove the entire “img” HTML.
  • Finally, replace the yellow highlighted area with your own terms of service or whatever you want to display in the dialog box.

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.


Update 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.

Update July 12, 2010:
A helpful commenter told me that the templates were missing a closing /FORM, which have been added in version 0.40.

Update August 24, 2010:
Yet another commenter has found that the adult template was not updated for this new version. This has been corrected in version 0.41.

Update November 14, 2010:
If you are trying to get this plugin with work with WP -SuperCache, checkout this fix at technicalnotebook.com.

Posted Friday, December 4th, 2009 at 4:51 am
Filed Under Category: Coding, Wordpress
You can leave a response, or trackback from your own site.

66

Responses to “Splashscreen WordPress plugin version 0.30”



  1. By Andrea on December 29, 2009 at 5:38 am

    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

    • By cochinoman on December 29, 2009 at 2:30 pm

      Are you using WP MU? If so, I don't know if this plugin will work with that. I don't know what it takes to be compatible with Buddypress but I'll take a look at it when time permits. It looks very interesting.

  2. By Andrea on December 29, 2009 at 3:47 pm

    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 year

    Andrea

  3. By Matt on January 21, 2010 at 8:12 am

    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

    • By cochinoman on January 21, 2010 at 3:32 pm

      I'm not familiar with flash so I don't think I can be much help. To get the plugin to work properly with flash, you would have to set the cookie "splash" inside the flash somehow. I don't know if this is possible in flash.

  4. By Paul on January 30, 2010 at 1:15 pm

    Is there a simple cookie variable setting that will always display the splash page when hitting the index page, even in the same session?

    • By cochinoman on January 30, 2010 at 2:48 pm

      All you have to do is clear the cookie "splash" to see the splash page again. So if you want the splash page to start re-appearing again after they read a specific page, you would clear the cookie on that page. After that, they would see the splash page again.

      However, if you only want the splash page to show up ONLY on the index page, this will not work. You might consider setting your WordPress to show a special index page.

      Hope I understood your question correctly. If not, post here again.

  5. By Maor on January 31, 2010 at 7:51 pm

    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?

  6. By Maor on January 31, 2010 at 11:36 pm

    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

  7. By Maor on February 1, 2010 at 6:42 am

    @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

    • By cochinoman on February 1, 2010 at 4:55 pm

      Since the new version of the splash screen does not request anything from the server, there is no way to run any code. It is possible to make a splash page without using JS but not the way it's being done right now. The older version is closer to what you want but it would have to be modified.

  8. By epicure on March 24, 2010 at 7:43 pm

    Thanks for the new version! (And sorry for getting back to you so late.) The overlay feature is great and works like a charm. Thanks!

  9. By Stuart Ryan on April 7, 2010 at 4:30 am

    I have to say, awesome plugin, I actually did not realise there was a new version so ended up writing my own fix for the search engine optimisation.

    Not sure if it will actually help anymore but good for reference I have posted the details on my blog ( http://www.technicalnotebook.com/software-development/wordpress-plugin-splashscreen-seo-fix/ ). The difference is this particular fix still uses a completely separate page and just checks the HTTP User Agent and does not display the splashscreen if certain criteria are met.

    But as I said, AWESOME work and I really am a fan.
    Stuart

  10. By Ernie on April 28, 2010 at 6:48 pm

    I just came upon this plugin and it is exactly what I was looking for. I am not using the splash page in the same sense as you have here (using it to warn of adult content), but I plan to use the splash overlay to play a small introduction .flv instead.

    Thank you, I am very excited for my client!

  11. By Website Managers on June 13, 2010 at 5:46 am

    I see you have been putting a lot of effort into this plugin and appreciate that. Many of the requests that others are making can be found in another plugin called WP-Announcements. You could get some great ideas from that and incorporate your version of them into yours.

  12. By Storm on June 27, 2010 at 10:51 pm

    i got this error plz help

    Fatal error: Call to a member function isAuthorized() on a non-object in /home/chitown/public_html/wp-content/plugins/splashscreen/splashscreen.php on line 92

  13. By mr bang on July 8, 2010 at 10:25 am

    I would like to use the overlay without it centering. I have a longer page and need to show other content below the box.

    • By admin on July 11, 2010 at 9:16 pm

      Are you saying that your splash page is larger than the screen? If so, you can take out the code that tries to center itself or just put it at the top of the page.

  14. By magnus on July 13, 2010 at 10:40 pm

    Yeah this i was looking for! TY for a good job!

    (in splash.htm u r missing a </form>)

  15. By magnus on July 15, 2010 at 1:09 am

    found one problem. when i use share in facebook i get this info text "Splash Screen for WordPress." and not a part of the post as i use too. any way to work around this problem?

    • By admin on July 15, 2010 at 2:41 am

      Sorry to be dense but I didn't understand your question. I'm not super familiar with Facebook but how does the WP plugin come into play with it? Am I missing something here?

  16. By magnus on July 15, 2010 at 3:17 am

    sry i fixed it just removed some lines from splash.htm some header things.

  17. By magnus on July 15, 2010 at 3:19 am

    its when u use one of thoes "share on facebook" buttons it happend.. i will redo it later and post some screenshots for ya.

    • By admin on July 15, 2010 at 1:29 pm

      I think I get it. After the splash screen goes away, are you saying that it re-appears when you click on your "share on facebook" link on your website?

  18. By magnus on July 15, 2010 at 10:18 pm

    nah it wasnt that, its like this:
    http://img31.imageshack.us/img31/3603/splashbp.gif

    OK i have only posted one post after the installations (and no i dint fix it yesterday it only worked 1 time on that post). I will try to do a new post later today and see if its still like this even after i edited the splash.htm

    • By cochinoman on July 24, 2010 at 12:17 pm

      I'm not sure what is causing this to happen. Are you using a plugin to do the "share" button? Or is this inline code in your WP theme? Either way, if you could direct me to the code that is being used, I can take a look.

  19. By BZeg on August 23, 2010 at 4:04 pm

    Hey I love the way this plugin works when it does but I'm having an issue editing the template.

    I am 100 percent sure I'm only editing the text, but for some reason the moment I pull up the adult-template.htm in notepad it breaks it so that clicking "I Agree" just keeps reloading the splash page.

    Using the default template works fine but any changes to the template and I can't get around the splash page.

    Any advice?

  20. By jenn on August 30, 2010 at 2:39 pm

    I'm working on a site that has a banner with mildly adult pictures. is there a way to remove the banner from the splash page, but keep the banner on the rest of the pages?

    thanks!

    • By cochinoman on August 31, 2010 at 1:06 pm

      Why is the banner on the splash page? Just don't include the banner on your splash page template. Or am I not understanding your question.

  21. By Pasin on October 20, 2010 at 7:15 am

    When I setup Wp Super Cache with Splash Screen Plugin, I've a problem. It's seem splash screen not work. Please advise.

  22. By AjR on October 25, 2010 at 6:09 am

    GREAT plugin! I have a question… I used it on this website….

    http://www.aidtohaititoday.org/aidHaiti/

    Do you (or anyone) know how to make the text come up 5 seconds later? Because I have a video playing on my splash page, I want to delay the option of skipping the intro.

    Thanks!

    • By cochinoman on October 25, 2010 at 8:32 pm

      To do that properly, you would need to write some Javascript code. Alternatively, you could use a small flash area where you text would go but that will not work with all platforms and browsers.

  23. By iPhonemod on October 31, 2010 at 11:20 pm

    i'd like to show splash screen every times when i click home (htt://www.mydomaian.net)

    what should i do sir?

    or do u have the method to set cookies expire such 30 min, 1 hr. somethings like that. Thank in advance

    • By cochinoman on November 1, 2010 at 1:27 pm

      If you just want a static page, you can set that at Settings > Reading > Front Page Displays > Static Page, and set to the page you want. You can play around with the cookie but that won't do what you want to do.

  24. By attapon on November 3, 2010 at 2:26 am

    Thank you cochinoman, I got an idea.

  25. By JF on March 27, 2011 at 1:30 am

    Hi!
    First, please excuse my poor english level, I'm not a native english speaker.

    I'm searching for a WordPress plugin that should display a disclaimer that the visitor has to accept before entering in my website.
    Splashscreen is exactly what I'm looking for.

    It seems to work fine (with overlay enabled) except for the indexing on Google. Google seems to have indexed some of my pages but the little description contains the text of the disclaimer and not the actual text of the pages.

    Is this a normal behaviour of the plugin or google bot?

    • By cochinoman on March 27, 2011 at 2:59 pm

      I'm not sure exactly how google bot handles the scan of the overlay and content under the overlay. The site that I use it on does have the content but the picture that comes up when you click on the magnifying glass does not look like the overlay or content.

  26. By boon on March 27, 2011 at 4:26 am

    thanks for great plugin.
    I am not a programmer but asking can use a php cookie code instead of js to avoid the block js problem?

    • By cochinoman on March 27, 2011 at 2:33 pm

      That's a good idea. I'll look into it for my next version. However, I think if the user disables JS, WP probably won't work properly.

  27. By k0th on August 15, 2011 at 7:50 am

    Hi! Great Plugin. :D

    One question, like excluded SplashScreen from index page? Only want to show some pots, can be done?

    Thanks!

    • By cochinoman on August 15, 2011 at 11:40 am

      I'm not sure what you are asking. You want to show the splash screen on your website except the index page? This could be done but it would require a change to the code.

  28. By Steve on August 30, 2011 at 5:23 pm

    This is great, however how can we accomplish 2 things:

    1) Display a Video (that will play automatically or stream immediately after load) instead of text/graphics?

    2) Once the video finishes playing exit/continue/hide the splash-screen altogether and go to the site (as if "Enter" was pressed)?

    Much appreciated!

    • By cochinoman on August 31, 2011 at 2:14 am

      Part 1 is not very difficult to do. All you have to do is replace the text/graphics with the HTML/javascript needed to display the video (e.g. from Youtube).

      However, part 2 is not easy to do. If you knew ahead of time exactly how long the video would take to play, you might be able to fake it with a timer that would automatically remove the splash video screen. However, this method may not work for people with very slow connections.

      The only way to properly do this would be to create a flash file that would display the video then automatically trigger something. I'm not a flash expert so I really don't know if this is even possible.

      I think the timer method is more reasonable to do.

  29. By Steve on September 1, 2011 at 10:09 pm

    Thanks cochinoman!

    On Point 1, I would use a locally hosted .MP4 video file

    On Point 2, The advantage of MP4 is that unlike some other formats it can play for ALL devices (including iPhone/iPad) and the video "ends" once it completes playing, unlike an animated GIF for example which is equally compatible but loops forever. The trick will be to play the video till it ends and then do "something" like load the main page of the site…

    I really need a way to get this done….

    Anyone can help?

    Steve.

  30. By unixunderground on October 1, 2011 at 1:52 pm

    Hi,
    I used this plug-in to display a "non interactive" splash screen on the website I'm setting up..

    I basically needed an image and some text, to show up before the site itself, and then an auto-redirect after 3-4 seconds or something to the site itself and this helped me out well.
    The only problem, is that I was unable to set the autoredirect to the site itself implementing the function that lets the plugin understand that the splash screen has already been showed, and lets the user access the site.

    I don't really know if you understand what I mean, but I'm sure it would pretty easy to modify the code to do so..

    I guess it would take less than a minute for anyone skilled out there.. but I am a sort of beginner into these kind of things… so…

    Since I need this thing for a work site I'm getting paid for, I will be more than happy to give you a 10/20$ donation if you can help me out..

    It would be fantastic if you could email me at sales (at) vaiarelloenterprises.com or at the email I left in the mail comment section.. or even here.

    Thanks in advance,
    Giulio Carlo



Leave a Reply