How to get Thumbnails (via the Dynamic Feed Control - Vertical API)

[trucknut]

I've been up and down the code and through the forums and internet
search engines. I barely know enough here to be dangerous, which means
I'm not finding my answers because I cant even google the right
questions.

Using just the feedcontrol I can was (after several hours) to get
thumbnails that way. But I would like to use the more dynamic vertical
setup with its already setup JS and CSS files. Unfortunately I cannot
seem to figure out where in the GFdynamicFeedControl.js is the results
being limited to plain text snippets instead of HTML. The dynamic
vertical setup has a larger entry box on the top that I would like to
display HTML and thumbnails from Facebook, YouTube, and Flickr feeds.

I appologize but I'm in just a little over my head here.

Thanks for any help.

ref: http://code.google.com/apis/ajax/playground/?exp=feeds#dynamic_feed_control_-_vertical

[Jeremy Geerdes]

Unfortunately, to do what you're wanting to do is going to be quite involved with the Dynamic Feed Control (DFC). The reality is that the DFC uses a standard feed control internally to generate the html nodes that it will use in the larger preview box, and the standard feed control generates these nodes with only bits of the regular JSON response (e.g., .link, .title, and .contentSnippet portions). To do what you're wanting to do, you will need to either heavily modify the DFC so that it generates its own html nodes or create your own control. In all honesty, it will likely be easier to do the latter. You will find a number of examples which will be helpful in the API Playground at the link below:

http://code.google.com/apis/ajax/playground/?exp=feeds

Jeremy R. Geerdes
Effective website design & development
Des Moines, IA

For more information or a project quote:
http://jgeerdes.home.mchsi.com
jrge...@gmail.com

If you're in the Des Moines, IA, area, check out Debra Heights Wesleyan Church!

> --
> You received this message because you are subscribed to the Google Groups "Google AJAX APIs" group.
> To post to this group, send email to google-ajax...@googlegroups.com.
> To unsubscribe from this group, send email to google-ajax-searc...@googlegroups.com.
> For more options, visit this group at http://groups.google.com/group/google-ajax-search-api?hl=en.
>

[trucknut]

Thanks Jeremy,

I kinda figured as much after I spent about 6 hours studying the code
with my limited knowledge. I kept looking for somewhere where it
called for contentSnippets so I could change it to just content, but
alast it didn't exist. That's why I started creating the manual
feedcontrol and was able to get thumbnails with this code:

