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>
<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.
Class | Description | Example |
---|---|---|
postRoot.entry.getTitle().getText() | Get Title of Post | Basic Blogger JSON Feed Api |
postRoot.entry.getId().getValue() | Get Id of Post | tag:blogger.com,1999:blog-xxx.post-xxx |
google.gdata.DateTime.toIso8601( postRoot.entry.getPublished().getValue()) | Get Publish Date of Post | 2012-05-19T23:26:00.000+07:00 |
google.gdata.DateTime.toIso8601( postRoot.entry.getUpdated().getValue()) | Get Update Date of Post | 2012-05-19T23:26:27.796+07:00 |
postRoot.entry.getThumbnail().getUrl() | Get thumbnail of post | http://4.bp.blogspot.com/.../minum+kopi.jpg |
postRoot.entry.getContent().getText(); | Get content of post | We have discussed ... |
postRoot.entry.getCategories()[i].getTerm() | Get the i-th categories of post | Blogger Api, Blogger SEO |
postRoot.entry.getAuthors()[i].getName().getValue() | Get the i-th authors of post | Putri Arisnawati, Ibnu Syuhada |
postRoot.entry.getAuthors()[0].getUri().getValue() | Get the i-th Authors Uri of post | https://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.
<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