Best technology to allow consumers of my website to incorporate dynamic data into their website

Question

What I am asking, is what is the best way (i.e. the way that is easiest for neophyte web developers) to consume/integrate data that I make available on my website, into their own website.

I have a website written in asp.net/sql server back end.

I have clients that would like to be able to incorporate selections of data (say for example a table of data and some images that varies in length and is different for each user) into their website, so that the data looks like it belongs to them, and is branded by them (ideally the data would come to them with default css formatting, but they could customizing as much as they want). When the data on my website changes, the data on their website needs to change.

I'd like the user of my data to come to my website, login, and then be able to " copy" a customized script/code from my website, paste it into theirs and then just have it work, no matter what their website is written in (i.e. pure html, php, asp.net or others).

I am assuming that a some sort of javascript script would be the best way to go, but I am at a loss as to how to make this completely simple for the user and what the script might contain (javascript is not my strong point yet). I.e. can I get a javascript on a clients website call a asp.net script on my server and then stream HTML back to their website..

I am sure there must be examples of this done elsewhere, can someone point me in the right direction?

EDIT: Let me try to give a better example of what I am trying to do.

My app is not a real-estate app, but lets assume it us (pretend realtor.com the MLS database). Now every realtor in the country has their own website, and they are written in all kinds of languages so I can't assume anything about the consumer of the data, nor can I assume they have any programming expertise.

If I was realtor.com owner, I'd like every realtor to be able to come to my website, copy a snippet of code (like I said, perhaps some javascript but I am not sure), go back to their website and paste it into the source of their page and then when one of their users goes to "Joesrealty.com" and clicks on "Show all properties for sale" the script/code/page would actually pull html down from my site by executing something on my website (realtor.com) and retrieve a list of all properties that that agent had for sale (say a table with accompanying picture).

I know I saw a great implementation of this somewhere on a big name site, but for the life of me can't remember where I saw it, and never bothered at the time to try and see what technology they used.

Answer 1

Your list of requirements seem to be pretty broad.

I was going to suggest building some kind of RESTful Web Service, through which users could consume your data in what ever format is most appropriate. This could be XML or JSON if they have the capability to parse that, or if they just want to embed an iframe in their page it could return plain HTML.

Take a look at some of Yahoo's Web Services and get an idea of how they do things:

http://developer.yahoo.com/

Answer 2

You could expose a web service that they could call. Creating a web service in asp.net is very simple to do.

You can make methods for different data elements you want to expose, and the customer can call the service with any params you make available in the method for them to further filter the data as needed.

Answer 3

Any kind of web service requires programming on the consumer-side, so that's not an option for you. What you are trying to do is generally done with Javascript. Take a look at what Amazon offers for associate sites, Technorati, .... there are many other examples.

The way it works - your client includes a javascript file from your site, which would then execute as part of the page rendering in the browser, and you can include your content into the resulting output stream. It is important to understand that you have to serve the script. Browsers prevent cross-site scripting because of potential security risks. For instance, in order to include Amazon's search widget, you only need to put the following code into your page (I removed the query string parameters for clarity):

<SCRIPT charset="utf-8" type="text/javascript" 
        src="http://ws.amazon.com/widgets/q?..."&gt;
</SCRIPT> 
<NOSCRIPT>
<A HREF="http://ws.amazon.com/widgets/q?..."&gt;
        Amazon.com Widgets</A>
</NOSCRIPT>

If a browser does not have Java script enabled, it only shows a link. You can wrap DIV tags around this to control the size of your widget. Your only other option is an <IFRAME>.

Answer 4

I have clients that would like to be able to incorporate selections of data (...) into their website, so that the data looks like it belongs to them, and is branded by them

A number of sites make this functionality available via snippets of javascript code, e.g. TechnicalJobs.ie.

The user pastes some javascript code in to their page. This code calls back to your website to pull the most recent data, then displays it on the client's website.

Example

We can send back an unstyled list of new widgets, and allow the user to style the css to tweak the display on their site.

On your page, tell the user to copy the following javascript in to their page:

<script src="http://www.yoursite.com/widgets.asp?action=getNewWidgets"
   type="text/javascript"></script>

<script type="text/javascript">
   showWidgets('widget-container', 'widget-list');
</script>

On your site, widgets.asp will be responsible for looking up the data on new widgets from your database. It will pull the data together, then output it in JSON-encoded format. The logic is all handled in ASP or your language of choice, and outputted in the format outlined below. This page will also return the showWidgets method, which handles converting your data for display on the user's website.

widgets.asp's final output should look something like:

// Widget product data 
var widgets = [
     {
       "url":"http:\/\/www.yoursite.com\/widgets\/foo-widget",
       "title":"Brand new Foo Widget, available now!"
     },
     {
       // More widget details..
     }
];

// Function to display list of widgets on calling page    
function showWidgets(container_div, style)
{
    // Start building the html for the list
    var html = "<ul class='" + style + "'>";

    // Loop through all of the widgets we have, ading to list
    for (i = 0; i < widgets.length; i++)
    {
        html += "<li><a target='_blank' href='" + widgets[i].url + "'>";
        html += widgets[i].title;
        html += "</a></li>";
    }
    html += "</ul>";

    // We have the html, now write to the container  
    // If the user hasn't created this already, we'll make it      
    if (document.getElementById(container_div))
    {
        document.getElementById(container_div).innerHTML = html;    
    }
    else
    {
        // Target div wasn't made by user, create it inline
        document.write("<div id='" + container_div + "'>");
        document.write(html);
        document.write("</div>");
    }
}

Once the user embeds your js code on to their page, the output of widgets.asp will take care of writing out the recent data. You can specify styles etc, or leave this all up to the end user to style it in accordance with the rest of their website.

Answer 5

Create a URL that can generate response in different formats based on a parameter or content-accept-header; I'd recommend HTML, XML and JSON. HTML for clients that want to use a IFRAME or have a Javascript do a document.write, XML and JSON for clients that want to process the data before outputting it, either with client-side Javascript or serverside using whatever language they're using. You can create a Javascript for your clients to use that fetches the HTML and does a document.write as well as include some default css.