BUA TV News

BUA Inc Website Developer

 BUA Inc Website Developer

Posted by: +Samantha Schaffer and +Renee Kwang, Software Engineer Interns.

Whether you’re a web developer who builds blog templates for a living, or a web-savvy blog owner who prefers to make changes to your template using HTML, CSS or JavaScript, you may be interested in some enhancements that we made to Blogger’s Template HTML Editor.

Your blog’s HTML template is the source code that controls the appearance of your blog. This template can be customized to appear however you’d like. The improved HTML template editor now supports line numbering, syntax highlighting, auto-indentation and code folding to make editing your template much easier.

Suppose we wanted to move the date of a blog post underneath the post title, similar to the Blogger Buzz blog. To do this, follow these steps:
Click the “Template” tab on the Blogger dashboard, then the “Edit HTML” button, to see the new template HTML editor:
Locate the “Blog1” widget quickly using the new “Jump to widget” drop down:
This widget controls how your blog posts are displayed. The code inside the widget is folded by default. Clicking the new fold markers ‘►’ next to the line numbers expands the widget and reveals a set of “includable” tags:
Inside the “main” includable is the block of code that renders the post date:
Cut the post date code section and move it to where we want it, in this case, under the post title in the “post” includable:
To check our changes, click the new “Preview template” button to see the updates:
The post date is exactly where we want it, so tab back to “Edit template”, hit “Save template” and we’re done!

Finally, we’ve added a “Format template” button that automatically cleans up the indentation of the template, and made it possible to search for text by pressing “Ctrl+F” once you’ve clicked into the editor. To find and replace text occurrences one by one, use “Ctrl+Shift+F” or to find and replace all occurrences at once, use “Ctrl+Shift+R”.
 
We worked on this project as part of Google Australia’s BOLD Diversity Internship Program. We hope you enjoy the changes we’ve made!
 

One of the most requested features that developers have for the Blogger JSON API is the ability to create posts. So have a quick guess what the following HTTP request does?

POST https://www.googleapis.com/blogger/v3/blogs/8070105920543249955/posts/ HTTP/1.0
Host: www.googleapis.com
Authorization: Bearer <OAuth2 key>
Content-Type: application/json

{
  "kind": "blogger#post",
  "blog": {
    "id": "8070105920543249955"
  },
  "title": "A new post",
  "content": "With <b>exciting</b> content..."
}

That’s right, Blogger API v3 gives you the ability to create posts! Oh, and edit, delete and search them as well!

There is documentation that covers all this new functionality. Firstly we have a Getting Started document that gives you an overview of using the API. Then there is a more detailed Using Blogger API guide that shows how you would use the API. Finally the API Reference that covers the fine details, like argument and result specifications for all the calls.

If you have any questions about how to use this new API, please join in the discussion on the Blogger Developer group.

 

Blogger documentation has a new home: it has moved to developers.google.com/blogger!

I have re-arranged the documentation a little to make it easier to navigate, but it is largely the same documentation you will remember from code.google.com/apis/blogger. If you find anything is out of place or hard to find, please let us know on the Blogger Developer forum.
 

Recently we released an update to Blogger’s commenting system that enables people to directly respond to comments. This capability is known as Threaded Comments. We are pleased to see quite a few people diving in and writing tutorials, including a screencast. It’s wonderful to see the enthusiasm of our developers!

In this post we will look at what are the changes required to modify a custom template to enable Threaded Comments, once you have fulfilled the requirements outlined in the Threaded Comments announcement post on Buzz.blogger.com. We will then look at how to customise the look and feel of the Threaded Comments using just CSS, and also have a quick peek at alternatives.

Please note, these instructions may not work if your blog’s template is heavily customised. Your template may possibly missing some of the b:includables that the instructions below depend on. Please try the following instructions on your template, but if they don’t work come to our Blogger Developer forum and get some help with patching your template.

The first step is to Edit the HTML for your Template, which can be found inside Settings under the Template tab. You must make sure to expand the Widget Templates, as we need to modify the main Blog Widget Template. To find the main Blog Widget code, search for the following Blogger Layouts Template code:

<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'>

Inside the b:widget are a series of b:includable blocks. These act a lot like functions in programming languages, in that they can be called from other b:includable blocks to insert chunks of HTML. The only special block is the includable called main, which is where the Layout Template engine starts when rendering the Widget’s content. If you don’t see content inside the b:widget, you need to click the Expand Widget Templates radio button above the edit area.

The Layout Template should include the following code:

<b:if cond='data:post.showThreadedComments'>
  <b:include data='post' name='threaded_comments'/>
<b:else/>
  <b:include data='post' name='comments'/>
</b:if>

The interesting part is that we have a fork here, implemented as a b:if conditional block, that decides whether to render the comments as threaded or not. The need for this split can be seen on the Threaded Comments announcement on Buzz.blogger.com.

