Blog posts (blogspot) in Oracle APEX

How to get your latest blog posts in your APEX applications?

Quick ref guide

Very recently I have posted my notes on how to get your Twitter tweets in you APEX applications and this post is very similar with initial request.

We were doing some changes on our public websites and decided it would be cool to be able to automatically retrieve latest posts from our team blogs. After an initial research this is the easiest way to do this. 

Step 0. Download google API JS or simply reference it on your page https://www.google.com/jsapi

Step 1. create a simple static content region with a static ID of your choice. 

In my example this is region with ID set to Blog_region.

Step 2. Add this to your HTML page header

<script type="text/javascript" src="#WORKSPACE_IMAGES#google_jspi.js"></script>
    <script type="text/javascript">

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

    function initialize() {
      var resultLimit = 5;
      var blogURL = 'http://lschilde.blogspot.com/feeds/posts/full?max-results='+ resultLimit;
      var feed = new google.feeds.Feed(blogURL);
      feed.setNumEntries(resultLimit); //this restics how many rows to return
      feed.load(function(result) {
        if (!result.error) {
          var HTML_content = '<div class="row">  <div id="leftcol">';
          for (var i = 0; i < result.feed.entries.length; i++) {
          var entry = result.feed.entries[i];
          var publishedDate =   entry.publishedDate;
          var title = entry.title;
          if(title.length == 0){
              var field = entry.content;
              var title = field.substr(115, field.indexOf("</span></h2><h3 ")-115);
                entry.content = entry.content.replace(title, "");
                //alert(title);
              }
          HTML_content += '<article class="post"><div><h3 class="post_title"><a href="'
                     + entry.link
                     + '" target="_blank">'
                     + title
                     +'</a></h3> <div><i class="fa-time"></i> '
                     + entry.publishedDate
                     +' </div></div><div>'
                     + entry.content
                     + '<br><a href="'
                     + entry.link
                     + '" target="_blank" class="btn btn-primary">Read More</a> </div> </article> ';

        
          }//end loop
      

          HTML_content += '</div> </div>';

         //add this feed html code to APEX REGION
          $("#Blog_region").append(HTML_content);
        }
      });
    }
    google.setOnLoadCallback(initialize);
  
    </script>

Together with this CSS:

article.post .post_title .btn {
    margin-top: 30px;
}
.btn-primary {
    background-color: #428bca;
    border-color: #357ebd;
    color: #ffffff;
}
.btn {
    -moz-user-select: none;
    background-image: none;
    border: 1px solid transparent;
    border-radius: 4px;
    cursor: pointer;
    display: inline-block;
    font-size: 14px;
    font-weight: normal;
    line-height: 1.42857;
    margin-bottom: 0;
    padding: 6px 12px;
    text-align: center;
    vertical-align: middle;
    white-space: nowrap;
}
a {
    color: #428bca;
    text-decoration: none;
}

Please check it out in live demo - Blog in APEX

 

Except few parameters that you can reconfigure and make dynamic this is all. One note is that sometimes depending on your blog template title field can be returned as empty hence the title.length hack.

Happy to share.

Cheers,

SLino