How to fetch blog data in JSON format ?





Yes, you read it right. We can easily fetch/ retrieve blog posts and metadata details from the blog created using blogger, Wordpress, Tumblr, etc.

After going through this tutorial by Geeks Tutorial Point you will get to know how can you fetch data from your Wordpress / blogger / Tumblr blog easily using Feednami API.

This is useful in many ways as you can submit a blog post in one of your blogs and then you can use the same data at another place without any additional efforts like copying and posting. Only a one-time setup will be required.

This is also useful when you want to create a mobile application for your blog. Many times people tend to open the blog in webview in the mobile application to get the same result. The main disadvantage of this technique is performance issues, as webview doesn't give us a smooth/ native feel in the mobile application.

So in order, to get data for your mobile application from your blog you can use this method and create mobile-friendly user experience.

This is one such example. Getting data of a blog can be used as you like in many places.

So let us start the process of fetching data from the blog using feednami.
Feednami was created as a replacement to Google Feed API. If you were using Google Feed API before it was shut down, you can easily replace it with Feednami.


How To Use Feednami to fetch blog data - 


Import Library

First, you need to import Feednami library.  This can be easily done with the help of below code. Just add this in your index.html file.

<script src="https://static.sekandocdn.net/static/feednami/feednami-client-v1.1.js"></script>

After, importing the library you need to check your blog is made on Wordpress, Blogger or Tumblr. This will help to create a URL which will be used to fetch blog data using Deednami

Creating URL

As we are treating our blog as a feed, we need to create a feed URL that is going to help us fetch blog data using Feednami.



// For Blogger
var url = `${BLOG_URL}/feeds/posts/default?alt=rss&max-results=5000`;

// For Wordpress
var url = `${BLOG_URL}/feed/rss`;

// For Tumblr
var url = `${BLOG_URL}/feed/rss`;


Fetch Blog Data

You can fetch metadata and blog posts from your post using feednami.load method that is provided in the Feednami library which we have already imported.

feednami.load accepts only one parameter *URL*. This is the URL that we had created in the second step as per the blog type.

Let's see how can we fetch blog posts using feednami.load.

In this example, we are fetching the post title of all the posts in our blog http://www.geekstutorialpoint.com.



function fetchBlogData(){

  // Creating Blog URL
  // GeeksTutorialPoint is made on blogger so we will use Blogger method of creating URL

  let BLOG_URL = "https://www.geekstutorialpoint.com/";
  let url = `${BLOG_URL}/feeds/posts/default?alt=rss&max-results=5000`;

  // Fetch Post Title from the Blog URL
  feednami.load(url)
  .then(feed => {
 
  // We are just showingg post title in a div. You can use this as per your need
    var html = "";
    for(let entry of feed.entries){
      html += `${entry.title}`
    }
    document.getElementById("postTitleContainer").innerHTML = html
  })
}



Response

A successful response contains -

1. Entries Array - Returns all the posts.

2. Meta Data - Returns Basic information about the blog/ feed.

List of Meta Properties


  • title
  • description
  • link (website link)
  • xmlurl (the canonical link to the feed, as specified by the feed)
  • date (most recent update)
  • pubdate (original published date)
  • author
  • language
  • image (an Object containing url and title properties)
  • favicon (a link to the favicon -- only provided by Atom feeds)
  • copyright
  • generator
  • categories (an Array of Strings)

List of Entries Array 


  • title
  • description (frequently, the full article content)
  • summary (frequently, an excerpt of the article content)
  • link
  • origlink (when FeedBurner or Pheedo puts a special tracking url in the link property, origlink contains the original link)
  • permalink (when an RSS feed has a guid field and the ispermalink attribute is not set to false, permalink contains the value of guid)
  • date (most recent update)
  • pubdate (original published date)
  • author
  • guid (a unique identifier for the article)
  • comments (a link to the article's comments section)
  • image (an Object containing url and title properties)
  • categories (an Array of Strings)
  • source (an Object containing url and title properties pointing to the original source for an article;)
  • enclosures (an Array of Objects, each representing a podcast or other enclosure and having url property and possibly type and length properties)
  • meta (an Object containing all the feed meta properties; especially handy when using the EventEmitter interface to listen to article emissions)

Conclusion

Now you know-how to fetch blog meta data and posts using feednami. Do share with your friends. :)


Check out what's latest in ECMA 2020 -
https://www.geekstutorialpoint.com/2020/04/whats-new-in-ecmascript-2020.html

Difference Between Promise.all() and Promise.allSettled()
https://www.geekstutorialpoint.com/2020/05/promiseallsettled-vs-promiseall.html



Please feel free to contact us on -
Facebook - https://www.facebook.com/geekstutorialpoint 
Contact us - https://www.geekstutorialpoint.com/p/contact.html

Post a Comment

1 Comments

Please feel free to contact, if you want any help regarding programming. Suggestions are always welcome.