Integrating Micro.blog

April 30, 2017

I’m excited about the soft launch of micro.blog. Manton Reece’s creation lets users easily own their short-form content. Instead of posting short items and photos to Twitter or Facebook, you can post them to your own website, or to you.micro.blog. Automatic cross-posting means that your audience can still follow you on Twitter and, soon, Facebook, but you own all the posts so they can survive a Twitter-pocalypse or Facebook-mageddon.

I’m a strong believer in controlling my own content, even if I share it freely. Facebook is at the whims of its advertizers and Zuck’s political ambitions. Who knows what drives Twitter’s corporate decision making. Having the source material on my own domains means I can keep them available as long as I choose to.

If you didn’t have the good fortune to back micro.blog on Kickstarter, you’ll have to wait for the system to open to everybody. It will be worth your wait.

I spent part of the day today integrating my micro.blog site into my main site. It was a fun exercise, and I thought it might be helpful to share the steps.

Validating My Site

The first step was validating my site with micro.blog. This proves to Manton’s servers that I own my site. This was straightforward following the instructions here.

First, I added a link tag to the header of my site’s source:

<head>
  <link href="https://micro.blog/curt" rel="me" />
  …
</head>

Then I edited my account profile on micro.blog to point at my website:
```
http://curtclifton.net
```

Adding My RSS Feed

I’m using a paid micro.blog-hosted account. For $5 a month, this gives me an always-on server that I can post to plus automatic cross-posting. My own site is statically generated. I host the site on Digital Ocean, but don’t run anything server-side besides nginx and a locked down ssh daemon. It was a no-brainer to let Manton manage the micro.blog for me.

My site generator produces a full-content RSS feed. Micro.blog lets me pull content — titles and links — from that feed into my micro.blog timeline.

From my account profile on micro.blog, I clicked Edit Feeds & Cross-posting and added the URL for my RSS feed.

Setting up a Custom Microblog Domain

With a paid account, my micro blog is available at curt.micro.blog. I wanted to host the content at my own domain. This way, if Manton’s project ends someday, I can keep my posts available at microblog.curtclifton.net.

This was an easy process:

On my account page on micro.blog, I added microblog.curtclifton.net as my custom domain name.
At my domain name provider, Hover, I clicked on curtclifton.net on my account page.
Then I clicked DNS
Finally I clicked Add New, where I mapped a CNAME entry for microblog to point at pages.micro.blog.
After saving this change and waiting a few minutes for the DNS record to propagate, my microblog was available at the new URL.

Embedding Recent Posts

The last thing I did to integrate micro.blog with my regular site was to embed recent micro posts on my site. Manton provides a javascript to do this.

First I added a link to the script in the sidebar of my posts template and in-line in a new microblog page:
```
<script type="text/javascript" src="http://micro.blog/sidebar.js?username=your_username"></script>
```

Next I took advantage of the div classes returned by the script to style the posts to blend in with the rest of my site. That involved adding the following to my site CSS:

div.microblog_post {
    padding-bottom: 3ex;
}

div.microblog_text p {
    margin-bottom: 0px;
}

div.microblog_text img {
    margin-top: 0.5ex;
}

div.microblog_time {
    font-family: "Museo Sans", "museo-sans", Helvetica, sans-serif;
    font-weight: 300;
    font-size: 14px;
    color: #585858;

    padding-bottom: 1ex;
    border-bottom: 1px #8C221B solid;
    box-shadow: 0px 1px #ededed;
}

Your Turn

I feel like micro.blog could be a big step forward for the open web. I hope you’ll sign up. And if you’re already on board, I hope you’ll set up a custom domain name for your short-form writing.

Archive →