WordPress.com for Windows Metro

When we were starting work on the WordPress.com for Windows Metro app, we decided to build it entirely with the brand new WordPress.com REST API. The API gave us everything we needed to create a full-featured application that includes reading blogs, social features (post likes, reblogs), and creating new posts. Let’s take a look at a few code samples to see how we leveraged the API:

*note* All sample code is a condensed version of code from the Metro App. You can view the full source of the app at our trac site.

Creating a New Post

Once a user has authorized the app using OAuth (more info here), they can create new posts in the app. The /posts/new endpoint makes it very easy to create a new post via an XMLHttpRequest (xhr):


function publishPost() {
var title = "I Need a Good REST";
var content = "That's probably the corniest blog title ever created...";

var data = new FormData();

data.append('title', title);
data.append('content', content);
data.append('format', 'standard');

//note: blogID and users_access_token are received from the OAuth API
var url = 'https://public-api.wordpress.com/rest/v1/sites/' + blogID + '/posts/new';
 WinJS.xhr({
     type: 'POST',
     url: url,
     headers: { 'Authorization': 'Bearer ' + users_access_token },
     data: data
   }).then(function (result) {
     var resultData = JSON.parse(result.responseText);
  if (resultData.ID) {
    //post published!
  }
  else {
    //post publish failed
  }
}

Liking a Post

The Windows Metro app takes full advantage of the social features on WordPress.com, including likes, blog follows, and reblogs. Let’s take a look at using the /likes endpoint so that we can like a post through the API:


var curText = m.target.innerText,
likeButton = document.getElementById('like');
//just an example post_id
var post_id = 123;
//note: blogID and users_access_token are received from the OAuth API
if (curText == 'Like') {
   label.innerText = 'Liking...';
   url = 'https://public-api.wordpress.com/rest/v1/sites/' + blogID + '/posts/' + post_id + '/likes/new';
 } else {
   label.innerText = 'Unliking...';
   url = 'https://public-api.wordpress.com/rest/v1/sites/' + blogID + '/posts/' + post_id + '/likes/mine/delete';
 }

WinJS.xhr({
   type: 'POST',
   url: url,
   headers: { 'Authorization': 'Bearer ' + users_access_token }
 }).then(function (result) {
   //like operation successful!
 }, function (result) {
   //error
 });

You can see how we can also remove the like on the post by simply changing the endpoint on the post to /likes/mine/delete.

Conclusion

These examples are a small drop in the bucket of what you can do with the WordPress.com REST API. For a full list of the endpoints that are available, check out the documentation.

We’d love to hear how you are using the API in your applications! Drop us a note at our contact form to get in touch with the developer.wordpress.com team.

5 thoughts on “WordPress.com for Windows Metro and the REST API

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s