Narwhal Microblog Plugin for WordPress: Quickly Posting Notes to your IndieWeb Site

This morning, after reading a brief, but interesting snippet in the IndieWeb WordPress chat from last night, David Shanske made me think about an old itch I had to have a quicker and more stripped down posting interface for notes on my website. I immediately thought of WordPress’s P2 and 02 themes/products which had a built-in simple posting interface reminiscent of Twitter’s UI. 

Screencapture of Twitter's simple posting interface

Not wanting to wait to see what David might come up with before the next couple of IndieWebCamps, I thought I’d at least do some research to see what was hiding in the good old WordPress repository. I found a few old plugins that were roughly the sort of idea I was looking for, but they were last maintained about 8-10 years ago. 

Then I came across the Narwhal Microblogging plugin from Billy Wilcosky, which is being actively developed/maintained and has almost exactly what I’m looking for!

Screencapture of the Narwhal microblogging plugin user interface

Apparently the plugin itself had an early simple start before the developer came across Jon Smajda’s plugin Posthaste which was apparently repurposed for the Prologue/P2 code that WordPress used for that product/theme. He’s since rewritten a large chunk of it based on Posthaste’s original code and added in some basic formatting options and the ability to add media, so one can post a quick note along with a photo.

Settings for the plugin are hiding in Settings << Writing admin interface (or at the path /wp-admin/options-writing.php on your website) which includes the ability to choose which pages to display the “widget” and allowing one to hide the title, tags, categories, draft seclector, one’s Gravatar, and the Greeting and Links. I’d personally pare my version down to just provide tags, categories, and the draft options to keep the interface as clean as possible.

Screencapture of the settings for the Narwhal plugin

Finally the developer notes that within the user interface “if you leave the ‘Category:’ box at its default setting it posts to your default category. However… If you have a category named ‘asides’, it will put posts with empty titles into the ‘asides’ category even if you do not explicitly specify the ‘asides’ category in the dropdown. You can then style them as asides.”

This is the view of the posting interface on my site after paring it down to my personal bare minimum.

Benefits

I’ve already discussed some of the immediate benefits for easily and quickly posting directly from my own website. Just below I’ll add a few others.

Most importantly for me at the moment, the plugin works with the Classic Editor in WordPress. The interface also only shows up when one is logged into their website, so visitors won’t ever see it.

Titleless posts

The plugin automatically takes the first 40 characters of your note and posts that into the title field, so you don’t have to bother with it. Sadly, this means that feed readers and other services will take your status updates and give them a title. (Though in the wild, most feed readers do something like this anyway. I am hearing strong rumors that Inoreader is about to have better support for social media-like posts soon.) For those using the plugin for IndieWeb use and prefer to keep their notes/asides/status updates titleless, you can spelunk into the code pretty easily and make a quick change which the developer kindly documents in his support page:

But, if you want to modify the title character limit it is easy to do.

  1. Go to this plugin’s folder and open the narwhal-microblog.php file.
  2. In this file you will see a line for this max character limit and you will see the number 40. You could just increase it to something like 100, 3500, or 999999. Depending on how long you are willing to let your titles get.

In my case, I think I’ll just decrease the character limit to 0 and then rely on the Post Kinds plugin to add it’s customary pseudo-title to the admin interface on my back end so that I can distinguish my posts in the posts pages.

UI suggestions

The category chooser could be a little cleaner and provide a dropdown of all my pre-existing categories with the ability to select multiple ones. I suspect that somewhere in the WordPress universe there’s a way to do this even if it means swiping a snippet of code from core’s editor.

The basic text box for entering text could be a bit smaller on the page to accept 2-4 lines of text since it’s meant for short posts. As it stands now, it defaults to 10, but it also smartly already has a slider that appears when you type more than the available number of lines and it also has a handle in the corner to allow you to increase the boxes size.

I’ve mentioned doing natively titleless notes above, but to make things a bit more user friendly, it would be nice to have the ability in the settings page to enter a number for the text excerpt, so that users could configure it without needing code. I suspect that most in the IndieWeb space would set the title excerpt to zero so as to not have titles on their notes.

