TeleFinder Internet BBS - Framing Offsite Links

Framing Offsite Links

by: Rusty Tucker, Spider Island Software

I usually don't like frames, so why would I spend time telling people how to put them on their web sites? Easy! I like to keep users in my site even when I want to share some offsite information with them. Here's a useful technique I scavenged from MacWEEK's web site.

MacWEEK is using a CGI ( presumably a C or C++ program ) to frame offsite content, but I'm going to show you how to do it using TeleFinder's Server Side Includes!

A Legitimate Application of Framing Offsite Content

Framing offsite content has gotten a bad rap because its a technique that can be used to violate the copyrights, and commercial advertising rights of the original content creator. The "MacWEEK" frame I'm going to show you is both a navigation tool, and point of reference for that benefit the surfer. The frame will provide the surfer with 100% of the offsite content, including it's native advertising, and provide them with a links that will eliminate the frame, or bring them back to our site. Its a simple and elegant solution.

Here's how it looks when straying away from the MacWEEK site:

click here for larger size

Notice, that at the top of the page there is the "return to MacWEEK" link, and the "Close this frame" link. If I click on the "return to MacWEEK" link, I return to the MacWEEK homepage. The "Close this frame" fills Navigator's window with the ZDNet story, and I'm no longer attached to MacWEEK in any way.

How the Frames Work

The link that initially creates this page is "http://macworld.zdnet.com/cgi-bin/framemaker.cgi?http://www.zdnet.com/zdnn/stories/zdnn_smgraph_display/0,3441,2113048,00.html". That tells us that MacWEEK's "framemaker.cgi" creates this page using the offsite link as the CGI data.

The Frameset

The MacWEEK page is constructed using 2 frames within a frameset. The top frame contains the navigation aids, and the lower frame contains the offsite content. We can see the actual code using Netscape's "View Page Source" option. So let's take a look at it's output.
         
<HTML>
<HEAD>
<TITLE>MacWEEK outlink frame</TITLE>
</HEAD>
         
<FRAMESET ROWS="45,*" COLS="*" FRAMEBORDER="0" FRAMESPACING="0" 
	BORDER=NO MARGINWIDTH="0" MARGINHEIGHT="0"> 
         
<FRAME NAME="smallwin" 
	SRC="topframe.cgi?http://www.zdnet.com/zdnn/stories/zdnn_smgraph_display/0,3441,2113048,00.html" 
	SCROLLING="NO" NORESIZE> 
         
<FRAME NAME="bigwin" 
	SRC="http://www.zdnet.com/zdnn/stories/zdnn_smgraph_display/0,3441,2113048,00.html" 
	SCROLLING="AUTO" NORESIZE> 
         
</FRAMESET> 
         
</HTML>
                
As you can see, this HTML is pretty straight forward. Create a page consisting of 2 frames, the top frame ( the navigation links ) is 45 rows high, "size of window" wide, filled with content from MacWEEK's "topframe.cgi" program. The lower frame is the offsite content, in this case it is :
"http://www.zdnet.com/zdnn/stories/zdnn_smgraph_display/0,3441,2113048,00.html". 
We're not concerned with how ZDNet's news page right now, any link will do here. In fact, we want to generalize this part of the page so that we don't have to make a frame page for each offsite link.
The Navigation Frame

This is the content of the Navigation Frame. This is interesting because it will show us how to close the frame, and return to our own content.
<HTML>
<HEAD>
   <TITLE>back to MacWEEK</TITLE>
</HEAD>
         
<BODY bgcolor="FFFFFF">
         
<A HREF="http://www.macweek.com" TARGET="_top">
	<IMG SRC="http://www.zdnet.com/macweek/offlinks/macback.gif" 
		ALIGN="left" WIDTH="75" HEIGHT="31" BORDER="0" HSPACE="0" VSPACE="0"></A>
<P ALIGN="right">
         
<A HREF="http://www.zdnet.com/zdnn/stories/zdnn_smgraph_display/0,3441,2113048,00.html" 
	TARGET="_top">Close this frame</A>
</P>
         
</BODY>
</HTML>
         
