Add Advanced Aquarist's Articles to Your Site

[Harlequinmania]

Click through to see the images.

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!

View the full article