Using Yahoo Query Language YQL Display Blogger Blog Feed/Posts Anywhere

Ever since Google shut down their free feed API service late December 2016, Blogger users have contacted us in finding out on any alternatives which is more stable, reliable & most important clean API's to retrieve blog feed data publicly - most important FREE!

Reasons were:

1. Many of their Blogger plugins was hosted on domain outside of their blog which when using javascript (to send/retrieve data cross domain) as-is would not be possible.
2. Issues with Blogger blogs with HTTP & HTTPS protocols due to browser security & restrictions.
3. Returns/receive datas which can be easily manipulated/process.
4. Developing an AMP iframe to deploy/display blog feed which requires HTTPS connection & compatible with HTTP protocol.

Here's Yahoo! Query Language (YQL), from Yahoo! developer website...

The YQL (Yahoo! Query Language) platform enables you to query, filter, and combine data across the web through a single interface. It exposes a SQL-like syntax that is both familiar to developers and expressive enough for getting the right data.

Since that YQL provides JSON data format as data output, makes it easier for Blogger template developers/designers to retrieve datas - just like how they normally would retrieving JSONp datas using Blogger's blog internal data feed API.

Below is an example how to use YQL using plain/pure javascript, process data & output Blogger feed data to HTML. This script can be hosted on a different domain with HTTP or HTTPS  (works best for compatibility) protocols for any Blogger blogs (with or without HTTPS enabled).


Find out how this script can be utilized with an amp-iframe for AMP + Blogger template integrations.


The script provided here is for learning/reference purposes. Do consider additional data checks for live production/usages.

<script>
//<![CDATA[
/*
@title: YQL RSS Blogger Feed Retriever
@author: irsah
@url: irsah.com
@blog: blog.irsah.com
@license: blog.irsah.com/software
*/

// a Blogger blog feed URL
var FEED_URL = 'http://blogr-amp.blogspot.com/feeds/posts/default';

// construct YQL query URL with blog feed
// limit to search 5 posts
// return data in JSON format
var YQLurl = 'https://query.yahooapis.com/v1/public/yql?q=' + encodeURIComponent('select * from feed where url="' + FEED_URL + '"') + ' limit 5&format=json';

// plain javascript function equals to jQuery $getJSON ;)
function getYQL( url , callback ){
  var xmlhttp = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject("Microsoft.XMLHTTP");
  xmlhttp.onreadystatechange = function() {
    if ( xmlhttp.readyState === 4 && xmlhttp.status === 200 ) {
      callback( xmlhttp.responseText );
    };
  };
  xmlhttp.open("GET", url, true);
  xmlhttp.send();
};

// callback
var createFeed = function( data ){

  // response are JSON strings, then convert to JSON objects...
  // todo: consider additional check as valid JSON string formats
  data = JSON.parse( data );

  var entries = data.query.results.entry;

  // global variables for HTML output
  var title = '',
  content = '',
  image = '',
  link = '#';

  // create unordered list
  var UL = document.createElement('ul');
  UL.id = 'blog-feed';

  // literate thru data entries
  for ( var i = 0; i < entries.length; i++ ){

    // create list holder
    var LI = document.createElement('li');
    var entry = entries[i];

    // get post link...
    if ( entry.link !== undefined ){
      link = entry.link[2].href;
    };

    // if thumbnail available, get post thumbnail...
    if ( entry.thumbnail !== undefined ){
      image = document.createElement('img');
      image.src = entry.thumbnail.url;
      LI.appendChild( image )
    };

    // if title available, get the title...
    if ( entry.title !== undefined ){
      title = document.createElement('h4');
      var A = document.createElement('a');
      A.href = link;
      A.innerHTML = entry.title.content; 
      title.appendChild( A );
      LI.appendChild( title );
    };

    // if content available, get the content text...
    if ( entry.content !== undefined ) {
      content = entry.content.content;
      var regex = /<\S[^>]*>/g;
      content = content.replace(regex,"");
      content = content.substring( 0, content.lastIndexOf(' ', 160 ) ) + ' ...'; 
    };
    if ( content !== '' ){
      var P = document.createElement('p');
      P.innerHTML  = content;
      LI.appendChild( P );
    };

    // append LI to UL holder
    UL.append( LI );
  };

  // check if DOM element exists
  // if it does, append constructed feed datas
  if( document.getElementById('my-feed') !== null ){
    document.getElementById('my-feed').append( UL );
  };

};

// initilize YQL feed
getYQL( YQLurl, createFeed );

//]]>
</script>

Replace FEED_URL to your Blogger blog feed URL.

Add some CSS styles...

<style>
#blog-feed { background-color: #f9f9f9; padding: 20px; }
#blog-feed ul { list-style:none; padding:0; margin:0; }
#blog-feed li { overflow:hidden; margin-bottom:15px; }
#blog-feed img { float: left; margin-right:15px; margin-bottom: 15px; }
#blog-feed h4 { margin:0 0 10px; }
</style>

Of course, to output the feed in your blog pages, create a <div/> element with an id of my-feed like so & add this before the script:-

<div id="my-feed"></div>

And the results (live working example)...

Output in HTML...

<ul id="blog-feed">
  <li>
    <img src="{{blog-post-thumbnail-src}}" />
    <h4>
      <a href="{{blog-post-url}}">
        {{ blog post title }}
      </a>
    </h4>
    <p>
      {{ ... blog post content ... }}
    </p>
  </li>
  <li>

    {{ ... repeat ... }}

  </li>
  <li>

    {{ ... repeat ... }}

  </li>
</ul>

Meet ampaction(js)

This technique is used at ampaction(js) a small 18 Kb file plugin for Blogr-AMP Blogger AMP HTML Template to send, retrieve & process Blogger feed data & display as an HTML format using amp-iframe. Some of the features are:-

• Works on HTTP & HTTPS served blogs.
• Works for custom domain blog without HTTPS.
• Easy setup right from blog Template HTML.
• Fully documented & developed for Blogger + AMP integrations.
• YQL 95.8% uptime service up to 20,000 requests per IP/an hour.
• Added jQuery dependencies for easy callback data manipulation.
• All-in-one Blogger blog feed retrieval with fallback & error checking.

ampaction(js) can:-

• Displays DISQUS comments form & thread
• Displays blog feed/posts in chronological/random order.
• Displays blog feed/posts by related label in chronological/random order.
• Displays a blog content by URL.

Even if your custom domain blog hosted with Blogger does not have HTTPS (yet), your blog can still use AMP HTML (with rich contents from your own blog feed) to leverage your blog pages in search engine results - with minimal effort ;).

Blogr-AMP template framework comes in handy & pretty good alternative to get started & leverage your blog posts in search results by transforming blog posts AMP ready instantly.

No 3rd party feed proxy services needed or to subscribe to.
No changes to your blog post editing.
No changes to your earlier blog posts.

Blogr-AMP theme can be installed & un-istalled without compromising your Blogger post or template setup - even if you opt out of AMP integrations & (re-consider) to use any other Blogger templates ( if you want to ).

Shoot a comment below or contact us here for more info.