Drupal: Cross-domain Widgets

erich April 3rd, 2008

drupal1.pngDrupal is incredibly flexible, but in current versions, lacks the ability to export content easily in the form of widgets. However, the Services module gives you that flexibility in a very easy to use manner.

Services allows you to expose pieces of your Drupal site, such as user, node, and views methods. Combine this with the integration of AMFPHP, you can build some extremely fast Flash and Flex widgets that display dynamic data and can be embedded on any website.

However, there is a catch.

I was working with another developer on a Facebook application that displayed my Flex widget, and it seems that in Facebook, you have to provide a static image for the user to click on in order to active the flash. This is clunky, and not the ideal solution for me.

Another option was to attempt to create cross-domain javascript widgets. I looked at JSON Server, which is a Services wrapper that returns data in JSON. This module worked great on the same domain, but failed on cross-domain calls. The reason why is that the module only accepts POST requests.

I ended up patching the module to accept GET requests structured in the following manner:

PLAIN TEXT
JavaScript:
  1. function get(){
  2.   headElement = document.getElementsByTagName("head").item(0);
  3.   var script = document.createElement("script");
  4.   script.setAttribute("type", "text/javascript");
  5.   // The callback parameter is needed so that the JSON gets returned correctly in order to be handled by the output function
  6.   script.setAttribute("src","http://server.com/services/json?method=views.getView&view_name=some_view&callback=display");
  7.   headElement.appendChild(script);
  8. }
  9.  
  10. function display(obj){
  11.   var theDiv = document.createElement("div");
  12.   theDiv.innerHTML = obj.data;
  13.   document.body.appendChild(theDiv);
  14. }

You'll note that I am doing script tag inserts into the head of the calling website. The script source is set to the path of my JSON server, with the services method as a parameter. The services method takes arguments, which differ depending on the service you are calling. In the case of the Views.getView service, you have to supply the name of the view to call.

The last parameter specifies the name of your output function. My patch takes this callback and wraps the JSON-formatted data returned by the service with the name of the callback. The callback is extremely important, as the JSON sent back by the server acts as a call to your defined callback function. From there, your callback function can display the data however it chooses.

Implementation of this method on a remote site is very easy:

PLAIN TEXT
JavaScript:
  1. <script type="text/javascript" src="http://server.com/path/to/javascript.js"></script>
  2. <script type="text/javascript">get();</script>

For my widget, I created a custom service that returned the output of a theme() function to render the widget template. This html output was then displayed by my JSON callback function.

Using the Services and (patched) JSON Server modules for Drupal, you can quite easily set up cross-domain javascript/html widgets that can be embedded anywhere.

tags: , , , , , , , , ,

Related:

Trackback URI | Comments RSS

Leave a Reply

You must be logged in to post a comment.