How to Install PagePeel in WordPress

The pagepeel or sometimes called peel away or some other name, is that interesting feature you see usually located in the upper right corner of a webpage in a lot of websites. This serves usually as a clickable link to an advertised product.

SHARE to your FRIENDS by CLICKING HERE:

The moment I saw those pageears in some leading websites, I immediately reacted with “I want those in my site too”. I immediately searched out for codes or plugins related to this. I found a lot of commercial ones but I also found some free versions which are as good as the commercial ones. When I started tinkering with it, I have to search out in google the “how to install pagepeel in wordpress” phrase because the instructions in the download page were still fuzzy to me. In the end, after collecting several tips from all over, I sat down to experiment with it myself.

The pagepeel as it appears on test.moralde.com
The pagepeel as it appears on test.moralde.com

First, I just simply followed the instructions which came with the downloaded zip file. Eventually I had to resort to trial and error to get the thing to work.

How to Install PagePeel In WordPress: The Procedures

  1. After downloading the pagepeel (also known as pageear or peel away) zip file, I unzipped it into my harddisk. (Note: The download link is given at the end of this article).
  2. Since I was just in the testing phase, I left the 2 image files as they are. That is, I used them uneditted. The images remained uneditted to this day in the test site i put them in.
  3. I editted the pageear.js file using wordpad. I could have used Dreamweaver to make things easier and quicker, but I was in the mood for taking the long hard way at the moment. The following lines were the ones changed into its present form:
    • var pagearSmallImg = ‘http://www.test.moralde.com/pagepeel/pageear_s.jpg’;
    • var pagearSmallSwf = ‘http://www.test.moralde.com/pagepeel/pageear_s.swf’;
    • var pagearBigImg = ‘http://www.test.moralde.com/pagepeel/pageear_b.jpg’;
    • var pagearBigSwf = ‘http://www.test.moralde.com/pagepeel/pageear_b.swf’;
    • var jumpTo = ‘http://www.moralde.com/’;
    • var openOnLoad = 1;
    • var closeOnLoad = 1;
    • var setDirection = ‘lt’;

    The first 4 variables are just references to the necessary files. The jumpTo variable points to the page you want the visitor to go after clicking on the pagepeel. The ‘1’ in openOnLoad tells it to automatically open pagepeel 1 second after loading, and closeOnLoad closes it 1 second afterwards. This way, the visitor can’t help but notice it, yet it happens just long enough not to annoy him/her. The setDirection’s ‘lt’ value is something you don’t see very often. Most websites set this to ‘rt’ to install pagepeel in the usual upper-right most corner of the page. Just for the heck of it, I placed it in the upper-left most corner.

  4. I then uploaded pageear.js, AC_OETags.js and the 2 image files into the test subdomain I created just for this, under a folder I called ‘pagepeel’. Thus the files are now located in ‘http://www.test.moralde.com/pagepeel/’.
  5. Then I accessed my test site’s wordpress admin page and editted the theme’s header.php and footer.php (e.g. click on the ‘Editor’ link under the ‘Appearance’ box and click on ‘Header(header.php) to display its code).In the header.php file, I located the <body> tag and inserted the following code lines right before it:

    <script src="http://www.test.moralde.com/pagepeel/AC_OETags.js">
       language="javascript"></script>
    <script src="http://www.test.moralde.com/pagepeel/pageear.js" 
       type="text/javascript"></script>

    In the footer.php file, I located the closing </body> tag and inserted the following codes right before it:

    <script type="text/javascript">
    writeObjects();
    </script>

That’s it!

Now, why is this pagepeel feature not installed in this site? I had installed it in my test subdomain, obviously for testing purposes and I have not installed it here because I have yet to make further tweakings to make it work the way I want it to. Perhaps some knowledgeable folks out there can help me here. I tried “openOnLoad = ‘false’;”, no joy; “openOnLoad = ‘off’;”, doesn’t work either. The present setup opens and closes automatically in the onLoad event. But I prefer to not let it do that because I believe this only looks impressive for first time visitors but irritating to returning or frequent visitors. The solution is probably very simple. But as I’m not so well-versed in PHP, it might take some time for me to figure this out, but I will.

Although this particular article is not as good as I want it to be, this is the kind of article format and content I would have wanted to see when I first searched for “how to install pagepeel in wordpress”. Like I said, being not so php savvy, I need to be given all the steps to take, not just given clues like I’m some algebra freshman.

Get the pagepeel files here.

SHARE to your FRIENDS by CLICKING HERE:

3 thoughts on “How to Install PagePeel in WordPress”

Comments are closed.