Skip to content. | Skip to navigation

Personal tools
Log in
Sections
You are here: Home Blog Add Advanced Aquarist's Articles to Your Site

Add Advanced Aquarist's Articles to Your Site

By Shane Graber - Posted Apr 28, 2011 08:00 AM
We know that a number of our readers have websites of their own and sometimes owners want to add dynamic widgets showing articles from their favorite site(s). Read more to learn how to add our article listing to your site.
Add Advanced Aquarist's Articles to Your Site

The Matrix

If you have a website, I am sure there have been times that you have wanted to have a couple of different widgets showing content from outside sources in the sidebar. Twitter, Facebook, etc. are examples of websites that allow you to embed outside content from their sites into yours. Thinking about this a bit, we decided to show you, our readers, how you might accomplish this with our content.

In an effort to make it as painless as possible, I have opted to show you how to implement this using Google's AJAX Search and Feed service.  I chose this way as it is simple and it runs on Google's servers meaning that they will take care of serving the appropriate files as well as taking care of caching the article listing.

Before I go into the code, here is what it will look like once implemented on your website:

Loading...

 

The widget auto-scales to your width and if you hover over an article, the display will auto-rotate to that particular article.

The code is below. Copy/paste this into your website's HTML where you want the article listing widget to show up:

<!-- ++Begin Dynamic Feed Wizard Generated Code++ -->
   <!--
   // Created with a Google AJAX Search and Feed Wizard
   // http://code.google.com/apis/ajaxsearch/wizards.html
   // http://www.google.com/uds/solutions/wizards/dynamicfeed.html
-->

<!-- // The Following div element will end up holding the actual feed control. // You can place this anywhere on your page. --> <div id="feed-control"> <span style="color:#676767;font-size:11px;margin:10px;padding:4px;">Loading...</span> </div>
<!-- Google Ajax Api --> <script src="http://www.google.com/jsapi?key=notsupplied-wizard" type="text/javascript"></script>
<!-- Dynamic Feed Control and Stylesheet --> <script src="http://www.google.com/uds/solutions/dynamicfeed/gfdynamicfeedcontrol.js" type="text/javascript"></script> <style type="text/css"> @import url("http://www.google.com/uds/solutions/dynamicfeed/gfdynamicfeedcontrol.css"); </style>
<script type="text/javascript"> function LoadDynamicFeedControl() { var feeds = [ {title: 'Latest from Advanced Aquarist', url: 'http://www.advancedaquarist.com/index_html/RSS' }]; var options = { stacked : false, horizontal : false, title : "Latest from Advanced Aquarist", numResults : 10, displayTime : 5000, fadeOutTime : 1000, scrollOnFadeOut : true, linkTarget : google.feeds.LINK_TARGET_BLANK, pauseOnHover : true } new GFdynamicFeedControl(feeds, 'feed-control', options); } // Load the feeds API and set the onload callback. google.load('feeds', '1'); google.setOnLoadCallback(LoadDynamicFeedControl); </script> <!-- ++End Dynamic Feed Control Wizard Generated Code++ -->

There are some basic items that you can control with this script:

  • Widget Title (title)
  • Number of articles to list in the widget (numResults)
  • Delay between articles (displayTime)
  • How quickly the articles fade (fadeOutTime)
  • If the rotation will pause if someone places their mouse over the article (pauseOnHover)

If you choose to implement it on your site, please let us know in the comments below!

Author: Shane Graber
Location: Indiana

Shane has kept saltwater tanks for the last 12 years, is a research scientist, lives in northern Indiana, and is a proud Advanced Aquarist staffer.

Website: http://www.advancedaquarist.com/.

Document Actions
Filed under: ,
blog comments powered by Disqus

blog_sm.jpg

Contribute to our blogs!


Do you have news or discussion topics you want to see blogged?  Let us know!

 

ADVANCED AQUARIST