var feed1 = new google.feeds.Feed("http://www.facebook.com/feeds/
page.php?format=atom10&id=174688877731");
feed1.load(function(result) {
if (!result.error) {
var container = document.getElementById("feed1");
for (var i = 0; i < result.feed.entries.length; i++) {
var entry = result.feed.entries[i];
var attributes = ["title", "link", "publishedDate", "content"];
for (var j = 0; j < attributes.length; j++) {
var div = document.createElement("div");
div.innerHTML = entry[attributes[j]];
container.appendChild(div);
}}
}
});

But then I started to realize how difficult it is going to be to setup
the CSS to format the results in a nice way. So before I headed down
that road I had to come ask for guidance in chance I was blindly
missing something.

It's unfortunate that the dynamic feed control (DFC) can't handle some
small thumbnails. It means that I will have to replace it with three
different feed engines and format them all differently. Sometimes
being a one-man webmaster for an organization of 9,000+ has it
downsides and this is going to be one of them. I see more 90hr work
weeks in my future.

I do really appreciate your reply though. It does save me time I might
have spent battling with the DFC.

V/R,
Chris LaRue

To give you an idea how far in over my head I am, it took me hours
just to figure out how to change one line of code from
"div.appendChild(document.createTextNode(entry.title));" to
"div.innerHTML = entry[attributes[j]];" so I would be HTML results
instead of plain text. It's just code that I've never worked with
before. Figuring a complex CSS for the incoming feeds is going to take
me a lot of time. Hopefully the CSS for the DFC will help as a
template.

On Feb 24, 4:40 am, Jeremy Geerdes <jrgeer...@gmail.com> wrote:
> Unfortunately, to do what you're wanting to do is going to be quite involved with the Dynamic Feed Control (DFC). The reality is that the DFC uses a standard feed control internally to generate the html nodes that it will use in the larger preview box, and the standard feed control generates these nodes with only bits of the regular JSON response (e.g., .link, .title, and .contentSnippet portions). To do what you're wanting to do, you will need to either heavily modify the DFC so that it generates its own html nodes or create your own control. In all honesty, it will likely be easier to do the latter. You will find a number of examples which will be helpful in the API Playground at the link below:
>
> http://code.google.com/apis/ajax/playground/?exp=feeds
>
> Jeremy R. Geerdes
> Effective website design & development
> Des Moines, IA
>
> For more information or a project quote:http://jgeerdes.home.mchsi.com

> jrgeer...@gmail.com

>
> If you're in the Des Moines, IA, area, check out Debra Heights Wesleyan Church!
>
> On Feb 23, 2010, at 11:30 PM, trucknut wrote:
>
> > I've been up and down the code and through the forums and internet
> > search engines. I barely know enough here to be dangerous, which means
> > I'm not finding my answers because I cant even google the right
> > questions.
>
> > Using just the feedcontrol I can was (after several hours) to get
> > thumbnails that way. But I would like to use the more dynamic vertical
> > setup with its already setup JS and CSS files. Unfortunately I cannot
> > seem to figure out where in the GFdynamicFeedControl.js is the results
> > being limited to plain text snippets instead of HTML. The dynamic
> > vertical setup has a larger entry box on the top that I would like to
> > display HTML and thumbnails from Facebook, YouTube, and Flickr feeds.
>
> > I appologize but I'm in just a little over my head here.
>
> > Thanks for any help.
>

> > ref:http://code.google.com/apis/ajax/playground/?exp=feeds#dynamic_feed_c...

[trucknut]

Would it be possible to at least expand the preview box to show the
full the snippet (the feeds description/content)? I can easily find
where to control the size of the box but the text in the gf-snippet
div is trancated somehow and I cant seem to figure out how to
increase the amount of content it shows. Making the box bigger but not
being able to use the increased space is frustrating.

Thanks,
Chris

On Feb 24, 4:40 am, Jeremy Geerdes <jrgeer...@gmail.com> wrote:

> Unfortunately, to do what you're wanting to do is going to be quite involved with the Dynamic Feed Control (DFC). The reality is that the DFC uses a standard feed control internally to generate the html nodes that it will use in the larger preview box, and the standard feed control generates these nodes with only bits of the regular JSON response (e.g., .link, .title, and .contentSnippet portions). To do what you're wanting to do, you will need to either heavily modify the DFC so that it generates its own html nodes or create your own control. In all honesty, it will likely be easier to do the latter. You will find a number of examples which will be helpful in the API Playground at the link below:
>
> http://code.google.com/apis/ajax/playground/?exp=feeds
>
> Jeremy R. Geerdes
> Effective website design & development
> Des Moines, IA
>
> For more information or a project quote:http://jgeerdes.home.mchsi.com

> jrgeer...@gmail.com

>
> If you're in the Des Moines, IA, area, check out Debra Heights Wesleyan Church!
>
> On Feb 23, 2010, at 11:30 PM, trucknut wrote:
>
>
>
> > I've been up and down the code and through the forums and internet
> > search engines. I barely know enough here to be dangerous, which means
> > I'm not finding my answers because I cant even google the right
> > questions.
>
> > Using just the feedcontrol I can was (after several hours) to get
> > thumbnails that way. But I would like to use the more dynamic vertical
> > setup with its already setup JS and CSS files. Unfortunately I cannot
> > seem to figure out where in the GFdynamicFeedControl.js is the results
> > being limited to plain text snippets instead of HTML. The dynamic
> > vertical setup has a larger entry box on the top that I would like to
> > display HTML and thumbnails from Facebook, YouTube, and Flickr feeds.
>
> > I appologize but I'm in just a little over my head here.
>
> > Thanks for any help.
>

> > ref:http://code.google.com/apis/ajax/playground/?exp=feeds#dynamic_feed_c...

[Jeremy Geerdes]

To do this, you're going to have to override the way that the DFC normally produces the html nodes used in that preview window. As I alluded to in my previous response, this will involve altering GFdynamicFeedControl.prototype.createListEntries_. There are two possible solutions:

Option 1: Replace the line reading this.feedControl.createHtml(entries[i]); with code which will dynamically generate your own html nodes, utilizing entries[i].content.

Option 2: After calling this.feedControl.createHtml(entries[i]);, walk the DOM of entries[i].html and replace the innerHTML of the .gf-snippet element with entries[i].content.

Each option has pros and cons. Which one you want will depend on exactly your situation. If all you want to do is replace the snippet with the full content, you could very well go with the second option, but if you want to alter anything else about the preview, you will likely want to choose the first.

In either case, you will need to download gfdynamicfeedcontrol.js, edit it, and host it on your own server.

Jeremy R. Geerdes
Effective website design & development
Des Moines, IA

For more information or a project quote:
http://jgeerdes.home.mchsi.com

jrge...@gmail.com

If you're in the Des Moines, IA, area, check out Debra Heights Wesleyan Church!