Learn More

Tuesday, May 22, 2012

How To Retrieve Posts Using Blogger Javascript API

blogger logo
Retrieving the posts of blogger using Javascript API is more stable, when compared with using Json Feed API. On the post we have previously explained, that one of the advantages of using the Blogger JavaScript API is able to edit, delete the content of your blog. However, not everyone understands very well how to use it. Therefore, on our current post, we try to provide the best and easiest tutorial in getting your post with the Javascript API. However, we recommend that you have read our post about Basic Blogger JavaScript API, Basic Using the JavaScript Client Library, Json Blogger Feed API, Blogger API, and Google Data API Basic.


Need to we remind you again, we write the code below is valid for a public blog. The first step you should do when using Blogger JavaScript API is to place the following code before </head>

<script src="http://www.google.com/jsapi" type="text/javascript"></script>
    <script type="text/javascript">
      google.load("gdata", "1.x", { packages : ["blogger"] });
    </script>

You can use another version of google.load. Then, create a javascript code to get the content than your post with Javascript API for blogger. We have made the lists than Javascript API which is very useful to get the contents than your post.

ClassDescriptionExample
postRoot.entry.getTitle().getText()Get Title of PostBasic Blogger JSON Feed Api
postRoot.entry.getId().getValue()Get Id of Posttag:blogger.com,1999:blog-xxx.post-xxx
google.gdata.DateTime.toIso8601(
postRoot.entry.getPublished().getValue())
Get Publish Date of Post2012-05-19T23:26:00.000+07:00
google.gdata.DateTime.toIso8601(
postRoot.entry.getUpdated().getValue())
Get Update Date of Post2012-05-19T23:26:27.796+07:00
postRoot.entry.getThumbnail().getUrl()Get thumbnail of posthttp://4.bp.blogspot.com/.../minum+kopi.jpg
postRoot.entry.getContent().getText();Get content of postWe have discussed ...
postRoot.entry.getCategories()[i].getTerm()Get the i-th categories of postBlogger Api, Blogger SEO
postRoot.entry.getAuthors()[i].getName().getValue()Get the i-th authors of postPutri Arisnawati, Ibnu Syuhada
postRoot.entry.getAuthors()[0].getUri().getValue()Get the i-th Authors Uri of posthttps://profiles.google.com/...,
https://plus.google.com/...

After you study the table above, the following is an example to get a post than a blog. You can get more than one post, that is by involving for loop. Consider a similar example on our post about Json feeds.

<!DOCTYPE html>
<html>
  <head>
    <title>Example Using Blogger Javascript API From Threelas</title>
    <script src="http://www.google.com/jsapi" type="text/javascript"></script>
    <script type="text/javascript">
      google.load("gdata", "1.x", { packages : ["blogger"] });
    </script>
    <script type="text/javascript">
      function _run() {
        /*
        * Retrieve a specific blog post
        */
        
        // Obtain a reference to the 'content' div
        var content = document.getElementById('content');
        
        // Create the blogger service object
        var bloggerService =
            new google.gdata.blogger.BloggerService('Ibnu Syuhada, M.Sc');
        
        // The ID included in this URI can be retrieved from the <link rel="me">
        // element in the Blog's HTML source
        var feedUri = 'http://www.threelas.com/feeds/posts/default';
        
        // Called when getBlogPostFeed() returns the list of blog posts
        var handleBlogPostFeed = function(postsFeedRoot) {
          var blogTitle = postsFeedRoot.feed.getTitle().getText();
          var postEntry = postsFeedRoot.feed.getEntries()[0]; // only get first post
          var entryUri = postEntry.getSelfLink().getHref();   // post's uri
          
          // Get the blog post entry
          bloggerService.getBlogPostEntry(entryUri,
              function(postRoot) {
                var postTitle = postRoot.entry.getTitle().getText();
                var postId = postRoot.entry.getId().getValue();
                var postPublished = google.gdata.DateTime.toIso8601(postRoot.entry.getPublished().getValue());
            var postUpdated = google.gdata.DateTime.toIso8601(postRoot.entry.getUpdated().getValue());
            var postImageUrl = postRoot.entry.getThumbnail().getUrl();
            var postContent = postRoot.entry.getContent().getText();
            var postCategories = postRoot.entry.getCategories()[0].getTerm();
            var postAuthorsName = postRoot.entry.getAuthors()[0].getName().getValue();
            var postAuthorsUri = postRoot.entry.getAuthors()[0].getUri().getValue();
                        
                content.innerHTML = '<p>Title of latest post to ' + blogTitle + ': '
                                  + '<strong>"' + postTitle + '"</strong></p>'
                  +'<p>post Id ='+postId+'</p>'+'<p>post Published ='+postPublished+'</p>'
                            +'<p>post Updated ='+postUpdated+'</p>'
                  +'<p>post ImageUrl ='+postImageUrl+'</p>'
                  +'<p>post Content ='+postContent+'</p>'
                  +'<p>post Categories ='+postCategories+'</p>'
                  +'<p>post Authors Name ='+postAuthorsName+'</p>'
                  +'<p>post Authors Uri ='+postAuthorsUri+'</p>';
        
        ;      },
              handleError
          );
        };
        
        var handleError = function(error) {
          content.innerHTML = '<pre>' + error + '</pre>';
        };
        
        bloggerService.getBlogPostFeed(feedUri, handleBlogPostFeed, handleError);
      }
      google.setOnLoadCallback(_run);
    </script>
  </head>
  <body>
    <div id="content">Loading...</div>
  </body>
</html>


Easy is not it? Hopefully this tutorial useful. If you like our tutorials and sample code from us, please give us suggestions and donations.

Post a Comment