It will take me some time to dig into it, but it would be nice if the developer had some notes about the CSS classes used in the plugin so that one might more easily style the display of the output on one’s website. Fortunately the defaults to match one’s current theme seem relatively solid.

At present, there isn’t any UI for including syndication targets to external services like Twitter, Mastodon, etc. It would be nice if there was some tie into syndication services or functionality like that provided with Syndication Links plugin and brid.gy publish or brid.gy fed if those pieces are present.

The last dovetail that would be nice to have, particularly within an IndieWeb framing, would be to have better direct integration of this plugin with the Post Kinds plugin. This could extend to auto-setting the post kind to “note”, which should in turn allow the automatic setting of Post Formats to either “status” or “aside”.

Summary

In sum, this plugin is really fantastic for allowing a simple and lightweight means of posting quick status updates or notes to one’s WordPress website! It’s the next best thing to using any of the variety of Micropub clients, particularly when you already happen to be at your own site.

I suspect this plugin is the sort of thing that many within the IndieWeb and WordPress communities will love using–and at least one person in the chat has already said they think it’s a great find. There are currently less than 10 active installations of the plugin, but I think it deserves a magnitude or more. Let’s see what we can do about that!

Have you tried it? What do you think of the idea?

A hashtag functionality hiding with the ActivityPub for WordPress Plugin

I #indienews" href="https://boffosocko.com/2019/02/16/indienews-plugin-use/" target="_blank" rel="noopener">discovered yesterday that when I added a # (or hash, pound sign, octothorpe, et al.) in front of any word on my site, it created a native version of something akin to Twitter’s functionality, but it was working on my own website. The primary difference was that the hashed word on the page was, upon publishing the post, automatically wrapped with a URL for that tag on my own website, and it was also automatically added to the list of tags for the post. (As an illustrative example, I’m doing the same thing with the word hashtag earlier in this paragraph.)

I had previously considered adding this type of functionality myself to make syndicating posts (via POSSE) from my own website to sites like Twitter or Mastodon easier. There are a small handful of plugins in the WordPress repository that will add that type of functionality already, but I had eschewed them generally, not wanting yet-another-plugin.

I spent some time trying to track down the plugin that was effecting this change. I couldn’t remember having installed something that would have done this sort of functionality, and I had noticed it only by complete happenstance. I eventually gave up my search halfway through only to later get a message from Matthias Pfefferle that his ActivityPub plugin was the likely culprit. I probably should have guessed as I had literally spent part of that very day looking at the code in his IndieWeb News plugin on GitHub which had code that essentially did the exact same thing, but for a narrower set of results.

The upside of the entire process is that the functionality is now built into a plugin which I’d be using otherwise. As of today’s update, there’s now also a setting for the plugin that will allow one to turn the functionality on or off–I, for one, am definitely keeping it. Of course if you’re looking for the functionality without the extra overhead of the ActivityPub code, I believe you can use Matthias’ WordPress hashtags plugin which does only this.

I’ve never quite liked that Twitter uses @names highlighted within posts. All the additional cruft in Twitter like the “@” and “#” prefixes, while adding useful functionality, have always dramatically decreased the readability and enjoyment of their interface for me. So why not just get rid of them?!

Of course I also remember myself railing against the addition of the symbols @ and # in general text not too long ago, so I’m also now brainstorming and contemplating how one might more quickly (and even in a DRY manner) do this sort of tagging using some other (probably easily accessed, but infrequently used) symbol which could be hidden visually, but which would allow one to add these sorts of tags and the appropriate microformats markup. I suspect there may be some sort of clever CSS I may be able to use too, though it would be better not so that it works easily via syndication and in feed readers with different styling. The goal should be that it would work as plain text from a Micropub client too. With any good luck someone may have thought of it already, otherwise I may be able to hack something simple together to do roughly what I want. The upside would be that simply by writing your post, you could simultaneously be tagging it as well and not need to bother going in and separately adding additional tags!

👓 IndieWeb WordPress Feedback by gRegorLove

