[go: up one dir, main page]

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.

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.

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'.

The widgets that display on mobile by default are the following:

  • Header
  • Blog
  • Profile
  • PageList
  • AdSense
  • Attribution

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.

<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.

<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 expr:class='&quot;loading&quot; + 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

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.

As you may have noticed, the Blogger Development Network Blog looks a lot different today. That’s because we—along with a few other Google blogs—are trying out a new set of Blogger templates called Dynamic Views. Launched today, Dynamic Views is a unique browsing experience that makes it easier and faster for readers to explore blogs in interactive ways. We’re using the Classic view, but you can also preview this blog in any of the other six new views by using the view selection bar at the top left of the screen. We’re eager to hear what you think about the new Dynamic Views. You can submit feedback using the “Send feedback” link on the bottom right of this page. If you like what you see here, and we hope you do, we encourage you to try out the new look(s) on your own blog—read the Blogger Buzz post for more info.

Today we’re announcing the public availability of the Blogger JSON API we spoke about at this year’s Google I/O. The focus of this release is to make it easier to build applications that interoperate with Blogger by using a lightweight JSON syntax.

One of the driving reasons for this release is to recognize how much the world has changed during the lifetime of Blogger. Where once we built everything as desktop applications, we now spend our time building full-blown applications inside the browser frame using JavaScript and HTML5 apps.

To start using the Blogger JSON API, sign in to the Google API Console and request Blogger API access. This will take you to a form that asks you to explain how you intend to use the API, and an estimate of your daily traffic levels. This information helps us evaluate your request for approval and give us a better understanding of how the community is using our APIs as we work to improve them.

To demonstrate how much easier this API is to use, especially for JavaScript mashups, here is a JavaScript renderer for the Blogger Buzz blog.

<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!

Recently we updated Blogger’s authorization system to be more consistent with regards to the difference in roles between blogger.com and blogspot.com. As a result, some third-party integrations that depended on an unintended quirk of our previous system broke. This post explains the issue and how to update your implementation to be compliant with the correct authorization behavior.

The Blogger Developer’s Guide explains how to authenticate to our services on the URLs under http://www.blogger.com/feeds/profileID/. The unintended quirk allowed authentication requests against public feed URLs hosted on the blogspot.com domain. Under the updated system, this is no longer permitted.

Now, authorization is only permitted against https://www.blogger.com/feeds/ and http://www.blogger.com/feeds/. The feeds are not going away; instead we are separating the read-only, unauthenticated subscriptions from authenticated access to Blogger’s read-write APIs.

We apologize that the impact of this behavior change was not made more clear initially. If you have any further questions on this matter — or Blogger development in general — please post a question in our BloggerDev forum.

Blogger’s GData API is now available over HTTPS using OAuth 2. These changes result in less code, increased productivity, and enhanced security. Let’s take a look at how it works using OACurl, a wrapper for the curl command line tool that authenticates you using OAuth.

Prerequisites

First up you need to install Mercurial and Maven. Mercurial is the source revision control software used by the OACurl project. Maven is a java build system used to download and include the dependencies required by OACurl. Once we begin using oacurl we will use HTML Tidy to make the returned XML readable.

Getting OACurl

Now that you have installed Maven and Mercurial, you can checkout oacurl and build it as follows.

$ hg clone https://oacurl.googlecode.com/hg/ oacurl
$ cd oacurl
$ mvn assembly:assembly

Once you have done this you will have a shell script in your current directory called oacurl that you can use to invoke oacurl with all the appropriate Java class paths set for you.

Logging into Blogger

Logging into Blogger using OAuth involves doing a round trip to Google’s servers to grant access for third parties. In the case of oacurl, this involves invoking a web browser that shows you that oacurl is requesting access to your Blogger account.

$ ./oacurl login --blogger

Once you have granted access, then you will be able to explore Blogger’s API using oacurl.
Retrieving a list of your Blogger blogs

A good place to start is to list out your blogs. This is an Atom feed where each item in the list is a blog owned by the user who requested it.

$ ./oacurl https://www.blogger.com/feeds/default/blogs

To see the blogs of a specific user you can change the default for a specific user’s profile id instead. For instance, here is a list of my blogs.

$ ./oacurl https://www.blogger.com/feeds/16258312240222542576/blogs

To make the output XML readable, I suggest piping the output from the commands through tidy like this:

$ ./oacurl https://www.blogger.com/feeds/default/blogs | tidy -xml -quiet -indent

I will leave that off the following commands for readability.

Retrieving the feed of a specific Blogger blog

To retrieve the content of a blogger blog, we select the blog we want from the list of blogs in the blog feed, and then follow the appropriate link. In this case we are using the post link as it stays within the scope of our OAuth authorisation.

<link rel='http://schemas.google.com/g/2005#post'
    type='application/atom+xml' href= 'http://www.blogger.com/feeds/4967929378133675647/posts/default' />

Posting a new entry to a feed

If I wanted to post a new entry to my test blog, all I need to do is create a new entry in Atom format, and post it to the above url. So, I create a file with the following content called post.xml:

<entry xmlns='http://www.w3.org/2005/Atom'>
  <title type="text">Posting via OACurl</title>
  <content type="xhtml">And some <b>content</b>.</content>
</entry>

I can submit this to Blogger to create a new post like this:

$ cat post.xml | ./oacurl -X POST https://www.blogger.com/feeds/4967929378133675647/posts/default

This, of course, won’t work for you, as my test blog is only set up for me to post to. Modify the post URL in the command to match the one from one of the Blogger blogs you own. The result from the command is the fully expanded Atom entry for the post that was just created.

This Atom entry contains the information you need to modify it. The link with rel='edit' is the magic entry. For blogger, this is the same as the rel='self' link. To edit the content for the blog post I just created, first I retrieve the content at the edit URL:

$ ./oacurl https://www.blogger.com/feeds/4967929378133675647/posts/default/2170959137511831372 > post-edit.xml

We can now modify the title and content using a text editor, and then PUT it back, in proper REST style.

$ vi post-edit.xml
$ cat post-edit.xml | ./oacurl -X PUT https://www.blogger.com/feeds/4967929378133675647/posts/default/2170959137511831372

The Atom representation also contains the information required to create, retrieve, and delete the comments on this entry. See if you can spot the appropriate URLs in the output XML.

Using the libraries

You can use various libraries with the Blogger GData APIs, for example the Java GData client, but it is very useful to understand what the library is doing for you under the covers. And exploring is fun!

If you have any questions after reading this post, please feel free to post your questions to the Blogger Dev Google Group.

References

OACurl: http://code.google.com/p/oacurl/
OAuth: http://oauth.net/
Mercurial: http://mercurial.selenic.com/
Maven: http://maven.apache.org/
Atom overview: http://en.wikipedia.org/wiki/Atom_(standard)
Atom Specification: http://www.atomenabled.org/developers/syndication/atom-format-spec.php
HTML Tidy: http://www.w3.org/People/Raggett/tidy/
Java GData Client: http://code.google.com/p/gdata-java-client/
Blogger Dev Google group: http://groups.google.com/group/bloggerdev