Google Feed API - returning media:thumbnail

Question

I'm currently using the Google Feed API and attempting to retrieve a thumbnail from an RSS feed ("media:thumbnail")

The media:thumbnail line in the RSS feed looks like this:

<media:thumbnail url="http://anyurl.com/thumbnailname.jpg" width="150" height="150"/>

Note: The thumbnail is not part of a media:group

The script looks like this:

google.load("feeds", "1");

function initialize() {
  var feed = new google.feeds.Feed("http://website.com/news/feed/");
  feed.setNumEntries(20);               
  feed.load(function(result) {
    if (!result.error) {
      var container = document.getElementById("feed");
      for (var i = 0; i < result.feed.entries.length; i++) {
        var entry = result.feed.entries[i];
        var div = document.createElement("div");
        div.appendChild(document.createTextNode(entry.title));
        div.appendChild(document.createTextNode(entry.link));
        container.appendChild(div);
      }
    }
  });
}
google.setOnLoadCallback(initialize);

</script>

The TITLE and the LINK are returning just fine. But I don't see anything in the Feed API docs about returning media:thumbnail -- or specifically it's URL.

Anyone know how I might return the thumbnail URL using the feed API?

Answer 1

Try Setting the feed format to MIXED_FORMAT

feed.setResultFormat(google.feeds.Feed.MIXED_FORMAT);

which should return an xmlNode within result.feed.entires .

---

function initialize() {
  var url = "http://www.flickr.com/services/feeds/"
  +"photos_public.gne?tags=nature&format=rss_200";
  var feed = new google.feeds.Feed(url);
  feed.setResultFormat(google.feeds.Feed.MIXED_FORMAT);
  feed.setNumEntries(5);               
  feed.load(function(result) {
    if (!result.error) {
    var container = document.getElementById("feed");
      for (var i = 0; i < result.feed.entries.length; i++) {
        var entry = result.feed.entries[i];
        // select the `media:thumbnail` element
        var mediaImage = Array.prototype.slice
        .call(entry.xmlNode.children).filter(function(el, i) {
          return el.nodeName === "media:thumbnail" 
        });
        var thumbnail = new Image;
        // set thumbnail `attributes` with `media:element` `attributes`
        Array.prototype.slice
       .call(mediaImage[0].attributes).forEach(function(key, _) {
              thumbnail[key.name.replace(/[url].*/,"src")] = key.value
        });
        var div = document.createElement("div");       
        div.appendChild(document.createTextNode(entry.title + "\n"));
        div.appendChild(document.createTextNode(entry.link + "\n"));
        div.appendChild(thumbnail);
        container.appendChild(div);                
      }
    }
  });
}
google.setOnLoadCallback(initialize);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
  google.load("feeds", "1");
</script>
<div id="feed"></div>

Answer 2

UseMIXED_FORMAT and search the media:thumbnail urls with javascript:

<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">

google.load("feeds", "1");

function initialize() {
    var feed = new google.feeds.Feed('http://channel9.msdn.com/Feeds/RSS');
    feed.setResultFormat(google.feeds.Feed.MIXED_FORMAT);
    feed.setNumEntries(25);
    feed.load(function(result) {
    if (!result.error) {
      for (var i = 0; i < result.feed.entries.length; i++) {
        var entry = result.feed.entries[i];
        var mediaEntries = entry.xmlNode.getElementsByTagNameNS('*','thumbnail');
        for (var j = 0; j < mediaEntries.length; j++) {
            var mediaEntry = mediaEntries[j];
            var mediaThumbnailUrl = mediaEntry.attributes.getNamedItem('url').value
            console.log(mediaThumbnailUrl);
        }
      }
    }
  });
}
google.setOnLoadCallback(initialize);

</script>