Technology Geek

I used blogger [a.k.a BlogSpot] for sometime and liked it, in the recent time I want complete control over designing and displaying and moved to Drupal hosting and start blogging over there with my own website.

I want to show my old entries from blogger on my new website, then I found blogger provides us rss feeds in xml or json format of the full post, I was happy and start working on it.

First I thought that I would add entries manually, but what if I have hundreds of entries, then I opt to show all recent entries dynamically. I opt jQuery for all  my work.

If you have blogger account then you might have following address:

http://yourname.blogspot.com

and you can find the json feeds at the following url:

http://YOURNAME.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&max-results=10

Don’t forget to replace above url with your actual username.

Now I want to show 10 latest published post from blogger to my website, or we can get it in any website, all we need to paste the following code:

<script type="text/javascript">
        $(function() {
            $("#ajaxloader").show();
            var monthname = new Array("Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec");
            $.getJSON("http://dnetpro.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&max-results=10&callback=?",
            function(data) {
                $.each(data.feed.entry, function(i, postentry) {
                    var posttitle = postentry.title.$t
                    var postsummary = postentry.summary.$t.substring(0, 100);
                    var striphtml = /<\S[^>]*>/g;
                    postsummary = postsummary.replace(striphtml, "")
                    var postdate = postentry.published.$t.substring(0, 10);
                    var postyear = postdate.substring(0, 4);
                    var postmonth = postdate.substring(5, 7);
                    var postday = postdate.substring(8, 10);
                    var datehtml = $("<div class='divblogdate'></div>");
                    $("<div class='monthbg'></div>").html(monthname[parseInt(postmonth,10)-1]).appendTo(datehtml);
                    $("<div class='datebg'></div>").html(postday).appendTo(datehtml);
                    datehtml.appendTo("#posts");
                    $.each(postentry.link, function(j, postlink) {
                        if (postlink.rel == 'alternate') {
                            var linkhtml = $("<div class='divbloglink'></div>");
                            $("<a class='bloglink'></a>").html(posttitle).attr("href", postlink.href).appendTo(linkhtml);
                            $("<p></p>").html(postsummary + "...").appendTo(linkhtml);
                            linkhtml.appendTo("#posts");
                        }
                    });
                });
                $("#ajaxloader").hide("fast");
            });
        });
    </script>

Above code will fetch 10 latest blog entries of mine and inject the manipulated feed into my ASP.NET page. There is no need to have a ASP.NET page for getting blogger feed, you can get it in simple html page and don’t forget to include latest jquery reference in your page.

My html markup is also simple, here it is:

<h2>
	.Net Pro Blog
</h2>
<p>Recent blog post. enjoy!</p>
<div id="ajaxloader" style="display: none;">
	<img alt="Loading..." src="images/spinner.gif" />&nbsp;<span>Loading...</span>
</div>
<div id="posts">
</div>

Now return to the above jQuery code and understand it. I started with jQuery’s document.ready() function, I used it’s simplest shortcut. In that vary function I called show() method which show’s up hidden progress indicator, then I declared array of months name. After that actual calling to the blogger feed is done with the help of jQuery’s getJSON method which have following general syntax:

jQuery.getJSON( url, [data], [callback] )

I provided above defined url in the first parameter, which is straight forward, On the second parameter I’ve anonymous function which gets and generate the desired output.

You can find more about the blogger api at Google.

Live demo

You can do more with it at your own.

Hope this works!