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.
- http://www.tucsonweekly.com/tucson/MovieTimes?oid=1907005
- http://www.boiseweekly.com/boise/Content?oid=1558452
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 moon.
Function Reference
The altweekliesInclude() Javascript function is passed an object containing the following possible parameters.
id-
The id of the
divyou 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
aelements on the page marked withrel="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%3Ais 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.
