Best Technology To Allow Consumers Of My Website To Incorporate Dynamic Data Into Their Website

May 25, 2023 Post a Comment

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 w

Solution 1:

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.

Solution 2:

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/

Baca Juga

Solution 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?...">
</SCRIPT> 
<NOSCRIPT>
<A HREF="http://ws.amazon.com/widgets/q?...">
        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>.

Solution 4:

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.

Solution 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.

JavaScript File