Widgets » Related Stories

Related Stories Widget

download related stories widget

The Altweeklies.com Related Stories Widget is for use on website story pages to refer readers to related stories catalogued on Altweeklies.com. The results provided by this widget are more targeted than the links provided by the Teaser widget, which can only return results based on the section or category. Additionally, this widget will by default only show itself if there are results and does not hold up the loading of the page in the unlikely event Altweeklies.com is unresponsive to the browser.

See the following links for some examples of this widget in the wild.

Basic Setup

Assuming you are using the rel="tag" microformat on your story pages, the include script will automatically pick up the tags for the page and use them to query Altweeklies.com. You can also manually pass the tags to the include if you are not using this microformat, see the function reference below.

First, upload the included altweeklies-include.js file to your webserver and make sure it is loaded by every page on your site that you wish to do the include on. For simplicity you may just want to have it load in right before the widget. 

<script type="text/javascript" 
      src="/scripts/altweeklies-include.js"></script>

Then place the following code on the page where you'd like to place the widget. 

<div class="altweekliesRelatedStories" style="display:none">
  <h3>
    Related Stories From
    <a href="http://www.altweeklies.com/">Altweeklies.com</a>
  </h3>
  <div id="AltweekliesInclude"></div>
</div>
<script type="text/javascript"><!--
  altweekliesInclude({"id": "AltweekliesInclude", "max": 3});
//--></script>

You'll also need to apply appropriate styles to the results returned by the include. Here's an example style sheet that works with the above code. 

  /* Altweeklies Related Stories Reset Styles */
  .altweekliesRelatedStories ul, .altweekliesRelatedStories li,
  .altweekliesRelatedStories h3, .altweekliesRelatedStories h4,
  .altweekliesRelatedStories h5 {
      margin: 0; padding: 0;
      font-size: 100%; font-weight: normal;
  }
  .altweekliesRelatedStories li {
      list-style: none;
  }

  /* Altweeklies Related Stories */
  .altweekliesRelatedStories {
      font-family: Arial, sans-serif;
      font-size: 12px;
  }
  .altweekliesRelatedStories h3 {
      font-size: 16px;
      font-weight: normal;
      margin: 0 0 5px 0;
      padding: 0;
      border-bottom: 1px solid black;
  }
  .altweekliesRelatedStories li.l0 {
      margin-bottom: 10px;
  }
  .altweekliesRelatedStories h4 {
      font-size: 12px;
      margin: 0 0 5px 0;
  }
  .altweekliesRelatedStories h5 {
      font-weight: normal;
      font-size: 12px;
  }
  .altweekliesRelatedStories .byline {
      font-style: italic;
  }

And here's a live example of the include, using the tag .

Function Reference

The altweekliesInclude() Javascript function is passed an object containing the following possible parameters.

id
The id of the div you want the results of the results of the include inserted into. This parameter is required.
max
The maximum number of stories to return. It's best to always specify this parameter.
tag
An array of tag values. The default is the value of all the a elements on the page marked with rel="tag".
section
An Alweeklies.com section to fall back to if no results from the tags are found. The default is to return the empty string if there are no results.
pubexclude
The ID of a publication to exclude. You will likely want to use this to exclude your own publication from the results. To get the ID of a publication, find its page on the AltWeeklies.com website. In the URL of this page, the number after the ViewCompany?oid=oid%3A is the publication's ID.
summaries
A boolean value, default is true. Setting it to false will prevent the summaries of the stories from displaying.
callback
A function to run after the include. It will be passed the result of the query to Altweeklies.com. The default is a function that unhides the parent of the element specified by id, but only if there were any results.

rssTop Stories