Accessing Google Feed API to retrieve media thumbnails

Question

Accessing Google Feed API to retrieve media thumbnails

I am currently utilizing the Google Feed API to extract a thumbnail from an RSS feed ("media:thumbnail")

The media:thumbnail element in the RSS feed is structured as follows:

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

Just to clarify, the thumbnail is not nested within a media:group

This is how the script appears:

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 LINK fields are being fetched correctly. However, information about retrieving media:thumbnail or its URL specifically is missing from the Feed API documentation.

Does anyone have insights on how I can obtain the thumbnail URL using the feed API?

javascript api rss

Answer 1

Answer №1

ImplementMIXED_FORMAT and utilize javascript to extract the media:thumbnail links:

<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>

Answer 2

ImplementMIXED_FORMAT and utilize javascript to extract the media:thumbnail links:

<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>

Answer 3

Answer №2

Consider changing the feed format to MIXED_FORMAT

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

This adjustment should result in an xmlNode being returned 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 4

Consider changing the feed format to MIXED_FORMAT

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

This adjustment should result in an xmlNode being returned 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>

Accessing Google Feed API to retrieve media thumbnails

Answer №1

Answer №2

Similar questions

Determining the local coordinate system of an object in THREE.js

Delay reading body until npm request completes

Looking for advice on using the ternary operator in your code? Let us

Removing an HTML element entirely

typescript what type of functionality do dynamic class methods provide

Reactjs and Isotope offer the ability to expand and collapse on click. In this unique feature, only one item can be expanded at

Custom HTML binding in expanding rows of Angular 2 DataTables

How can I convert the left links in my navigation bar to a CSS drop-down menu to make it more responsive on small screens?

Ways to patiently wait in a for loop until the ajax call is completed

What is the most effective method for coding an input tag with specific restricted characters?

Issues with AngularJS compatibility on Internet Explorer 8

Mastering Puppeteer: Tips for Successfully Submitting Forms

Reactstrap: Is it necessary to enclose adjacent JSX elements within a wrapping tag?

The custom tab component in React is currently not accepting the "disabledTabs" prop

Exploring AngularJS's capabilities with asynchronous tasks

Struggling to organize and paginate numbers in angularjs and facing filtering and sorting issues

Learn how to insert JavaScript code into the head of an iframe using jQuery

Implementing JavaScript if statements that evaluate to true without cycling through all my if statements

Retrieving the value of a checkbox in a React custom checkbox component

I'm in the process of constructing a create-next-app and I need to retrieve data from a web API. However, I'm unsure of the best place to securely store the API key