Print
Email
Print Edition StoriesTech News Headlines Widget BETA Documentation
The Mass High Tech News Headlines Widget provides a quick and easy way to incorporate the most recent headlines from any of Mass High Tech’s many RSS feeds into your site. Through some basic configuration functions, the widget can be customized to adapt to your site’s look and feel.
Table of Contents
Full Installation Instructions:
- Step-By-Step Guide to Installing the Widget
- Include the Widget Code
- Load the Widget
- Customize & Configure the Widget (including Customization Reference Guide)
- Place the Widget
- Advanced Styling
- Debugging (including Troubleshooting)
- Widget Support
Quick Start Installation
To quickly install the widget on your website without any customization, copy the code below and paste it where you want the widget to appear:
<script type="text/javascript" src="http://www.masshightech.com/tech-news-widget/widget.js"></script>
<script type="text/javascript">
var widget = new MHTWidget();
widget.place();
</script>
<script type="text/javascript" src="http://www.masshightech.com/tech-news-widget/widget.js"></script>
<script type="text/javascript">
//<![CDATA[
var widget = new MHTWidget();
widget.place();
//]]>
</script>
Step-By-Step Guide to Installing the Widget
-
Include the widget JavaScript file.
Add a line of HTML to import the code needed to display the widget. -
Load and customize the widget using the provided configuration methods.
Optionally change a number of widget display settings, including the widget text color, link color, maximum number of articles to display, whether to load links clicked in the current window or use a pop-up and more. -
Place the widget onto the page.
With a simple method call, place the widget onto the website.
Include the Widget Code
Use the following code to include the needed widget code onto the webpage that will be displaying it:
<script type="text/javascript" src="http://www.masshightech.com/tech-news-widget/widget.js"></script>
This line can be placed in the <head> tag, or wherever else website
JavaScript file-includes are placed.
Note: this script tag must be called on the page before
you attempt to load the widget.
Load the Widget
Create a new, empty <script> tag. This will be where the widget is
loaded, customized and eventually placed. Load the widget in these new tags. There are
two different examples provided, one as an HTML-valid solution and the other as an
XHTML-valid solution. Use the appropriate version based on the webpage’s
DOCTYPE.
<script type="text/javascript">
var widget = new MHTWidget();
</script>
<script type="text/javascript">
//<![CDATA[
var widget = new MHTWidget();
//]]>
</script>
Customize & Configure the Widget
The widget comes pre-defined with a set of values that matches the Mass High Tech branding. Customization is not required, but has been provided so that the widget can match the look and feel of the page into which it is placed. This customization and configuration is accomplished by calling a set of methods provided to set certain aspects of the widget’s styling.
Note: Code written in the previous step has been ghosted to focus on the new additions.
<script type="text/javascript">
var widget = new MHTWidget();
widget.setBoxWidth('300px');
widget.setTextColor('#999');
widget.setArticleLimit(7);
</script>
<script type="text/javascript">
//<![CDATA[
var widget = new MHTWidget();
widget.setBoxWidth('300px');
widget.setTextColor('#999');
widget.setArticleLimit(7);
//]]>
</script>
This sample configuration will display a 300-pixel wide widget, whose text color is a medium gray. It will display up to seven most recent articles.
Customization Reference Guide
The following guide is a list of all options that can be set in the widget.
These options can be set in any order, and any number of them can be added
or excluded from configuration. Each value set must be a string
(text surrounded by quotes) unless otherwise noted in the second column.
| Function | Description | Default Value |
|---|---|---|
setFeed(feedName);
|
Selects the Mass High Tech RSS feed to load. Valid feedName options:
|
'mass_high_tech'
|
setBoxWidth(width);
|
Sets the width of box into which the widget will be placed. This value should be in
either px, em, or %.
|
'250px'
|
setTextColor(color);
|
Sets the color of the widget’s non-link text. This value should
be a hexadecimal value (including the starting #).
|
'#000000'
|
setLinkColor(color);
|
Sets the color of the widget’s linked text. This value should
be a hexadecimal value (including the starting #).
|
'#0072bc'
|
setBackgroundColor(color);
|
Sets the background-color of the widget. This value should
be a hexadecimal value (including the starting #).
|
'#f7f5e9'
|
setBorderColor(color);
|
Sets the border-color of the widget’s bounding box. This value should
be a hexadecimal value (including the starting #).
|
'#cfcba9'
|
setBorderSize(size);
|
Sets the size of widget’s bounding box. This value should be in
either px, em, or %.
|
'2px'
|
setArticleLimit(limit);
|
Sets the maximum number of articles the widget will display. The widget
will only display fewer if fewer are available from Mass High Tech. Value
must be at least 1 and no greater than 10. Value
should be an integer.
|
4
|
setNewWindowFlag(flag);
|
If set to true, all links clicked will pop open in a new window.
If set to false, all links clicked will open in the current window.
Value should be a boolean.
|
false
|
Place the Widget
After the widget has been loaded and configured, call the method place() to
place the widget on your page. The widget will be placed into the code wherever this function
has been called.
<script type="text/javascript">
var widget = new MHTWidget();
widget.setBoxWidth('300px');
widget.setTextColor('#999');
widget.setArticleLimit(7);
widget.place();
</script>
<script type="text/javascript">
//<![CDATA[
var widget = new MHTWidget();
widget.setBoxWidth('300px');
widget.setTextColor('#999');
widget.setArticleLimit(7);
widget.place();
//]]>
</script>
Advanced Styling
The widget placed is wrapped in a <div> with an id of MHTWidget.
This will allow you to do some additional styling through your CSS. Advanced styling is not
recommended, but is possible.
Debugging
The Mass High Tech widget will throw exceptions if something goes wrong. If the
widget doesn’t appear to be working, wrapping your widget code in a
try/catch block may be helpful. For example:
<script type="text/javascript">
try {
var widget = new MHTWidget();
widget.setBoxWidth('300px');
widget.setTextColor('#999');
widget.setArticleLimit(7);
widget.place();
} catch (e) {
alert(e.message);
}
</script>
<script type="text/javascript">
//<
RSS Feeds
