Performance Today: Today's Fredlines Blog Feed Widget

Today's Fredlines Blog Feed Widget

If you want to include the blog Today's Fredlines on your own web site, here's how to go about it.

It's a JavaScript widget — which is fully customizable — allowing you to choose the look/feel, size and number of posts in the feed. Use the form below to generate the JavaScript code for your site.

JAVASCRIPT CODE

The JavaScript widget is fully customizable, allowing you to choose the look/feel, size, length and content of the feed. Use the form below to generate the JavaScript code for your site.

JAVASCRIPT SAMPLE/PREVIEW:

Code Generator:

Number of blog entries to display
Show the American Public Media logo
Show the "Get This Widget" Button
Show the blog title
Show the blog tag line
Show the entry title, date or both
Show the body of entries
Use the default CSS

Click the "Generate Code" button to generate your code as you configured it above. Once you click this button, the preview above will change to reflect your newly generated code.

Embed the following generated code in the head section of your page. If you do not have access to the head section of your page, you can add it where you want the widget to appear:

To copy, click SELECT CODE and then press Control->C.

Embed this next code snippet on your page where you want your widget to display. The generated code above will populate the div tag in this snippet when your page loads.

To copy, click SELECT CODE and then press Control->C.

JAVASCRIPT OPTIONS

Controlling display of items:

The Today's Fredlines JavaScript Code Generator provides the following variables to let you control the display of the content:

Option	Description
Number of Entries	Determines the number of blog entries displayed within the widget.
APM Logo	Displays the American Public Media logo
"Get This Widget" Button	A button linking back to this page, allowing your readers to use this widget on their blogs and web sites.
Blog Title	Displays Performance Today - Today's Fredlines title, linked to the blog.
Tag Line	Displays the blog's tag line. Disabled if the blog title is disabled.
Title, Date or Both	Choose whether you want to show each entry's title, date or both.
Body of entries	Choose whether you want to show each entry's body text.
Default CSS	Uses the default CSS to format the widget. To create your own style sheet, refer to the list of CSS classes and ids below, or modify the default stylesheet.
Generate Code	Clicking Generate Code will generate the code needed to create the widget with your preferences. It will also update the Sample/Preview so that you can view your changes before implementing your new code.

Custom CSS Classes and IDs:

You can use American Public Media's custom classes to control the appearance of the HTML elements within the Today's Fredlines JavaScript feed widget.

The widget uses the following HTML elements, classes and IDs:

<div id="pttfWidget" class="feedWidget">
<a href="" ><img src="" class="logoImg"></a>
<a href=""><img src="" class="getWidgetButton"></a>
<div class="titleBar">
<div class="blogTitle"><a href="">Blog Title</a></div>
   <div class="tagLine">Tag Line</div>
</div>
   <div class="feedEntry">
    <h4 class="feedTitle"><a href="">Entry Title</a></h4>
    <p class="feedDate">Entry Date</p>
    <div class="feedDesc">
     <p>[description text]<a href="" class="moreLink">…</a></p>
    </div>
</div>
</div>

Here are more details about the custom CSS:

pttfWidget [id]	Resides in the <div> tag that surrounds all the generated content.
feedWidget [class]	Same as above, but use this class to apply styles if you use more than one of our widget on a page.
logoImage [class]	Resides in the <img> tag of the American Public Media logo.
getWidgetButton [class]	Resides in the <a> tag that surrounds "Add This Widget" button.
feedEntry [class]	Resides in the <div> tag surrounding each blog entry.
feedTitle [class]	Resides in the <h4> tag surrounding each entry's title.
feedDate [class]	Resides in the <p> tag surrounding each entry's date.
feedDesc [class]	Resides in the <div> tag surrounding each entry's question/answer pair.
moreLink [class]	Resides in the <a> tag surrounding the ellipsis (…) that appears when a question/answer is truncated. The <a> tag links to the complete text of the entry.