After almost 5 years using Blogger, a few days ago I decided to move the platform to HTMLy an open source databaseless blogging platform (Flat-File Blog).
Yes, I am the HTMLy project lead so it's reasonable.
Tag: blogger
Blogger JSON Feed API
Maybe sometimes we need a widget for certain features, but the widgets are not available. Blogger already provides an APIs to overcome this, so we can create our own widget by reading the blog feed using the JSON and JavaScript.
Here is the JSON feed API:
| Object | Description | Example |
|---|---|---|
| json.feed.id.$t | Show blog ID | tag:blogger.com,1999:blog-12345 |
| json.feed.updated.$t | Last update of a blog | 2013-07-08T18:21:57.051+07:00 |
| json.feed.category[] | Categories / label array of a blog | |
| json.feed.category[i].term | Show the i-th category | Blogger |
| json.feed.title.$t | Show blog name | Danlogs |
| json.feed.subtitle.$t | Show description of a blog | Dan's Weblog |
| json.feed.author[] | Array of blog authors | Danang Probo Sayekti, Matt Cutts |
| json.feed.author[i].name.$t | Show the i-th blog author name | Danang Pobo Sayekti |
| json.feed.author[i].uri.$t | Show the i-th profile author uri | https://profiles.google.com/123456789 |
| json.feed.openSearch$totalResults.$t | Show total posts | 777 |
| json.feed.entry[] | Posts array of a blog | |
| json.feed.entry[i].id.$t | Show the i-th post ID | tag:blogger.com,1999:blog-8508.post-12345678 |
| json.feed.entry[i].title.$t | Show the i-th post title | Blogger JSON Feed API |
| json.feed.entry[i].published.$t | Show time published of the i-th post | 2013-07-07T12:56:00.000+07:00 |
| json.feed.entry[i].updated.$t | Show when the i-th post is updated | 2013-07-07T12:56:47.089+07:00 |
| json.feed.entry[i].category[] | Show array of post categories | |
| json.feed.entry[i].category[x].term | Show the x-th category of the i-th post | Blogger API |
| json.feed.entry[i].summary.$t | Show post summary | Maybe sometimes we need a widget ... |
| json.feed.entry[i].content.$t | Show post content | Maybe sometimes we need a widget for certain features, but the widgets are not available ... |
| json.feed.entry[i].link[] | Links array of a post | |
| json.feed.entry[i].link[x].href | Show the x-th link of the i-th post | http://www.danpros.com/2013/08/blogger-api.html |
| json.feed.entry[i].author[] | Array of post authors | |
| json.feed.entry[i].author[x].name.$t | Name of the x-th author on the i-th post | Danang Probo Sayekti |
| json.feed.entry[i].author[x].uri.$t | Show uri author profile | https://profiles.google.com/123456789 |
| json.feed.entry[i].author[x].gd$image.src | Image uri of the x-th author profile on the i-th post | //lh4.googleusercontent.com/photo.jpg |
| json.feed.entry[i].media$thumbnail.url | Show image on the i-th post | http://3.bp.blogspot.com/danlogs.jpg |
| json.feed.entry[i].thr$total.$t | Show total threaded comments | 7 |
Here is an example implementation of the above code:
Suppose I need 5 recent posts by a certain label, the label I want to display is "Blogger". I took the title and summary of the post.
<script type="text/javascript">
function mycallback(json) {
for (var i = 0; i < json.feed.entry.length; i++) {
for (var j = 0; j < json.feed.entry[i].link.length; j++) {
if (json.feed.entry[i].link[j].rel == 'alternate') {
var postUrl = json.feed.entry[i].link[j].href;
break;
}
}
var postTitle = json.feed.entry[i].title.$t;
var postSummary = json.feed.entry[i].summary.$t;
var item = '<div class="wrapper"><h3><a href=' + postUrl + '>' + postTitle + '</h3></a><p>' + postSummary + '</p></div>';
document.write(item);
}
}
</script>
<script src="http://www.danpros.com/feeds/posts/summary/-/Blogger?max-results=5&alt=json-in-script&callback=mycallback"></script>Note: we need to understand that json.feed.entry[i].summary.$t only available if we grab the feed URL using http://www.danpros.com/feeds/posts/summary instead of using http://www.danpros.com/feeds/posts/default.
Now how can we create a widget without unsorted recent post by a certain label? This widget also only displays 90 characters in the summary. The following is the example:
<script type="text/javascript">
function mycallback(json) {
for (var i = 0; i < json.feed.entry.length; i++) {
for (var j = 0; j < json.feed.entry[i].link.length; j++) {
if (json.feed.entry[i].link[j].rel == 'alternate') {
var postUrl = json.feed.entry[i].link[j].href;
break;
}
}
var postTitle = json.feed.entry[i].title.$t;
var postAuthor = json.feed.entry[i].author[0].name.$t;
var postSummary = json.feed.entry[i].summary.$t;
var entryShort = postSummary.substring(0, 90);
var entryEnd = entryShort.lastIndexOf(" ");
var postContent = entryShort.substring(0, entryEnd) + '...';
var item = '<div class="wrapper"><h3><a href=' + postUrl + '>' + postTitle + '</h3></a><span>'+ postAuthor + '</span><p>' + postContent + '</p></div>';
document.write(item);
}
}
</script>
<script src="http://www.danpros.com/feeds/posts/summary?orderby=published&max-results=5&alt=json-in-script&callback=mycallback"></script>Setting up robots.txt on Blogger
Blogger now allows custom robots.txt, this is very useful because we can set the visibility of our articles on search engines, we can determine whether the article will be indexed by search engines or not.
By default, every blog that uses the Blogger platform will have a robots.txt as follows:
User-agent: Mediapartners-Google
Disallow:
User-agent: *
Disallow: /search
Allow: /
Sitemap: http://www.example.com/feeds/posts/default?orderby=updatedAnd has the following explanations:
Mediapartners-Google is a robot from Google Adsense, leave it as is because if you mistakenly change that than the ads served will not fit with your content.
The next line is for all the robots and marked with an asterisk (*). On the default configuration, it is clear that the label of our blog is not indexed Disallow: /search.
Keep in mind that a slash (/) is as your homepage, so for example if you want the label to get indexed, do not just fill up with a slash like this Disallow: / because that would be you do not allow the robot tracing your blog, but it should like the example below:
User-agent: Mediapartners-Google
Disallow:
User-agent: *
Disallow:
Allow: /
Sitemap: http://www.example.com/feeds/posts/default?orderby=updated
With the configuration as above then all of the articles and the label will be indexed. And to block a robot for particular page (I take the example of my FAQ page) you can simply write as follows:
User-agent: Mediapartners-Google
Disallow:
User-agent: *
Disallow: /p/faq.html
Allow: /
Sitemap: http://www.example.com/feeds/posts/default?orderby=updated
Update: To resolve the pagination problems on blogspot after we remove the Disallow: /search than we can use the following configuration to block the pagination page:
User-agent: Mediapartners-Google
Disallow:
User-agent: *
Disallow: /search?updated-min=
Disallow: /search?updated-max=
Disallow: /search/label/*?updated-min=
Disallow: /search/label/*?updated-max=
Allow: /
Sitemap: http://www.example.com/feeds/posts/default?orderby=updated
After the changes, make sure everything is fit like what we want by visiting www.example.com/robots.txt. Replace the Example.com with your domain name.
Warning! Use with caution. Incorrect use of these features can result in your blog being ignored by search engines.
Note: Last updated on January 5, 2013.
Blogger new features: Search preferences
Starting today Blogger added some new features, the "Search preferences" that aims to maximize our blogs in search engines. If you care about the ranking of your blog, then this new feature is very exciting news.
Here are the new features are:
Maybe you realize that there is new option in the settings tab, the "Search preferences".
By clicking on it will bring up the three categories, the Meta tags, Errors and redirections, Crawlers and indexing.
For Meta tags category is serve to add a description tags on our blog, by enabling the Meta tags option then everytime we make new article will appear a new option called "Search Description" that allows us to add meta description to any post.
The next category is Errors and redirections, with this feature you can set the message that appears when visitors visit a page that is no longer exists on our blog, the "Page Not Found 404" error, and more helpful is that now we can redirect visitors to a particular page as we wish.
The last feature is Crawlers and indexing, here we can create our own robots.txt and header tags for our blog. It seems that now we can set the label of our blog to got indexed in the search result.
 And there is one additional feature on the link tool, where there is a new option, the ability to add rel = "nofollow" on every link.
 Blogger is now becoming increasingly intense. Lots of improvements, and all these new features become my favorite.
Blogger Dynamic Views and SEO
Previously I was a little worried when switching my blog theme to Blogger Dynamic Views theme, itâs because I read many articles if the Dynamic Views theme is not SEO friendly. But I decided to install it regardless of peopleâs opinions.
After trying it for over a week, I did not find any bad effects on traffic, even an increase in visitors and page views, indicating that changing the theme from regular theme to Dynamic Views theme is the perfect choice.
Update: Blogger finally adding Search preferences feature for SEO purposes.