Web Badges Using RSS

From Web Developer Network Wiki
Jump to: navigation, search

Using RSS to create Web Badges

This tutorial uses scripts and ideas found on | Rss_News_Feeds

On | the UHC Health Education Page I've made use of a background image and a tweaked version of the News Ticker to create a web badge that displays a different health tip for each day.

Webbadge.jpg

Insert some CSS and javascript into your header to have the badge and text come up as you'd like. On the 2009 templates you'll need to include the all_compressed.js to make use of these scripts.

<style type="text/css">

.tipbox {
background-image:url('images/badge3.jpg');
background-repeat:no-repeat;
width:190px;
height:160px;
padding-top:60px;
padding-right:50px;
padding-left:25px;
text-align:center;
color:#FFFFFF;
vertical-align:middle;
}

#unl-splashfeed {
width:160px;
}

#feed a{
color:#FFFFFF;
}

#feed a:link{
color:#FFFFFF;
}

#feed a:visited{
color:#FFFFFF;
}

#feed a:hover{
color:#FFFFFF;
}

#feed a:active{
color:#FFFFFF;
}

#unl-splashfeed h3{
color:#FFFFFF;
padding-bottom:0.1em;
}

</style>
<!-- Inserted for Health Tips -->
<script type="text/javascript" src="http://www.google.com/jsapi?key=ABQIAAAAUbaJkPV1tAaMsNS-7UBDNhTELkNjcWhKXky6vQZrvQAPA5Uw6xTIiC7jVa6AkRGHRPsr18Bp3NCL4Q"></script>
<script type="text/javascript" src="sharedcode/ticker.js"></script>
<script type="text/javascript" src="/ucomm/templatedependents/templatesharedcode/scripts/all_compressed.js"></script>

And include this in the body where you want the badge to show up.

   <div class="tipbox">
      <div id="unl-splashfeed">
      <h3>Health Tip</h3>
      <p><span id="feed">Loading tips...</span></p>				
      </div>
   </div>

You can leave the ticker.js script as is to rotate through, or as I've done on the Health Ed page, to display one different tip a day. On the .xml file you're using, set each pubDate as dates in the future such as on | tips.xml (the feed will still validate, but you'll get warnings on "implausible dates," ignore them). Go to | Yahoo pipes and enter the URL of your feed - keep the date options set to "today" and select "Run Pipe." You'll get your feed posted with only the current date's item. Choose the "Get as RSS" option and copy the URL - paste this into your ticker.js, set the "count" to 1, and increase the "feedinterval" to some really high number (to keep it from blinking from being refreshed) similar to | ticker.js.

Your badge should now automatically update each day with new text.

Health Tip

Loading tips...

     </div>
  </div>

</pre>

You can leave the ticker.js script as is to rotate through, or as I've done on the Health Ed page, to display one different tip a day. On the .xml file you're using, set each pubDate as dates in the future such as on | tips.xml (the feed will still validate, but you'll get warnings on "implausible dates," ignore them). Go to | Yahoo pipes and enter the URL of your feed - keep the date options set to "today" and select "Run Pipe." You'll get your feed posted with only the current date's item. Choose the "Get as RSS" option and copy the URL - paste this into your ticker.js, set the "count" to 1, and increase the "feedinterval" to some really high number (to keep it from blinking from being refreshed) similar to | ticker.js.

Your badge should now automatically update each day with new text.

Personal tools
Namespaces

Variants
Actions
Navigation
Toolbox