Making an information widget for the Drupal site

Recently, a task arose in front of me - to make an information widget for one service that would place it on third-party sites.
Briefly about the service - the site “A smart word for every day” is the first educational resource of this kind. Unknown to the masses words appear every day and make up the largest dictionary of “smart” words in RuNet. Come in everydayword.ru every morning and increase vocabulary.

Before creating the widget, I was faced with the question of how to get the data and in what format. My choice fell on AJAX in conjunction with JSON .

Let's get started

Php

First of all, you need to create a page that will receive an ajax request. Therefore, we declare hook_menu () in the module file and the function in which we will return data:

function mymodule_menu() { $items['output'] = array( 'page callback' => 'mymodule_output', //    'access arguments' => array('access content'), ); return $items; } function mymodule_output() { $data = array( 'title' => t('Your title'), 'body' => t('Your body'), ); drupal_json_output($data); } 

We clean the cache with the help of the Drush " Drush cc all " tool, go to yoursite.ru/output
You should see this text and nothing but {"title":"Your title","body":"Your body"}

Js

Well, like json is formed and given at a specific url, everything is fine, you can start writing js.

 $(document).ready(function () { $.ajax({ url: 'http://yoursite.ru/output', dataType: "json", success: function(data) { console.log(data) } }); }); 

')

Parsing and temporary fixes

Unfortunately, instead of our data in the console, we are waiting for this error:
XMLHttpRequest cannot load yoursite.ru/output. Origin your-test-site.ru is not allowed by Access-Control-Allow-Origin.
You can of course just allow ajax for yoursite.ru domain, but this is not what everyone who wants to install our widget does.
However, the .ajax method has such a setting as crossDomain , but it only works with the jsonp (dataType: 'jsonp') data jsonp (dataType: 'jsonp')
Upgrading our script:

 $(document).ready(function() { $.ajax({ url: 'http://yoursite.ru/output', crossDomain: true, dataType: 'jsonp', success: function(data) { console.log(data) } }); }); 

This is not the end of the story, and we encounter a new error:
Uncaught SyntaxError: Unexpected token :
It turns out the browser connects our page as JS and tries to execute it. Having studied the theory of jQuery.ajax (), we will modernize our code.

The final, working version.

Js

  $.ajax({ url: 'http://yoursite.ru/output?callback=?', crossDomain: true, dataType: 'jsonp', success: function(data) { var code = '<div class="widget-title">' + data.title + '</div>' code += '<div class="widget-body">"' + data.body + '"</div>' $('#widget-content').html(code) } }); }); 

Php

 function mymodule_output() { drupal_add_http_header('Content-Type', 'application/x-javascript'); $data = array( 'title' => t('Your title'), 'body' => t('Your body'), ); $json = drupal_json_encode($data); echo $_GET['callback'] . "($json);"; drupal_exit(); } 

Widget placement

In order to place the widget neobhdimo:

• Connect js file
• Optionally connect a css file with some ready-made styles.
  In the place where you need to display the widget create a div with a specific id