Meet Sulfur — a Media Manager App Built in JavaScript

Since Automattic is a distributed company and a lot of us work from home, we hold meetups to get face-to-face interaction. The whole company meets up once a year and individual teams get together more often. One component of those meetups is a “meetup project” that we all work on together.

The team I lead — “Team I/O*” — just finished a lovely week in Reykjavik, Iceland. Our team is responsible for partnerships and our APIs.

We spent the first day releasing better JavaScript support for our APIs. After that we decided to make an example app, mainly focusing on the new CORS support and implicit OAuth system.

We decided to build a media manager purely in the browser. We picked a codename and Sulfur was born.

Update: Check out the live demo!

Screen Shot 2014-05-20 at 5.18.13 PM

Sulfur is an app built using Backbone, Underscore.js, Plupload, jQuery, MomentJS, Bootstrap, RequireJS, and the WordPress.com JSON REST API.

It shows how you can use Implicit OAuth to do authentication without a server component. It also provides examples for using the API with Backbone and third party libraries like plupload for uploading media.

Sulfur allows you to upload images, view your entire media library contents, view meta data, and delete images. All the code is open source. Check out Sulfur on GitHub.

We learned a lot while building the app and hope to use that knowledge to improve our APIs both for internal and external use.

Screen Shot 2014-05-20 at 9.11.02 PM

Let us know what you think in the comments!

*Named after one of the moons of Jupiter and our love of APIs (input/output)

Introducing WordPress.com Insights

We love stats at Automattic. They’re key to understanding our users, and a driving force behind a lot of what we do.

When we make a change, we measure its impact and use the metrics to make data-informed decisions. For example, we recently improved how our Publicized posts look on other services. Using our own data as well as data provided by our partners, we made further improvements and tweaks to increase click throughs to your posts.

Our partners and those building on our platform should have the same ability. That’s why we spent the past few weeks creating tool to support them: WordPress.com Insights.

Check it out in the short video below:

Music Credit: Anthony Vitale

Insights provides data and graphs for a variety of metrics: Connections/authorizations, API calls, API errors, posts published, WordPress.com Connect Logins, and the reach of posts published from your app. By exposing this data, developers can measure the impact of their integrations over time.

In addition to graphs, we’ve also built in export functionality allowing you to get your data in CSV format. Since Insights is built using the REST API, you can pull data out in JSON format as well.

To accompany Insights, we also added the ability to allow other users and developers access to your app. To edit your permissions, head to the Apps Manager, select an application, and click “manage users.” If you want to provide temporary access you can also generate sharable URLs.

For more information and a walkthrough of Insights, check out our documentation.

Embed WordPress.com or Jetpack blogs on other websites with timelines

Today we are making it easier for you to bring your other websites closer to your WordPress.com or Jetpack blogs.

The new embedded timeline tool allows you to put a timeline of your blog posts on your website, connecting your visitors with the content you are writing here.

It only takes two pieces of HTML to embed a view of your blog directly on your website. The embed is interactive and allows your readers to follow your blog or like your posts without leaving the page. Both WordPress.com and Jetpack blogs are supported.

Our embedded timelines documentation contains directions on how to implement the timeline on your own site.

We also have a tool that allows you to create timelines without any coding at our creation page.

PS: The timelines are built using the REST API – take a look and start building your own app today!

You can also use a shortcode to Embed the timeline on a WordPress.com blog:
[wptimeline url="http://developer.wordpress.com" showgravatars="true"]

Here is an example of a timeline in action:

Recent Posts on http://developer.wordpress.com

Platform Updates: Batching Calls, Privacy Settings, and IDs

We’ve made a few more updates to our APIs recently that we wanted to share with you.

The biggest update is a new query parameter that’s now available on all endpoints. The new parameter allows you to batch certain calls together, so you only need to make one request to get related data instead of two or three.

Since we released our APIs, we’d always return a list of related endpoints in the “meta” response with a series of links:

