TON Widgets are JavaScript components that you can drop into any page on your website to deliver content from the Total Outdoor Network system and also provide interactive features.

TON Widgets are delivered via the TONClient API.

The following is an example of a simple widget delivery:

<!--Code to Deliver a sample Widget -->  <script type="text/javascript" src="http://embed.totaloutdoornetwork.com/tonloader.js"/> <script type="text/javascript">    TONClient.init("this-is-my-key");    TONClient.getWidget("MyCoolWidget"); </script>

There are 3 primary parts to getting a widget:

1.  Initialize the tonloader.js code with a script tag.   This downloads the TONClient plus initializes the prototype library on the end-users machine if your page does not implement it.

2.  Initializing the TONClient by sending in your API Key

3.  Retrieve your widget by calling TONClient.getWidget and sending in the widget name: (in this case "MyCoolWidget")

That's it! - If this widget delivers a list of articles, it will automatically do so.

TON Embed Reference

TONClient.init

Parameters:
  ApiKey:  Your API Key
  options:  Additional Options in JSON Format

Options:
  noStyles:   Set noStyles to true to tell the TONClient not to deliver the TONEmbed CSS Stylesheet.  Do this if you wish to use your own styles

<!--Code to Deliver a sample Widget without a stylesheet -->  <script type="text/javascript" src="http://embed.totaloutdoornetwork.com/tonloader.js"/> <script type="text/javascript">    TONClient.init("this-is-my-key",{noStyles:true});    TONClient.getWidget("MyCoolWidget"); </script>

TONClient.getWidget

Parameters:
  widgetName:  The name of the widget you are getting
  options:  Additional Options in JSON Format for the widget.   These options are normally dependent on the widget - 

<!--Code to Deliver a sample Widget with options -->  <script type="text/javascript" src="http://embed.totaloutdoornetwork.com/tonloader.js"/> <script type="text/javascript">    TONClient.init("this-is-my-key",{noStyles:true});    TONClient.getWidget("MyCoolWidget",{site:"fbo",channel:"fishing"}); </script>

Specifying the Target Div
By default, the getWidget method will create a div element in line at the place the script code is placed in the HTML Document.  You can override this behavior by specifying the targetDiv
option

<!--Code to Deliver a sample Widget to a div that already exists in the document --> <p>Here is some text</p> <div id="myDivId">  The widget will show up here </div>  <script type="text/javascript" src="http://embed.totaloutdoornetwork.com/tonloader.js"/> <script type="text/javascript">    TONClient.init("this-is-my-key",{noStyles:true});    TONClient.getWidget("MyCoolWidget",{targetDiv:"myDivId",site:"fbo",channel:"fishing"}); </script>

TONClient._callApi

Parameters:
  method:  The TON Api Method Name you are calling -  See the TON 2.00 API Reference
  options:  Additional Options in JSON Format for the api call
  jsonCallback:  the callback function that will be executed by the API.  This function MUST have a parameter named jsonData.  See Working with the JSON Response for more details.

<!--Code to call the TON Api Directly.  This code calls the api method to get recent articles, sends params to tell it to grab articles from FishingBuddy and in the fishing channel.  The function myCoolFunction will be executed-->  <script type="text/javascript" src="http://embed.totaloutdoornetwork.com/tonloader.js"/> <script type="text/javascript">    TONClient.init("this-is-my-key");    TONClient._callApi("ton.articles.getRecent",{site:"fbo",channel:"fishing"},"myCoolFunction(jsonData)");   function myCoolFunction(jsonData) {   //Once the API Is executed, this function will be called.  //DO SOMETHING HERE WITH jsonData!!!! } </script>

TON Widget Reference

The VideoList widget delivers a list of videos

Options Reference

  The category selection options mirror those in the TON Api for ton.videos.getRecent - See the category reference page for more details

  targetDiv:  The id of the target div to deliver the widget to.  Leave blank to have the getWidget method create the div automatically, in-line to where the script was executed from.
  site:  The site code to pull content from - defaults to All Sites
  channel:  the channel to pull from
  category:  The category
  sub_category:  The sub category
  special_series: The special series to get videos from
  place: The place/region/geo to pull videos from
  owner:  Pull videos for a specific TON Member (owner)
  q: Pull videos based on a query
  tags: Pull videos with the specified tags (comma separated list)

<!--Code to Deliver the VideoList widget. This example delivers a list of videos in the hunting channel -->  <script type="text/javascript" src="http://embed.totaloutdoornetwork.com/tonloader.js"/> <script type="text/javascript">    TONClient.init("this-is-my-key");    TONClient.getWidget("VideoList",{channel:"hunting"}); </script>

The ReportList widget delivers a list of reports.  These are either hunting or fishing reports, but as the TON 2.0 reports back-end grows this could include other report types

Options Reference

  The category selection options mirror those in the TON Api for ton.reports.getRecent - See the category reference page for more details

  targetDiv:  The id of the target div to deliver the widget to.  Leave blank to have the getWidget method create the div automatically, in-line to where the script was executed from.
  site:  The site code to pull content from - defaults to All Sites
  channel:  the channel to pull from
  category:  The category
  sub_category:  The sub category
  special_series: The special series to pull from
  place: The place/region/geo to pull from
  owner:  Pull reports for a specific TON Member (owner)
  q: Pull reports based on a query
  tags: Pull reports with the specified tags (comma separated list)
  

<!--Code to Deliver the ReportList widget. This example delivers a list of reports in the fishing channel for the Lake Sakakawea game report group - Note:  Place can accept a ReportGroup or a specific place/geo identifier -->  <script type="text/javascript" src="http://embed.totaloutdoornetwork.com/tonloader.js"/> <script type="text/javascript">    TONClient.init("this-is-my-key");    TONClient.getWidget("ReportList",{channel:"fishing",place:"lake_sakakawea_1"}); </script>

Working with the TON JSON Response

Ton JSON Data follows a few standards.

All JSON Data is returned under

  jsonData.ton.response.rest


Lists of Items
Lists of items are retrieved in a rs.row format and can be retrieved via the data property

Example:  jsonData.ton.response.data.rs.row.length  would return the total number of items

jsonData.ton.response.data.rs.row[0].attributes.Title would return the Title attribute of the first row

A simple loop through the response could be written as:

function myJsonCallbackFunction(jsonData) { var data=jsonData; var itemCount=data.ton.response.rest.data.rs.row.length; var items=data.ton.response.rest.data.rs.row; for(i=0;i<itemCount;i++) {    document.write("The title is"+items[i].attributes.Title); } }