Home » Scriptalicious Blog » Guides » Using SEO Tools in a Popup, Lightbox or IFRAME

Scriptalicious Blog

Using SEO Tools in a Popup, Lightbox or IFRAME

Posted 2012-07-21 in Guides

Scriptalicious Blog

Have you ever wanted to add tools from SEO Scripts to a popup window or another web page? This guide shows you how to add SEO tools from your SEO Scripts powered website to an IFRAME, popup window or even a fancy lightbox modal window.

In this guide we'll explain how to customize your SEO Scripts installation to use individual SEO tools without the full template and navigation. Then we'll show a few examples of how to use individual tools via an IFRAME, lightbox window with GreyBox, or a simple JavaScript popup window.

Give it a test run with the Link Analyzer tool. As you can see we get a nice, clean lightbox window that lets us use the tool without even leaving the page!

SEO Scripts in GreyBox
Using SEO Scripts w/ GreyBox

This guide requires a basic knowledge of PHP/CSS/HTML, an FTP client and text editor. If you aren't comfortable editing PHP files on your website, or just don't have the time, you can contact us to have a professional handle the customizations.

Requirements

This guide requires the following:

  1. SEO Scripts or SEO Scripts Pro license
  2. An FTP Client (like Filezilla)
  3. A ZIP utility (like 7-Zip)
  4. An IDE or text editor for modifying PHP & HTML files
  5. Knowledge of making basic changes to PHP/HTML files

Before getting started, always backup your website files before making any changes.

1. Create New Form View

The first step is create a new view for our tools that lets us use individual tools without displaying the full template.

In order to do this, we need to add a new layout template file, and make a few code changes to configure SEO Scripts to support the new view.

Download the new layout_form.tpl file below (right-click and "Save As"):

  layout_form.zip

The file is in ZIP format, so you must first unzip the file to your computer.

Now, upload the file layout_form.tpl to the template folder on your SEO Scripts website. By default this is /tpl/seo/.

Once the new layout file is uploaded to your template directory, you can make the necessary code changes.

Open the file /modules/seoscripts/config.php in your favorite code editor.

Find the following code (around line 41):

$kApp->registerView('seoscripts_shorturl', $cfg->getVar('seoscripts_urlformat_shorturl'), array('m' => 'seoscripts', 'v' => 'shorturl'), 1);

Directly after this line, add the following code:

$kApp->registerView('seoscripts_toolform', 'form/' . $cfg->getVar('seoscripts_urlformat_tool'), array('m' => 'seoscripts', 'v' => 'tool', 'k_layout' => 'form'), 1);

Save and close the file.

Now, open the file /index.php. Find the following line of code (around line 128):

$k_this_view = $kApp->getView($k_this_view);

Directly before this line of code, add the following:

if(!empty($k_this_urlvars['k_layout'])) $cfg->setVar('k_layout', $k_this_urlvars['k_layout']);

Save and close the file.

Now our view should be active. Test it out by visiting one of your tools with the new URL format, for example:

http://www.example.com/form/tools/backlink-checker/

Now, whenever we add "form/" to any of our tool URLs, it shows a completely bare version of the tool!

2. Implementing an IFRAME

An IFRAME lets you embed a web page within another page. This makes it easy to add a tool to almost any other page on your website.

An IFRAME implementation would use the standard IFRAME syntax and call your tool's URL as the SRC attribute:

<iframe src="http://www.example.com/form/tools/backlink-checker/">></iframe>

You can style your IFRAME with CSS. Of course, embedding a single tool in another page isn't the coolest thing we can do with this new view.

3. Implementing a Lightbox Window With GreyBox

Using the free JS popup window called GreyBox, you can load any web page or image in a slick popup modal window without leaving the page you're on.

You can follow the instructions on GreyBox to install GB on your website.

Once installed on any web site, you can just use the special URL format to load up your SEO tools with our new view:

<a rel="gb_page_center[500, 500]" href="http://www.example.com/form/tools/backlink-checker/">backlink checker</a>

The code above loads up the backlink checker tool in a 500x500 window in the center of the page.

4. Implementing a Classic JS Popup Window

Another option for popups that doesn't require GreyBox is a classic JS popup window. Using some basic JavaScript, we can call window.open() to open up a new browser window of a specified size showing our SEO tool. This is one of the clumsier implementations, because the window size and formatting are difficult to control. However, it's easy and can be used anywhere:

<a onclick="window.open('http://www.example.com/form/tools/backlink-checker/','Backlink Checker','width=500,height=300,top=100,left=200,scrollbars=yes')" href="#">backlink checker</a>

The code example above opens up the backlink checker tool using our custom view in a 500x300 popup window. window.open() accepts several different parameters to customize the window.

That about wraps this guide up! Once you have completed this guide, you should know the steps necessary to create and implement a new view for tools in SEO Scripts.





 


Search



Subscribe


Subscribe via RSS

Stay current with Scriptalicious news and subscribe in your favorite RSS reader.

Subscribe by RSS

Subscribe via Email

Get the latest Scriptalicious news delivered to your inbox.




77 powerful SEO scripts for under $100.

Real-time Backlink Rank Checker script.


Scriptalicious is in no way affiliated with myspace.com® or Google®. Google, PageRank™ and MySpace are the trademarks of their owners.