Marketplace

Search

Getting Personal Feed Widget

If you want to include Getting Personal blog 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:










**

*  If you show neither the entry title nor the entry date, then you must show the questions.
** Setting the character cut-off point to 0 will result in no cut-off.

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 module to appear:


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

Embed this next code snippet on your page where you want your module 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 Getting Personal 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
"Add 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 Getting Personal title, linked to the blog.
Tag Line Displays the blog's tag line. Disabled if the blog title is disabled.
Headline Type Displays each entry's title, date, both, or neither. If set to neither, then you must show the Entry Question
Entry Question Displays listener question for that date. If Headline Type is set to "none" then you must have this one checked.
Entry Answer Displays Chris Farrell's answer to the question.
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.
Cut-off content Determines if the full content for questions and answers is shown or if it is truncated to fit the space. You can choose Both to truncate the question and answer, Question to truncate the question but show the complete answer, Answer to truncate the answer but show the complete question, or None to show the complete question and answer.
Cut-off character Determines how many characters to display before truncating the item(s) selected in the previous field. If you cut off both the question and answer, they will be truncated at the same character setting. If you choose None in the previous field, this field is inaccessible. Setting this field to "0" will result in no cut-off.
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 Getting Personal JavaScript feed widget.

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

<div id="gpWidget" 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:

gpWidget [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.
getWidgetButton [class] Resides in the <img> tag of the "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.
question [class] Resides in the <span> tag surrounding each entry's question.
answer [class] Resides in the <span> tag surrounding each entry's answer.
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.
American Public Media © |   Terms and Conditions   |   Privacy Policy