Read IndieWeb WordPress Feedback by gRegor MorrillgRegor Morrill (gregorlove.com)
I’m upgrading a friend’s WordPress site and decided to go through the IndieWeb’s Getting Started on WordPress page. Here’s some notes as I go through the process, trying to view it through the lens of someone who isn’t already familiar with indieweb terminology.

gRegor is spot on for a lot of this, but I think the solution may be to leave the IndieWeb-speak versions on the wiki as they are for the Generation 1 crowd and start all over again with some new pages geared specifically toward Gen2+ which don’t include a lot of our specific jargon.

People just want to use their websites in a way that Just Works™, they don’t necessarily want to learn a whole new vocabulary to do so. While I think it’s very useful to know that vocabulary and reframe one’s perspective about the web and how it works, it shouldn’t be a necessary condition for joining in on all the fun.

👓 Show authors more ❤️ with 👏’s | Medium

Read Introducing Claps, a new way to react on Medium by Katie Zhu (Medium)
Rolling out to Medium users over the coming week will be a new, more satisfying way for readers to give feedback to writers. We call it “Claps.” It’s no longer simply whether you like, or don’t like, something. Now you can give variable levels of applause to a story. Maybe clap once, or maybe 10 or 20 times. You’re in control and can clap to your heart’s desire.

Yet another way to “like” a post….

This reminds me a lot of Path’s pivot to stickers. We all know how relevant it has made them since.

And all this just after Netflix, the company that has probably done more research on ranking than any other, has gone from a multi-star intent to a thumbs up/thumbs down in the past month.

Most of the measurements social media and other companies are really trying to make are signal to noise ratios as well as creating some semblance of dynamic range. A simple thumbs up creates almost no dynamic range compared to thumbs up/nothing/thumbs-down. Major platforms drive enough traffic that the SNR all comes out in the wash. Without the negative intent (dis-like, thumbs down, etc.) we’re missing out on some important data. It’s almost reminiscent to the science community only publishing their positive results and not the negative results. As a result scientific research is losing a tremendous amount of value.

We need to be more careful what we’re doing and why…

Tweetstorms, Journalism, and Noter Live: A Modest Proposal

Tweetstorms and Journalism

Tweetstorms have been getting a horrific reputation lately. [1][2] But used properly, they can sometimes have an excellent and beneficial effect. In fact, recently I’ve seen some journalists using it for both marketing and on the spot analysis in their areas of expertise.[3] Even today Aram Zucker-Scharff, a journalism critic in his own tweetstorm [4], suggests that this UI form may have an interesting use case in relation to news outlets like CNN which make multiple changes to a news story which lives at one canonical (and often not quickly enough archived) URL, but which is unlikely to be visited multiple times:


A newsstorm-type user experience could better lay out the ebb and flow of a particular story over time and prevent the loss of data, context, and even timeframe that otherwise occurs on news websites that regularly update content on the same URL. (Though there are a few tools in the genre like Memento which could potentially be useful.)

It’s possible that tweetstorms could even be useful for world leaders who lack the focus to read full sentences formed into paragraphs, and possibly even multiple paragraphs that run long enough to comprise articles, research documents, or even books. I’m not holding my breath though.

Technical problems for tweetstorms

But the big problem with tweetstorms–even when they’re done well and without manthreading–is actually publishing them quickly, rapidly, and without letting any though process between one tweet and the next.

Noter Live–the solution!

Last week this problem just disappeared: I think Noter Live has just become the best-in-class tool for tweetstorms.

Noter Live was already the go-to tool for live tweeting at conferences, symposia, workshops, political debates, public fora, and even live cultural events like the Superbowl or the Academy Awards. But with a few simple tweaks Kevin Marks, the king of covering conferences live on Twitter, has just updated it in a way that allows one to strip off the name of the speaker so that an individual can type in their own stream of consciousness simply and easily.

But wait! It has an all-important added bonus feature in addition to the fact that it automatically creates the requisite linked string of tweets for easier continuous threaded reading on Twitter…

When you’re done with your screed, which you probably wrote in pseudo-article form anyway, you can cut it out of the Noter Live app, dump it into your blog (you remember?–that Twitter-like app you’ve got that lets you post things longer than 140 characters at a time?), and voila! The piece of writing that probably should have been a blog post anyway can easily be archived for future generations in a far more readable and useful format! And for those who’d prefer a fancier version, it can also automatically add additional markup, microformats, and even Hovercards!

