Some New Rules

From the outside, if anyone were to look, it would seem like my usage of social media over the past few years has declined quite a bit. However, that’s not the case.

My sharing has certainly declined but, thought I don’t measure it, I feel like my time spent on Twitter, Reddit and to a lesser extent Facebook has more or less remained the same.

Read on, there’s more »

Microblogging with Typed.com

In recent weeks, a small community has started to gather around the idea of microblogging on personal sites rather than services like Twitter (or at least cross-posting from personal sites to Twitter). From what I can tell, Manton Reece is at the source of it. That was certainly where I first came across the idea anyway.

Yesterday Manton linked to a post of mine on the Realmac forums. In it, I detail the workflow I’ve been using for my own microblogging experiment with Typed.com—our very own blogging service (still in beta).

My first workflow involved IFTTT’s DO Note app and my home server but I didn’t like the idea of relying on an external element so eventually came up with this one and it’s been working very well for me.

The gist of it is that your post, written in Drafts, gets sent to Editorial which will take care of the publishing part thanks to it’s ability to run Python and Javascript scripts in it’s built in browser. The post could be both written and published from Editorial, but as nearly everything I do on my phone runs through Drafts anyway, it made sense for this to too.

Setup Drafts

The Drafts section is very simple. Create a new action with the following steps:

1​. “Clipboard” → Make sure “Options” is set to “Replace” and that the template is set to [[draft]].

2​. “URL” → Set the URL template to editorial://new/[[time]]?root=dropbox&command=Publish%20micropost.

Setup Editorial

Create a new workflow in Editorial named “Publish micropost” (important) with the following actions:

1​. “Get Clipboard”.

2​. “URL Escape”.

3​. “Set Variable” → The variable name should be postcontent and the value should be Input.

4​. Run Python Script → Be sure to replace YOURBLOGSNAME with the actual name you used for your site in Typed.com. For example, mine would be casualnotebook.

#coding: utf-8
import workflow
#import clipboard
import urllib

postcontent = workflow.get_variable('postcontent')
#print 'Content: '+postcontent

url = "https://www.typed.com/sites/YOURBLOGSNAME"+("/posts/_new?content=%s" % (urllib.quote(postcontent)))

workflow.set_output(url)

5​. “Open URL” → “Open in” should be set to the in-app browser and “Wait until Loaded” should be on.

6​. “Evaluate Javascript”: → Depending on the length of your site’s name, you will have to change the number in var paste = content.substr(62);. If your site’s name is 14 characters then you’re all set. If it’s less, reduce 62 by the number of characters under 14 it is. If it’s more, add more. This is the line of code that strips the typed.com domain and your site’s username from your micropost.

// Set the title
document.getElementById('id_title').value = "-";

// Set the content
var urls = window.location.href;
var content = decodeURIComponent(decodeURIComponent(urls));
var paste = content.substr(62);
document.getElementById('id_content').value = paste;

// Set the slug
var num = Math.random().toString(36).substring(6);
var slug = "microblog-"+num;
document.getElementById('id_slug').value = slug;

// Set the tag
document.getElementById('id_tags-0-title').value = "microblog";

// Publish it
$('.btn-primary.btn-block').click();

7​. “Open URL” → Set the URL to drafts4://.

Styling

Microposts are styled by adding the .micropost class to any post with the “microblog” tag (which is done automatically in the previous workflow). To add the class, add the following jQuery to your site’s body code.

$('.post-meta:contains("microblog")').closest('article').addClass('micropost');

I kept the styling for my microposts pretty simple.

.micropost { font-family: "Lato", "Helvetica Neue", Helvetica, sans-serif; font-size: 17px; }
.micropost:before { content: "✎"; display: inline-block; float: left; padding-right: 10px; position: relative; top: 1px; color: #a5a5a5; }
.micropost .post-title,
.micropost .post-meta,
.micropost .read-more { display: none; }

As I said on the forum, this is just something I’ve enjoyed tinkering with as Typed.com doesn’t have an API yet. This’ll only be useful to you—for the time being at least—if you were one of our Indiegogo backers. And if that’s the case, then thank you!

Here’s how it looks in action: