How to offer code for others to embed your content into their html pages?

Question

Maybe the answer to this question is less complicated than I am making it...

I have a Zend Framework PHP web application. I am going to create a simple API that will output a report for the user's account. The content will be as simple as this:

<ul>
    <li>Item 1</li>
    <li>Item 2</li>
</ul>

I want to offer a code snippet that the user can use to embed the report on their own site.

I'm thinking this can be done with an iFrame, but I've never done this before so I don't know the best way to do this.

Update: If possible, I would also like to offer the ability for the user to style the content. Is that possible with an iFrame? I want the embedded content to look as much like the rest of the page as possible.

Answer 1

At its very simplest:

Create a .js file with:

document.write("<ul>");
document.write("  <li>Item 1</li>");
document.write("  <li>Item 2</li>");
document.write("</ul>");

Your users would then include this code wherever they wanted your embedded code to appear:

<script type="text/javascript" src="http://example.com/path/to/file.js"&gt;&lt;/script&gt;

This approach allows them to style content. They wouldn't be able to style an IFRAME, but some sites providing IFRAMEable widgets solve this by allowing the user to pick colours, background images, etc. on a setup page.

Answer 2

iFrame will work best. An ajax call would work, but you'd have to do what Google does and have them include a src script from your site as well. iFrames are basically div tags that load a page into the content area. They take all the CSS arguments like any other block level element save for the internal content such as font, color, etc.

Answer 3

Ceejayoz & Joe have already covered the 2 basic options, Javascript or IFrame.

If you want to check out some examples, take a look at the StackOverflow flair feature, that does exactly what you are trying to do and allows a user to embed the StackOverflow user info box on their own website.

If you want to see how it's implemented, check out the html which a user would link to with an IFrame, or this Javascript, which the user would call from their page. (see the notes under "how do I use it" on the SO flair page.)

[You need to insert your user number in those links to see the relevant html/js files for yourself.]

In the case of SO, the js/html is generated specifically for each user. For completeness I've included the StackOverflow js/html that achieves this.

JavaScript: You can see when executed this basically writes a script element into the users html page that injects a link to the SO css file into the head. Then it just includes some fairly simple div/span tags which get styled by the css. Obviously, the user could in this case provide their own css instead if they wanted to style it differently.

document.write('
<script>
  var link = document.createElement(\"link\");
  link.href = \"http://stackoverflow.com/content/flair-Default.StackOverflow.css\";
  link.rel = \"stylesheet\";
  link.type = \"text/css\";
  var head = document.getElementsByTagName(\"head\")[0];
  head.appendChild(link);
</script>

<div class=\"valuable-flair\">   
<div class=\"gravatar\">       
  <a title=\"See my profile on Stack Overflow\" target=\"_blank\" href=\"http://stackoverflow.com/users/1/jeff-atwood\"&gt;
    <img src=\"http://www.gravatar.com/avatar/51d623f33f8b83095db84ff35e15dbe8?s=50&amp;amp;d=identicon&amp;amp;r=PG\" height=\"50\" width=\"50\" alt=\"\">
  </a>  
</div>   
<div class=\"userInfo\">        
<span class=\"username\">
  <img src=\"http://sstatic.net/so/favicon.ico\" />
  <a href=\"http://stackoverflow.com/users/1/jeff-atwood\" target=\"_blank\">Jeff Atwood</a>
  <span class=\"mod-flair\" title=\"moderator\">&#9830;</span>
</span>
<br />       
<span class=\"reputation-score\" title=\"reputation score\">16,907</span>        
<br />
<span title=\"5 gold badges\"><span class=\"badge1\">&#9679;</span>
<span class=\"badgecount\">5</span></span><span title=\"55 silver badges\">
<span class=\"badge2\">&#9679;</span><span class=\"badgecount\">55</span></span>
<span title=\"72 bronze badges\"><span class=\"badge3\">&#9679;</span>
<span class=\"badgecount\">72</span></span>\r\n    </div>\r\n</div>'
);

Html - for an IFrame: You can see this is a full HTML document (XHTML actually to be pedantic) that includes everything needed including the link to the css in the head and the content in the body.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;

<html xmlns="http://www.w3.org/1999/xhtml"&gt;
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />    
            <link rel="stylesheet" href="http://sstatic.net/so/flair-Default.StackOverflow.css" />                
</head>

<body>
    <div class="valuable-flair">
    <div class="gravatar">
        <a title="See my profile on Stack Overflow" target="_blank" href="http://stackoverflow.com/users/1/jeff-atwood"&gt;&lt;img src="http://www.gravatar.com/avatar/51d623f33f8b83095db84ff35e15dbe8?s=50&amp;amp;d=identicon&amp;amp;r=PG" height="50" width="50" alt=""></a>
    </div>

    <div class="userInfo">
        <span class="username"><img src="http://sstatic.net/so/favicon.ico" /><a href="http://stackoverflow.com/users/1/jeff-atwood" target="_blank">Jeff Atwood</a><span class="mod-flair" title="moderator">&#9830;</span></span>
        <br />
        <span class="reputation-score" title="reputation score">16,907</span>
        <br />
        <span title="5 gold badges"><span class="badge1">&#9679;</span><span class="badgecount">5</span></span><span title="55 silver badges"><span class="badge2">&#9679;</span><span class="badgecount">55</span></span><span title="72 bronze badges"><span class="badge3">&#9679;</span><span class="badgecount">72</span></span>

    </div>
</div>       
</body>
</html>