Look at me! I’m a fancy Facebook app

Abstract

I was bemoaning yesterday on Tumblr that it was hard and annoying to cross-post social content. Facebook is the tough one, and there are apps which import my blog feed in the way I like. It’s actually not too hard to write one myself, so I did, which is how my Facebook friends are reading this.

Table of Contents

My content’s in this situation where everything runs on feeds, so ought to be perfectly interopperable, but life being what it is, all the big providers prefer to have their own APIs. Spoilsports. There are various sites where I create content, but rather than fiddle with each one individually and ask my friends to follow me in lots of places, I now import all my content into my two blogs, this fat one, and the skinny new Tumblr one. That’s sufficiently central that I can manage sending the content on from there to all the places where it is consumed. So far, I am posting things to Facebook and Twitter for friends who prefer those news feeds to a feed reader. Tumblr to Twitter is easy; Tumblr handles it on its own very well. Getting my blog to Twitter is harder, because most of the tools available, including the popular tool twitterfeed, find my feed a bit too stodgy to avoid garbling the tweets. I finally found that I could use Feedburner, not to burn the feed, but just to cross-post it to Twitter, and that is now very satisfactory.

The naughty kid though is Facebook. Their API is dirty, messy, underdocumented, and so on. There are plenty of applications which offer to take a feed and post it to Facebook, including twitterfeed, RSS Graffiti, and more, but they all give poor quality output for my feed, which seems to be just standard on Facebook where we have given up and accept descriptions with chopped up sentences, run-together paragraphs, and stripped formatting. Also, they spam my feed with their intrusive branding, which is not their fault, just Facebook’s annoying policy of requiring all posts created by apps to trumpet where they came from.

As usual, I got annoyed and worked out whether I could roll my own. Working around Facebook’s stupidly deficient docs and API takes a few moments, but by and large it’s extremely easy to make your own app which displays your posts as neatly as can be. So, what if you want to make your own Facebook app to smarten up your blog feed, and in less time than it took me? Read on.

1. High-level tutorial

I implemented it in PHP, in about 20 line of code. I made an app on the Facebook developers’ page, entered my details and icon, and issued my app with an infinitely powerful access token over my account by following the good instructions at Facebook Developers (notes: you don’t need to do this with any code; you’ll only need the one access token, so just paste the links into your browser; as easy as pie; note also this SO detail that drained me five minutes).

Next, you need to write and test the code that will submit your article to Facebook. It’s as easy as pasting the example code into a file, and fiddling around with it until you get the appearance you want. It’s very hacky; very hacky, in fact. You’ll spot below the things that took me a while to work out.

curl -F 'access_token=use yours not mine!' \
 -F 'link=http://www.nicholaswilson.me.uk/2011/05/convergence' \
 -F 'source=http://www.google.com' \
 -F 'caption= <center></center>' \
 -F 'name=Article Title' \
 -F 'description= How long I wonder can a text block get? long I '\
'wonder can a text block get? long I wonder can a text block get? '\
'long I wonder can a text block get? long I wonder can a text '\
'block get? long I wonder can a text block get?<center>✼✼✼</center>' \
 -F 'properties={"Read more":{"text": "Whole post ➡", '\
'"href": "http://www.google.com/reader/shared/nicholaswilson.me.uk"'\
' },"From":{"text": "Nicholas’ blog of thoughts and code", "href":'\
' "http://www.google.com/reader/shared/nicholaswilson.me.uk" }}'\
 -v \
 --cacert <path to fb_ca_cert.crt> \
 https://graph.facebook.com/me/feed
  • source is meant to be for embedding videos, but it’s the only way to prevent Facebook from showing a big fat icon, so set it to something which is publicly accessible but not a page with a video on. (At this point, you might also want to add some Open Graph meta tags to your site’s pages to prevent Facebook from picking the first irrelevant icon on the page whenever you forget to remove the picture yourself or someone else links to your site. I have my Open Graph picture set to my favicon. Facebook has a habit of displaying inappropriate icons all over the place, including using the OpenID icon in the login boxes once, or for example picking the gravatar identity icon for the top page at Wordpress.com.)

  • If you don’t want a caption, you have to set it to something non-empty to get past the filter which drops blank fields you submit, but which is empty when Facebook evaluates the field to display it. Internally, Facebook stores an HTML representation of most fields it seems, though they always return the plaintext version when you make queries. The HTML is only ever shown on the site itself. The subset is pretty minimal—it’s not documented anywhere, consists from what I could test of just <i>, <b>, <small>, and <center>. The last one is the way most apps create line-breaks (did I say this was all very hacky?).

  • You can set a message as well to go above the link if you want.

  • description is the only field which allows a long length (around 1000 characters). All the others get cropped very quickly, so this is where you want to put your article summary.

  • properties is another entirely undocumented field. Have a play; from my example it’s pretty clear how it works.

  • Finally, you’ll want the certificate to use SSL with curl. You can get a big bundle from the curl site, or get just the certificates you need from Facebook.

1.1. Handling updates

After that, you’re basically done. Just find the place in your blog software where the cache is regenerated, add a check to see if overwriting a previously cached version, and send the new articles to Facebook! (It helps having some awesome software I wrote to abstract my life away. Check out my code.)

1.2. An alternative approach

For my Tumblr blog, I’m currently just using the official app to shove my posts to Facebook. It’s alright, but I’m not too happy about it. The formatting is poor, and I don’t like the branding. Having put in the little bit of time to set the app up, I will therefore start using my app for Tumblr too.

Awesome detail. Tumblr uses PubSubHubbub, an instant message notification protocol, provided by Superfeedr I followed this for a while when it was new, but never used it until now. The summary is that, all of a sudden (though I’m a bit behind), the world has woken up to the fact Wordpress, Tumblr, Posterous, Google Blogger, and many more and active providers and some big-name consumers like the Google Reader instant framework are already using it. Commercial PubSubHubbub hubs at the end of last year started turning a profit, and the technology is officially mature and awesome, so I’m glad I’ve finally had an excuse to check it out. It’s very simple, and extremely neat. Any feed which has a link to a hub support instant notifications, so that anyone interested in the feed doesn’t have to ever poll it. Instead, they go to the hub and subscribe to receive a notification of new content (it’s all secure and extremely quick to implement), and get a callback when something is posted.

The slogan is, “All feeds should be realtime.” If you publish a blog post, it should up in your friends feed readers within minutes certainly, so they can comment on while you’re still thinking about it—just like on Facebook, most blogs by now have actually quietly become realtime. Polling sucks, and all the content providers have got together it seems to do something about it. I will add a hub for instant notifications to my main site feed whenever I get around to it (the private user feeds need a moment’s thought).

The slight saga with Tumblr is the fact that their hub seems to be malfunctioning. Neither I nor Google’s Feedburner could get a peep out of it until well after stories were published. Yesterday’s testing posts in the evening were coming in to my feed reader literally through the night, the delay times were so long. I think I’ve fixed that up by the simple expedient of not using the official Tumblr hub (provided by Superfeedr, who ought to be good at this), and instead go for the ugly solution of making a Feedburner feed for the sole reason that it pings Google’s hub so I can use that instead, which works flawlessly. Expect some pretty posts to my feed soon as I twitter away and write more like this.