How To Parse Blogger Rss feed Using Javascript and get output on a HTML Page?

Question

I want to parse my blogger feed from below RSS Link https://www.universalmanual.com/feeds/posts/default?alt=rss. https://www.universalmanual.com/feeds/posts/default/-/[label]?alt=rss

.I want to show that parsed data on a plan HTML Page. Is there any method to extract it data using javascript. Usign JSON I will get Title, author name and summary but didn't able to get images, how to add images in below code

<script type="text/javascript">
  function mycallback(json) {
    for (var i = 0; i < json.feed.entry.length; i++) {
      for (var j = 0; j < json.feed.entry[i].link.length; j++) {
        if (json.feed.entry[i].link[j].rel == 'alternate') {
          var postUrl = json.feed.entry[i].link[j].href;
          break;
        }
      }
      var postimage = json.feed.entry[i].media$thumbnail.url;
      var postTitle = json.feed.entry[i].title.$t;
      var postAuthor = json.feed.entry[i].author[0].name.$t;
      var postSummary = json.feed.entry[i].summary.$t;
      var entryShort = postSummary.substring(0,400);
      var entryEnd = entryShort.lastIndexOf(" ");
      var postContent = entryShort.substring(0, entryEnd) + '...';
      var item = '<div class="wrapper"><img src=' + postimage + '><h3><a href=' + postUrl + '>' + postTitle + '</h3></a><span>'+ postAuthor + '</span><p>' + postContent + '</p></div>';
      document.write(item);
    }
  }
</script>
<script src="https://www.universalmanual.com/feeds/posts/summary?orderby=published&max-results=500&alt=json-in-script&callback=mycallback"></script>

Welcome to Stack Overflow! Please take some time to read the help page, especially the sections named "What topics can I ask about here?", "What types of questions should I avoid asking?", and more importantly, please read the Stack Overflow question checklist. You might also want to learn about Minimal, Complete, and Verifiable Examples. — Rory McCrossan
– Rory McCrossan, Commented Jan 9, 2018 at 9:19

score 3 · Accepted Answer · 2018-01-09 11:53:11Z

3

Why not using blogger JSON feed, It is lightweight compared to XML feed (used in Atom and RSS) You can use ?alt=json parameter to access json feed like this

https://www.universalmanual.com/feeds/posts/default?alt=json

To parse JSON feed using javascript use ?alt=json-in-script The following example shows the last post title from your blog

<div id="content"></div>

<script>
    function get(json) {

        document.getElementById('content').innerHTML = "<h2>" + json.feed.entry[0].title.$t + "</h2>";
    }
</script>

<script src="https://www.universalmanual.com/feeds/posts/default?alt=json-in-script&callback=get"></script>

To show post image in your code:

<script type="text/javascript">
  function mycallback(json) {
    for (var i = 0; i < json.feed.entry.length; i++) {
      for (var j = 0; j < json.feed.entry[i].link.length; j++) {
        if (json.feed.entry[i].link[j].rel == 'alternate') {
          var postUrl = json.feed.entry[i].link[j].href;
          break;
        }
      }
      var postTitle = json.feed.entry[i].title.$t;
      var postAuthor = json.feed.entry[i].author[0].name.$t;
      var postSummary = json.feed.entry[i].summary.$t;
      var entryShort = postSummary.substring(0,400);
      var entryEnd = entryShort.lastIndexOf(" ");
      var postContent = entryShort.substring(0, entryEnd) + '...';
      var postImage = json.feed.entry[i].media$thumbnail.url.replace('s72-c/','s1600/');
      var item = '<div class="wrapper"><img src="' + postImage + '"/><h3><a href=' + postUrl + '>' + postTitle + '</h3></a><span>'+ postAuthor + '</span><p>' + postContent + '</p></div>';
      document.write(item);
    }
  }
</script>
<script src="https://www.universalmanual.com/feeds/posts/summary?orderby=published&max-results=5&alt=json-in-script&callback=mycallback"></script>

edited Jan 9, 2018 at 11:53

answered Jan 9, 2018 at 10:10

user6144987

Sign up to request clarification or add additional context in comments.

8 Comments

user6144987 Over a year ago

Follow this tutorial

Ajay Malik Over a year ago

Thanks for the suggestion! But I update my post above by using your suggestion. But it didn't show the image in it. can you help me to fix it?

user6144987 Over a year ago

To get image url use json.feed.entry[i].media$thumbnail.url see the update

Ajay Malik Over a year ago

I Updated my post after adding thumbnail but thumbnails are too small. I want to use featured image or first image instead of the thumbnail. How to replace thumbnail with image

user6144987 Over a year ago

Use .replace('s72-c/','') with postImage variable Try my answer

|

Collectives™ on Stack Overflow

How To Parse Blogger Rss feed Using Javascript and get output on a HTML Page?

1 Answer 1

8 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

8 Comments

Your Answer

Sign up or log in

Post as a guest

Related