"meta": {
        "links": {
            "self": "https:\/\/public-api.wordpress.com\/rest\/v1\/sites\/3584907\/posts\/21238",
            "help": "https:\/\/public-api.wordpress.com\/rest\/v1\/sites\/3584907\/posts\/21238\/help",
            "site": "https:\/\/public-api.wordpress.com\/rest\/v1\/sites\/3584907",
            "replies": "https:\/\/public-api.wordpress.com\/rest\/v1\/sites\/3584907\/posts\/21238\/replies\/",
            "likes": "https:\/\/public-api.wordpress.com\/rest\/v1\/sites\/3584907\/posts\/21238\/likes\/"
},

Now, by passing ?meta=site, you can automatically get the data from the above endpoints in the original response. Let’s take a look at an example.

Say you’re loading a specific post but you want to know the name and description of the site the post was on. You can do this by making a call to: https://public-api.wordpress.com/rest/v1/sites/en.blog.wordpress.com/posts/21238/?meta=site.

Which will give you a response like the following:

"meta": {
        "links": {
            "self": "https:\/\/public-api.wordpress.com\/rest\/v1\/sites\/3584907\/posts\/21238",
            "help": "https:\/\/public-api.wordpress.com\/rest\/v1\/sites\/3584907\/posts\/21238\/help",
            "site": "https:\/\/public-api.wordpress.com\/rest\/v1\/sites\/3584907",
            "replies": "https:\/\/public-api.wordpress.com\/rest\/v1\/sites\/3584907\/posts\/21238\/replies\/",
            "likes": "https:\/\/public-api.wordpress.com\/rest\/v1\/sites\/3584907\/posts\/21238\/likes\/"
        },
        "data": {
            "site": {
                "ID": 3584907,
                "name": "WordPress.com News",
                "description": "The latest news on WordPress.com and the WordPress community.",
                "URL": "http:\/\/en.blog.wordpress.com",
                "jetpack": false,
                "subscribers_count": 8396934,
                "meta": {
                    "links": {
                        "self": "https:\/\/public-api.wordpress.com\/rest\/v1\/sites\/3584907",
                        "help": "https:\/\/public-api.wordpress.com\/rest\/v1\/sites\/3584907\/help",
                        "posts": "https:\/\/public-api.wordpress.com\/rest\/v1\/sites\/3584907\/posts\/",
                        "comments": "https:\/\/public-api.wordpress.com\/rest\/v1\/sites\/3584907\/comments\/"
                    }
                },
                "is_private": false
            }
}

You can also pass multiple values in the meta query string. If you wanted the site endpoint and a list of likes for a post you can just pass "site,likes".

Two other updates we made are new responses:

  • We now include the value of privacy setting in the site information endpoint. A boolean value will be included as is_private.
  • We now include a global_ID response for all posts. This is a unique ID that you can use to identify posts if you are loading posts from multiple blogs in your application.

We hope you enjoy these updates. We’ll be making more improvements soon!

Platform Updates: Posting Endpoints

We have made a few recent additions to our posting APIs that allow more control when creating posts.

You can now

  • Set a custom slug for the post permalink using the slug parameter.
  • Disable or enable the publicizing of posts, or only publicize to certain services (Twitter, Facebook, etc) using the publicize parameter.
  • Pass a custom message to the above publicize services using the publicize_message parameter.
  • Set the status of a post as “pending review” by passing pending to the status parameter.

When getting a post you can now

  • Find the featured image for a post using featured_image which will return a URL.

Using the REST API with WordPress.org self-hosted sites via Jetpack

As of Jetpack 1.9, the WordPress.com REST API can now access self-hosted WordPress blogs with the Jetpack plugin installed.

Instead of just building for the WordPress.com platform, you can build awesome applications that interact with WordPress in general. Any applications built using the API for WordPress.com will automatically work with Jetpack-enabled sites running Jetpack 1.9 or higher.

Check out our documentation, create an app, and get started today!