Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <blockquote> <p>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</p> </blockquote> <p>A number of sites make this functionality available via snippets of javascript code, e.g. <a href="http://technicaljobs.ie/widgets/" rel="noreferrer">TechnicalJobs.ie</a>.</p> <p>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.</p> <p><strong>Example</strong></p> <p>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.</p> <p>On your page, tell the user to copy the following javascript in to their page:</p> <pre><code>&lt;script src="http://www.yoursite.com/widgets.asp?action=getNewWidgets" type="text/javascript"&gt;&lt;/script&gt; &lt;script type="text/javascript"&gt; showWidgets('widget-container', 'widget-list'); &lt;/script&gt; </code></pre> <p>On your site, <code>widgets.asp</code> will be responsible for looking up the data on new widgets from your database. It will pull the data together, then output it in <a href="http://json.org/" rel="noreferrer">JSON-encoded</a> 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 <code>showWidgets</code> method, which handles converting your data for display on the user's website.</p> <p><code>widgets.asp</code>'s final output should look something like:</p> <pre><code>// 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 = "&lt;ul class='" + style + "'&gt;"; // Loop through all of the widgets we have, ading to list for (i = 0; i &lt; widgets.length; i++) { html += "&lt;li&gt;&lt;a target='_blank' href='" + widgets[i].url + "'&gt;"; html += widgets[i].title; html += "&lt;/a&gt;&lt;/li&gt;"; } html += "&lt;/ul&gt;"; // 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("&lt;div id='" + container_div + "'&gt;"); document.write(html); document.write("&lt;/div&gt;"); } } </code></pre> <p>Once the user embeds your js code on to their page, the output of <code>widgets.asp</code> 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.</p>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. VO
      singulars
      1. This table or related slice is empty.
    2. VO
      singulars
      1. This table or related slice is empty.
    3. VO
      singulars
      1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload