Written by:
6/7/2009 1:20 PM 

I'm currently building a community portal for 6 small towns. This portal will be utilizing quite a bit of external content and resources. Providing RSS feeds in the news section of this portal presented a problem for me in that RSS feeds traditionally link to the source site of the feed. While netiquette tells us this is the correct way of doing things why would I want to provide a tool to send my visitors away from my site?  I don't want to steal content but I don't want to lose my visitors either. Surely there has to be a good compromise somewhere in the middle. Some people solve this problem by opening the link in a new window. My problem with that is a large percentage of my users are barely computer literate and will probably not even know they have opened a new window. When I asked my mother the other day why she had so many tabs opened in Firefox she said "What tabs?"


First Lesson Learned - Newer Isn't Always Better

Even though I already had three or four open source DNN RSS modules as well as Xmod RSS Reader I had heard good things about a new RSS module in different forums and went to snowcovered to investigate. There I found my solution - this new module used an iframe lightbox script. So when you click on a headline the source site opens in a new window with your site greyed out in the background.  I bought the module. After testing the module I learned that it wouldn't work inside of my Tab Aggregator module.  I also learned that the shadowbox.js lightbox script is uses, while being one of the best most full featured lightbox scripts available, had major issues with all the DNN skins I tested it on except for one when viewed in IE. Time to dust off Xmod RSS Reader.

The above page, still under construction, shows my Xmod RSS/iframe lightbox solution.

Xmod RSS Reader with Lytebox.js

After the disappointing experience with my new RSS module I decided to add an iframe lightbox script to the Xmod RSS Reader module. So next I needed to find a lighbox script that had iframe capabilities. Many lightbox scripts such as thickbox do not have this ability. Also, the Shadowbox.js script used in the other module was a stand alone script. Meaning it didn't require any other javascript frameworks (such as jquery) to work. Which I liked. I finally narrowed my search down to Lytebox.js - http://www.dolem.com/lytebox/

The steps to make this work are as follows:

• Download the lytebox.js script from the site above
• Upload the script to the root folder of your site
• Open the DNN page settings of the page where you want to place the Xmod RSS Reader. Click on Advanced Settings and in the Page Header Tags text box add the following
  • <script type="text/javascript" language="javascript" src="/portals/0/lytebox/lytebox.js"></script>
    <link rel="stylesheet" href="/portals/0/lytebox/lytebox.css" type="text/css" media="screen" />
    
• Make sure the paths in the above code point to where you have stored lytebox
• Next we need to modify the Xmod RSS Reader template so that the link includes the following:
  • rel="lyteframe" rev="width: 970px; height: 425px; scrolling: yes;"
• Example of entire link:
  • <a href="<xmod:field name="ItemLink"/>" rel="lyteframe" rev="width: 970px; height: 500px; scrolling: yes;><xmod:field name="ItemTitle" class="NormalBold"/></a>

That's it! Now your headline links will open up in an iframe lighbox. One interesting thing I found is that iframe lightbox scripts tend to break some of the framebuster scripts that sites are using now such as CNN.com.

More Options

The iframe lightbox works great for reading the full article of an RSS feed but I found it a little lacking if I wanted to surf around in the source site. In order to give my visitors more options I elected to include a clickable logo to the home page of the source site at the beginning of the feed. I figure the source sites will appreciate this as well. But I still needed to overcome the original problem of sending my visitors away from my site. So I made the link to the home page open in a new sized window.  Opening the link in a window that is smaller than the parent window allows the less than computer savy visitors to understand that they haven't left my site. They can still click the mazimize button or resize the window by dragging it.

The steps to make this work are as follows:

• Open the DNN module settings for the Xmod RSS module (or in my case, since I was placing the module inside a Tab Aggregator module I used the TA module instead) and click on Advanced Settings. Then place the following code into the header section:
  • <script>
    <!--
    function wopen(url, name, w, h)
    {
    // Fudge factors for window decoration space.
     // In my tests these work well on all platforms & browsers.
    w += 32;
    h += 96;
     var win = window.open(url,
      name,
      'width=' + w + ', height=' + h + ', ' +
      'location=yes, menubar=no, ' +
      'status=yes, toolbar=yes, scrollbars=yes, resizable=yes');
     win.resizeTo(w, h);
     win.focus();
    }
    // -->
    </script>
• You then need to call the above javascript from your link like this:
  • <a href='javascript:void(0)' target="_blank" onClick="wopen('http://www.daytondailynews.com', 'popup', 640, 480); return false;"><img border="0" alt="" src="/Portals/0/Pages/News/DDN.jpg" /></a>

So that's what I've done to provide RSS feeds to my visitors without sending them away from my site. At the beginning of this post I mentioned that this community portal was going to be utilizing a large amount of external content and resources. I've learned quite a bit about DNN aggregation tools in this process. That will be the subject of my next blog post.

Trackback Print

Tags:

Categories:

Location: Blogs Greg Brown