Work at SourceForge, help us to make it a better place! We have an immediate need for a Support Technician in our San Francisco or Denver office.

Close

How-To

Brendan Riordan-Butterworth

These files are of note:

File Details
./src/js The Javascript files required to be hosted on a CDN. This includes both the host source files and the external side source files.
./src/html This holds the external boodstrap document that SafeFrames render the ad into. This file MUST be located in a different domain than the publisher site to benefit from the IFrame jail domain behavior SafeFrames provides. For testing purposes your dev can use the same domain.
./tests Included here are many sample documents that demonstrate how SafeFrames can be implemented. These should serve as a rough guide to embedding SafeFrames in your site.

sample2_sf_explicit_boot.html

This sample demonstrates the simplest implementation of SafeFrames. There are three ad areas - one with literal HTML, one with a script file that serves the ad, and one that references a URL to a file that renders the ad. At the bottom is the basic configuration code required by SafeFrames.

singleVendorAd.html

This sample embeds an ad that utilizes the various features of the external side of the SafeFrames API, like ad expansion and tests for viewability.

script_testing_index.html

This sample shows how SafeFrame ads can be rendered without using SafeFrame tags, but instead just having a defined region for the ad and utilizing Javascript to initialize the SafeFrame ad region.

Adding SafeFrames to your site

1. Host Resources

Place all files from "./src" directory on a website hosted on an external domain from the publisher site.

2. Update Script-Includes

Add the SafeFrame source script tags to your site pages. This package does not include a final optimized and minified version of the framework, so you need these three script includes:

<script type="text/javascript" src="http://mycdn.com/sf/src/js/lib/base.js"></script>
<script type="text/javascript" src="http://mycdn.com/sf/src/js/host/host.js"></script>
<script type="text/javascript" src="http://mycdn.com/sf/src/js/lib/boot.js"></script>

3. Update Specific Elements

Identify the html element where ads will be rendered. Know that this element is replaced by the SafeFrame - not rendered into. Any formatting of this element will be lost.

<div id="tgtLREC"></div>

4. Add Script

Add script to the publisher page that configures and boots the SafeFrame ads.

(function() {
    var conf    = new $sf.host.Config({
        renderFile:        "http://mycdn.com/sf/src/html/r.html",
        positions:
        {
            "LREC":
            {
                id:      "LREC",
                dest:    "tgtLREC",
                w:       300,
                h:       250
            }
        }
    });

    var posMeta        = new $sf.host.PosMeta(null,"rmx",{foo:"bar",bar:"foo"});
    var pos            = new $sf.host.Position("LREC", "<h1>Hello World</h1>", posMeta);

    $sf.host.render(pos);
})();

Related

Wiki: Home