Either of these links will destroy the framing due to their use of the "TARGET" attribute in the Anchor tag. MacWEEK is using the special target name "_top". This directs the browser to load the URL into the full parent window, rather than into the enclosing frame.

Building it in Server Side Include

OK, now that we understand the HTML tricks, lets apply an Server Side Include solution to this.

Server Side Include is a great tool for building dynamic pages, and is a low overhead substitute for CGI. MacWEEK's solution was to use CGI, we're going to use SSI. The even bigger payoff is that we'll end up with something you can take home and adapt to your own needs! Lets jump into the code.

Instead of "framemaker.cgi" we'll use "outlink.spml" and put in it a combination of HTML and SSI that will dynamically create the frameset and SRC the frames with the appropriate URLs. We'll also replace "topframe.cgi" with a page called "topframe.spml". It's going to create the frame-busting navigation links.

outlink.spml

You may be surprised at how simple this is!
<HTML>
<HEAD>
<TITLE>TeleFinder Outlink Frame</TITLE>
</HEAD>
         
<FRAMESET ROWS="50 ,*" COLS="*" FRAMEBORDER="0" 
	FRAMESPACING="0" BORDER=NO MARGINWIDTH="0" MARGINHEIGHT="0"> 
         
       <FRAME NAME="smallwin" 
       		 SRC="http://www.spiderisland.com/topframe.spml$"  
                		SCROLLING="NO" NORESIZE> 
         
       <FRAME NAME="bigwin" 
       		 SRC=""  
                		SCROLLING="AUTO" NORESIZE> 
         
</FRAMESET> 
         
</HTML>
                  
Looks very similar to the output of the CGI right? It should, there's just a few of changes.

I increased the height of the navigation bar from 45 rows to 50 because our link back GIF is a little bigger.

I replaced the references to the offsite URLs with the SSI code: .

I replaced the references to topframe.cgi with a link to our SSI page topframe.spml.

I've highlighted the changes above.
PATH_ARGS is an SSI variable that contains the "Extra Path" data passed to a CGI ( or SSI page ) in the referencing URL. On Macintosh Servers, its the part of the URL that is after the $.
So if I want to frame Apple's Web site in my outlink frame, I'd put a URL like this in one of my pages:
http://www.spiderisland.com/outlink.spml$http://www.apple.com

topframe.spml

Now, lets deal with the frame-busting navigation page. It needs to know the URLs of 2 locations:

Where you came from ( the Referring Page )

The offsite page.

We've already seen how to find the offsite page via the PATH_ARGS variable. In fact outlink.spml is explicitly passing it to topframe.spml for this very reason. The Referring page can be found through the REFERRER (sic) variable.
Here's the code, again very simple.
<HTML>
<HEAD>
   <TITLE>back to Spider Island</TITLE>
</HEAD>
         
<BODY bgcolor="FFFFFF">
         
<A HREF="" TARGET="_top">
	<IMG SRC="http://www.spiderisland.com/si_gifs/homeplz.gif" 
         	ALIGN="left" width="88" height="43" BORDER="0" HSPACE="0" VSPACE="0"
	ALT="Home Please" ></A>
         
<P ALIGN="right">
         
<A HREF="" 
	TARGET="_top">Close this frame</A>
</P>
         
</BODY>
</HTML>
             
The changes here are

I put my own "Home Please" gif in the back link.

The back link references the referring page using the REFERRER variable.

I replaced the references to the offsite URLs with the SSI code: .

I've highlighted these changes above.

Wrapping Up

I've broken down a technique using CGI from MacWEEK's web site, and reproduced it using simple Server Side Include technology.

The net result is adaptable code you can use on your own web site, and apply to your specific needs.

Using Server Side Include also results in a more stable server since you have fewer processes running, and higher performance since there is no "CGI overheard."

References

TeleFinder's Server Side Include documentation.
MacWEEK's Quick Links, where they use the framing techniques described here.
The World Wide Web Consortium's Specification for Frames in HTML.
HTML Sourcebook, 2nd Edition: A complete guide to HTML 3.0. by Ian