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.
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.
b:includable
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.
b:widget
main
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.
b:if
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
data:post.commentHtml
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.
data:post.comments
data:comment.inReplyTo
id
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!
posts.list
blogId
fields
items(content,title)
<script src="https://apis.google.com/js/client.js?onload=init"></script>
onload=init
init
function init() { gapi.client.setApiKey('YOUR_API_KEY'); gapi.client.load('blogger', 'v2', function() { // ... }); }
gapi.client.load
var request = gapi.client.blogger.posts.list({ 'blogId': 3213900, 'fields': 'items(content,title)' });
request.execute(function(response) { // ... });
response
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/>"); } }
It’s wonderful to see a lot of our users taking us up on our offer to merge our Blogger Profile with the Google+ Profile. For developers this means that there is one small wrinkle to worry about - the format of the ProfileId for these migrated users has changed.
ProfileId
What’s a ProfileId, and what’s it used for?
The ProfileId is a component of the path for the Retrieving a List of Blogs Blogger GData protocol call, which can either be the value default, which is the recommended value and means the currently authenticated user, or alternatively it can be the profile identifier of the current authenticated user. Up until now, the profile identifier has always been numeric, but for the converted Google+ Profile Blogger users, this is no longer the case.
default
For users that have converted to using Google+ Profiles on Blogger, the ProfileId can be derived as follows. Take the Google+ profile url for a user that has chosen to convert, for example https://plus.google.com/114895967455102275039/, then take the numeric portion at the end of the URL, prepend it with a g, and like magic, you have the new Blogger ProfileId.
If you have any questions, please do not hesitate to ask on the Blogger Developers group, and if you are on Google+, have a look at our Blogger Google+ Page.
Many Bloggers put a lot of time and effort into creating a unique look for their blog, so today we’re excited to announce that custom templates are now also viewable from mobile devices.
If you have a custom template for your blog and want it to appear on mobile browsers as well, visit the “Template” tab of your dashboard, click on the gear icon beneath the mobile template preview.
Then select “Custom” from the “Choose mobile template” pulldown.
Your template may not look exactly the same on a mobile browser, so click “Preview” to make sure it appears the way you want it to before you save it.
If you have gadgets on your blog, you can also control which of them will be available in mobile view, using this new attribute: mobile in <b:widget> tag. It can be 'default', 'yes', 'no', or 'only'.
mobile
<b:widget>
'default'
'yes'
'no'
'only'
The widgets that display on mobile by default are the following:
The following widget will not be available in mobile view, because it’s a BlogArchive widget.
<b:widget id='BlogArchive1' title='Blog Archive' type='BlogArchive'>
To make it available in mobile view, add mobile=’yes’ attribute to it.
mobile=’yes’
<b:widget id='BlogArchive1' mobile='yes' title='Blog Archive' type='BlogArchive'>
Setting mobile to 'no' makes a widget not display in mobile view, even if available in mobile view by default.
<b:widget id='Attribution1' mobile='no' title='Attribution' type='Attribution'>
You can also make a widget available only in mobile view by setting it to 'only'.
<b:widget id='BlogArchive1' mobile='only' title='Blog Archive' type='BlogArchive'>
The content of a widget can modified for mobile view with the boolean variable data:blog.isMobile.
boolean
data:blog.isMobile
<div class="widget-content"> <b:if cond="data:blog.isMobile"> <!-- Show a text link in mobile view.--> <a href="http://www.blogger.com"> Powered By Blogger </a> <b:else/> <!-- Show an image link in desktop view.--> <a href="http://www.blogger.com"> <img expr:src="data:fullButton" alt="Powered By Blogger"/> </a> </b:if> </div>
The above template HTML shows different contents between desktop view and mobile view, depending on the value of the data:blog.isMobile variable.
You can conditionally give different CSS properties to a same class between desktop view and mobile view, as the <body> tag of Blogger mobile templates has mobile as its class. First, make sure the <body> tag of your custom template is same as the following one.
<body>
<body expr:class='"loading" + data:blog.mobileClass'>
Then, you can define different CSS properties for desktop and mobile view.
/* For desktop view */ .date-posts { margin: 0 -$(separator.outdent); padding: 0 $(separator.outdent); } /* For mobile view */ .mobile .date-posts { margin: 0; padding: 0; }
We hope you will enjoy making your very own mobile templates.
Updated: Changed data:mobile to data:blog.isMobile
data:mobile
Today we have made a change to the Layouts Template language to improve Google Analytics coverage. We have added the following includable section.
<b:includable id='google-analytics' var='blog'> <b:if cond='data:blog.analyticsAccountNumber'> <script type='text/javascript'> var _gaq = _gaq || []; _gaq.push(['_setAccount', '<data:blog.analyticsAccountNumber/>']); _gaq.push(['_trackPageview']); (function() { var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true; ga.src = (document.location.protocol == 'https:' ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s); })(); </script> </b:if> </b:includable>
This now allows you to include analytics tracking on your blog by adding the following include call to your template, preferably right before the close body tag so it doesn’t delay the visible page being rendered:
<b:include name='google-analytics' data='blog'/>
For more details on the benefits you get from using Google Analytics, see this post on Blogger Buzz. If you have any questions about this new functionality, please join in the discussion on the Blogger Developer Group.
<html> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script> <script> // Request an API Key for the Blogger API from // https://code.google.com/apis/console/ var apikey = "YOUR API KEY HERE"; // You can find the blogId in the HTML source of a blog var blogId = "2399953"; // When the document is loaded $(document).ready(function() { // Make a JSONP request for the Posts on the Blogger Buzz blog $.ajax({ url:"https://www.googleapis.com/blogger/v2/blogs/”+ blogId+”/posts?key="+apikey, dataType: "jsonp", success: function(data, textStatus, jqXHR) { var items = []; // Construct a chunk of HTML for each post // containing the Post title, content, and a // link to the post author. $.each(data.items, function(index, value) { items.push("<h2>"+value.title+"</h2>"+value.content+ "<p>Posted by <em><a href='"+value.author.url+"'>"+ value.author.displayName+"</a></em></p>"); }); // And finally, append the generated content to the page body. $(items.join('')).appendTo('body'); } }); }); </script> </html>
It is important to understand that this release is the first step on a journey of discovery, as we work with all of you to build a better API for using Blogger. Please review the documentation, and join in the discussion on Blogger Developer Group and let us know what we can add to the API to make it more useful for you!
<div class="blogger-post-footer">
blogger-post-footer
Blog authors around the world, Google would like to remind you that it's your blog, your data. Now that Blogger allows users the ability to export all contents of their blog, the Data Liberation team would like to announce the Google Blog Converters project. This new Open Source project provides the ability to easily move blog posts and comments from service to service. This initial release provides Python libraries and runnable scripts that convert between the export formats of Blogger, LiveJournal, MovableType, and WordPress.
rel="self"
rel="next"
rel="prev"
<media:thumbnail>
<thr:in-reply-to>
<uri>
<person>
<entry>
noreply@blogger.com