Bonus tip, after you’ve saved the entire stream on your own site, why not tweet out the URL permalink to the post as the last in the series? It’ll probably be a nice tweak on the nose that those who just read through a string of 66 tweets over the span of 45 minutes were waiting for!

So the next time you’re at a conference or just in the mood to rant, remember Noter Live is waiting for you.

Aside: I really wonder how it is that Twitter hasn’t created the ability (UX/UI) to easily embed an entire tweetstorm in one click? It would be a great boon to online magazines and newspapers who more frequently cut and paste tweets from them to build articles around. Instead most sites just do an atrocious job of cutting and pasting dozens to hundreds of tweets in a long line to try to tell these stories.

References

[1]
D. Magary, “Fuck Tweetstorms,” Deadspin, 01-Dec-2016. [Online]. Available: http://deadspin.com/fuck-tweetstorms-1789486776. [Accessed: 31-Jan-2017]
[2]
A. Hope Levinson, “Men, Please Stop Manthreading,” Gizmodo, 13-Dec-2016. [Online]. Available: http://gizmodo.com/men-please-stop-manthreading-1790036387. [Accessed: 31-Jan-2017]
[3]
“Charles Ornstein on Healthcare and Trump’s #Travelban,” Twitter, 30-Jan-2017. [Online]. Available: https://twitter.com/charlesornstein/status/826264988784459777. [Accessed: 01-Feb-2017]
[4]
A. Zucker-Scharff, “Aram Zucker-Scharff on Twitter,” Twitter, 10-Feb-2017. [Online]. Available: https://twitter.com/Chronotope/status/830096151957344256. [Accessed: 10-Feb-2017]

Give your web presence a more personal identity

Photos on WordPress with Gravatar

Not a day goes by that I don’t run across a fantastic blog built or hosted on WordPress that looks gorgeous–they do an excellent job of making this pretty easy to accomplish.

but

Invariably the blog’s author has a generic avatar (blech!) instead of a nice, warm and humanizing photo of their lovely face.

Or, perhaps, as a user, you’ve always wondered how some people qualified to have their photo included with their comment while you were left as an anonymous looking “mystery person” or a randomized identicon, monster, or even an 8-bit pixelated blob? The secret the others know will be revealed momentarily.

Which would you prefer?

A face on the internet could love
Identicon: A face only the internet could love
Chris Aldrich
Chris:  a face only a mother could love
An example of a fantastic blog covering the publishing space, yet the author doesn't seem to know how to do his own avatar properly.
An example of a fantastic blog covering the publishing space, yet after 11,476 articles, the author can’t get his photo to show up.

Somehow, knowing how to replace that dreadful randomized block with an actual photo is too hard or too complicated. Why? In part, it’s because WordPress separated out this functionality as a decentralized service called Gravatar, which stands for Globally Recognized Avatar. In some sense this is an awesome idea because then people everywhere (and not just on WordPress) can use the Gravatar service to change their photo across thousands of websites at once. Unfortunately it’s not always clear that one needs to add their name, email address, and photo to Gravatar in order for the avatars to be populated properly on WordPress related sites.

(Suggestion for WordPress: Maybe the UI within the user account section could include a line about Gravatars?)

So instead of trying to write out the details for the third time this week, I thought I’d write it once here with a bit more detail and then point people to it for the future.

Another quick example

Can you guess which user is the blog's author? Can you guess which user is the blog’s author in the screencapture?

The correct answer is Anand Sarwate, the second commenter in the list. While Anand’s avatar seems almost custom made for a blog on randomness and information theory, it would be more inviting if he used a photo instead.

How to fix the default avatar problem

What is Gravatar?

Your Gravatar is an image that follows you from site to site appearing beside your name when you do things like comment or post on a blog. Avatars help identify your posts on blogs and web forums, so why not on any site?

Gravatar.com

Need some additional motivation? Watch this short video:

Step 1: Get a Gravatar Account