As a quick aside, if you don’t have this code, but instead just have something like the following:

<b:include data='post' name='comments'/>

Then you can get threaded comments by replacing this b:include with the above logic block, assuming you fulfill the requirements laid out in the Threaded Comments announcement post on Buzz.blogger.com.

Now you can look at the implementation of the threaded_comments includable by searching for the following line of code:

<b:includable id='threaded_comments' var='post'>

This code is responsible for rendering the actual threaded comments to screen. You can choose to override this code block to customise the look of your comments, but it is worth noting that if you do, you won’t get updates to this functionality as we change the implementation in the future.

There are two new data members we have introduced with this feature release that you can use to render comment threads:

  • data:post.commentSrc This is the source to the javascript library that handles actions
  • data:post.commentHtml This is the rendered HTML for the comment thread

If you want to change the look and feel of your comments, we strongly recommend you use the Template Designer to set custom CSS to style the Threaded Comments. We suggest you customise the comments by modifying the property "Advanced > Add CSS". For example, you can add the following CSS code to change the look:

.comments blockquote { 
    border: 1px solid black; color: white; font: Helvetica;
} // draws a border around comment bodies, sets the text font and colour
.comments .inline-thread li { list-style-type: decimal; } // numbers replies

Finally, you can implement your own version of Threaded Comments by walking the data:post.comments directly. This will contain all the comments, ordered by time of comment, now with an optional extra field data:comment.inReplyTo which will contain the id of the parent comment, if there is one.

If you have any questions about how to customise your Blogger Comments, please feel free to drop by the Blogger Developer Forum. We’re glad to help!

 

As I have been reviewing the applications to use the Blogger JSON API, I have noticed that a fair number of you appear to be integrating with Blogger JSON API using JavaScript. So, in the interests of making things easier for all of you, here is a walk through of using the just released JavaScript Client Library for Google APIs to access the Blogger JSON API.
The first step is exploring the methods we can call in the Google APIs Explorer. The method in the Blogger JSON API collection that most people use, understandably, is the method to list the most recent posts for a Blog - posts.list. This method takes one required field - the blogId that identifies a particular blog - and a number of optional arguments that allow us to tune what information is returned.
The information I am requesting from the Blogger JSON API is the post titles and content for the code.blogger.com blog which has a blogId of 3213900. To limit the returned data to just the post titles and content, we use the optional argument fields with the value of items(content,title). Here is a link to the Google APIs Explorer with the appropriate information pre-filled so you can see both the underlying query that is sent to the Google APIs servers, as well as the shape of the returned JSON data.
The next step is the JavaScript required to request this data and make use of it. I am using the JavaScript Client Library to both construct the query, as well as navigate the results, reducing the complexity of the code.
To load the library, all we have to do is include a script in our HTML that loads the library as follows:
<script src="https://apis.google.com/js/client.js?onload=init"></script>
The part of this code to pay attention to is the argument onload=init. This nominates the init function to be called once the JavaScript Client Library has loaded. The init function is where we configure the client key and the API we want to work with:
function init() {
  gapi.client.setApiKey('YOUR_API_KEY');
  gapi.client.load('blogger', 'v2', function() {
    // ...  
  });
}
You can retrieve the API Key from your project on the Google APIs Console, once you have requested that I enable the Blogger API for your project. The gapi.client.load function takes the API name, and version, of the API you want to use, and a callback function to run once the API support code has been loaded. In this code, we are loading the Blogger v2 API.
Inside the gapi.client.load callback, we have the following code to configure a request to the Google APIs servers:
var request = gapi.client.blogger.posts.list({
  'blogId': 3213900,
  'fields': 'items(content,title)'
});
Note how we now no longer need to construct our own query url. The JavaScript Client Library deals with all the messy issues of making sure the arguments are correctly escaped. Next, we can issue the request to the servers as follows:
request.execute(function(response) {
  // ...
});
The execute method takes a callback function that will be executed once the Google APIs servers respond. The most important part of this callback function is the data that is handed to us in the response argument. In the body of the callback function, I iterate over the items member to pull out the titles and contents of all the returned posts:
for (var i = 0; i < response.items.length; i++) {
  $("#target").append("<h2>" + response.items[i].title + "</h2>");
  $("#target").append(response.items[i].content);
  if (i+1<response.items.length) {
    $("#target").append("<hr/>");
  }
}
The eagle eyed among you will have noticed that I am using jQuery to insert the returned HTML into the DOM. I am using the latest stable jQuery hosted on Google’s Libraries API.
You can see the results on code-blogger.appspot.com. I have used HTML5 Boilerplate as the starting point for building this example, to get all the latest HTML5 magic. If you have any questions about this sample, please post them to the Blogger Developers Group.

Post a Comment

0 Comments