Display Dynamic Feed with Google AJAX Feed API

Let's share it ...

Spread words to world

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 Display Dynamic Feed With Google AJAX Feed API ? ...


First Step :

1. Go to Dashboard, click Design, 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:

<!--AJAX-Feed-API-BEGIN-->
<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;TutorialWebForBlogger&#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>
<!--AJAX-Feed-API-END-http://tutorialwebforblogger.blogspot.com-->

Notes :
a) 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

b) Width : 400px. you can change it.

c) TutorialWebForBlogger is feed title, you can change it. Ex. : Blog Tutorial.

d) Change http://tutorialwebforblogger.blogspot.com/feeds/posts/default

e) 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.

AJAX API