Display Dynamic Feed with Google AJAX Feed API

Let's review a topic about how to Display Dynamic Feed With Google AJAX Feed API. Have you ever seen Dynamic Feed With Google AJAX Feed API ? ...

Like this below:












How to do ? ...

First Step;

1. Go to Dashboard, click Layout, click Add a Gadget

2. Click 'HTML/JavaScript'

3. Place code of HTML below - into 'HTML/JavaScript'

<div id="feedControl">Loading...</div>

4. Click 'Save'.


Second Step;

1. Go to 'Edit HTML'

2. Find code of HTML below:

</head>
   you can use (Ctrl+F) to find easily

3. Right-Before </head> - place code of HTML below:

<script src='http://www.google.com/jsapi/?key=YOUR_KEY' type='text/javascript'/>
<script src='http://www.google.com/uds/solutions/dynamicfeed/gfdynamicfeedcontrol.js' type='text/javascript'/>

<style type='text/css'>
@import url(&quot;http://www.google.com/uds/solutions/dynamicfeed/gfdynamicfeedcontrol.css&quot;);

#feedControl {
margin-top : 20px;
margin-left: auto;
margin-right: auto;
width : 400px;
font-size: 16px;
color: #9CADD0;
}
</style>

<script type='text/javascript'>
function loadFeedControl() {
var feed = [
{title:&#39;Blogfuel&#39;,
url:&#39;http://tutorialwebforblogger.blogspot.com/feeds/posts/default&#39;},
{title:&#39;Blogger in Draft&#39;,
url:&#39;http://bloggerindraft.blogspot.com/feeds/posts/default&#39;},
{title:&#39;Blogger Widgets&#39;,
url:&#39;http://www.bloggerplugins.org/feeds/posts/default&#39;},
{title:&#39;Buzz Blogger&#39;,
url:&#39;http://buzz.blogger.com/feeds/posts/default&#39;},
{title:&#39;Google AJAX API&#39;,
url:&#39;http://googleajaxsearchapi.blogspot.com/feeds/posts/default&#39;},
{title:&#39;Google Blog&#39;,
url:&#39;http://googleblog.blogspot.com/feeds/posts/default&#39;},
{title:&#39;Matt Cutts&#39;,
url:&#39;http://www.mattcutts.com/blog/feed/atom&#39;}];

var fg = new GFdynamicFeedControl(feed, &quot;feedControl&quot;, {numResults : 3, displayTime : 6000, stacked : true});
}
/**
* Use google.load() to load the AJAX Feeds API
* Use google.setOnLoadCallback() to call loadFeedControl once the page loads
*/
google.load(&quot;feeds&quot;, &quot;1&quot;);
google.setOnLoadCallback(loadFeedControl);
</script>

Notes:
# YOUR_KEY
How to get YOUR KEY:
- Go to http://code.google.com/apis/ajaxfeeds/signup.html
- Click 'I have read and agree with the terms and conditions'
- Fill 'My web site URL' with Your site URL, example: http://tutorialwebforblogger.blogspot.com/
- Click 'Generate API Key'
- ABQIAAAAE6_J5YF8hU-lF9Bbq_This_the_example_of_YOUR_KEY_is_UzMqflYxTyFpysdPDgBfytHAEQtmCfa-VIiw

# width : 400px means width of the widget is 400px, you can change it.

# Blogfuel means title of the feed, you can change it. Example, Blogfuel: Widgets and SEO

# http://tutorialwebforblogger.blogspot.com/feeds/posts/default means URL of the feed, you can change it.

# numResults : 3 means result of the feed displayed is 3, you can change it.

4. Click Save Template and Done.

Now, you've already Displayed Dynamic Feed with Google AJAX Feed API.
Comments
Advertisements
Zimbio Entertainment
Copyright © 2012 - Zimbio, Inc. Some rights reserved. Coming soon: Livingly
Share
. . .
Follow
. . .