If you’ve already got a WordPress.com account, this step is easy. Because the same corporate parent built both WordPress and Gravatar, if you have an account on one, you automattically have an account on the other which uses the same login information. You just need to log into Gravatar.com with your WordPress username and password.

If you don’t have a WordPress.com account or even a blog, but just want your photo to show up when you comment on WordPress and other Gravatar enabled blogs, then just sign up for an account at Gravatar.com. When you comment on a blog, it’ll ask for your email address and it will use that to pull in the photo to which it’s linked.

Step 2: Add an email address

Log into your Gravatar account. Choose an email address you want to modify: you’ll have at least the default you signed up with or you can add additional email addresses.

Step 3: Add a photo to go with that email address

Upload as many photos as you’d like into the account. Then for each of the email addresses you’ve got, associate each one with at least one of your photos.

Example: In the commenters’ avatars shown above, Anand was almost there. He already had a Gravatar account, he just hadn’t added any photos.

Step 4: Fill out the rest of your social profile

Optionally you can additional social details like a short bio, your other social media presences, and even one or more websites or blogs that you own.

Step 5: Repeat

You can add as many emails and photos as you’d like. By linking different photos to different email addresses, you’ll be able to change your photo identity based on the email “key” you plug into sites later.

If you get tired of one photo, just upload another and make it the default photo for the email addresses you want it to change for. All sites using Gravatar will update your avatar for use in the future.

Step 6: Use your email address on your WordPress account

Now, go back to the user profile section on your blog, which is usually located at http://www.YOURSITE.com/wp-admin/users.php.

WordPress screenshot of admin panel for user information.
WordPress screenshot of admin panel for user information.

In the field for the email, input (one of) the email(s) you used in Gravatar that’s linked to a photo.

Don’t worry, the system won’t show your email and it will remain private–WordPress and Gravatar simply use it as a common “key” to serve up the right photo and metadata from Gravatar to the WordPress site.

Once you’ve clicked save, your new avatar should show up in the list of users. More importantly it’ll now show up in all of the WordPress elements (like most author bio blocks and in comments) that appear on your site.

Administrator Caveats

WordPress themes need to be Gravatar enabled to be able to use this functionality, but in practice, most of them do, particularly for comments sections. If yours isn’t, then you can usually add it with some simple code.

In the WordPress admin interface one can go to Settings>>Discussion and enable View people's profiles when you mouse over their Gravatars under the heading “Gravatar Hovercards” to enable people to see more information about you and the commenters on your blog (presuming the comment section of your theme is Gravatar enabled.)

Some WordPress users often have several user accounts that they use to administer their site. One might have a secure administrator account they only use for updates and upgrades, another personal account (author/editor admin level account which uses their name) for authoring posts, and another (author/editor admin level) account for making admin notice posts or commenting as a generic moderator. In these cases, you need to make sure that each of these accounts has an email address with an an associated Gravatar account with the same email and the desired photo linked to it. (One Gravatar account with multiple emails/photos will usually suffice, though they could be different.)

Example: In Nate’s case above, we showed that his photo didn’t show in the author bio box, and it doesn’t show up in some comments, but it does show up in other comments on his blog. This is because he uses at least two different user accounts: one for authoring posts and another for commenting. The user account he uses for some commenting has a linked Gravatar account with email and photo and the other does not.

One account doesn't have a Gravatar with a linked email and photo.
One account doesn’t have a Gravatar with a linked email and photo.

 

comments-yes
Another account does have a linked Gravatar account with linked email and photo.

More tips?

Want more information on how you can better own and manage your online identity? Visit IndieWeb.org: “A people-focused alternative to the ‘corporate web’.

TL;DR

To help beautify your web presence a bit, if you notice that your photo doesn’t show up in the author block or comments in your theme, you can (create and) use your WordPress.com username/password in an account on their sister site Gravatar.com. Uploading your preferred photo on Gravatar and linking it to an email will help to automatically populate your photo in both your site and other WordPress sites (in comments) across the web. To make it work on your site, just go to your user profile in your WordPress install and use the same email address in your user profile as your Gravatar account and the decentralized system will port your picture across automatically. If necessary, you can use multiple photos and multiple linked email addresses in your Gravatar account to vary your photos.