Adding Simple Twitter Response Buttons to WordPress Posts

Back at IndieWebCamp Austin, I became enamored of adding additional methods of interacting with my website, particularly for those who weren’t already on the IndieWeb train. I’d seen these types of interactions already on Tantek Çelik’s site in the past, so naturally I figured I would start there.

Web Actions

Some basic searching revealed that in IndieWeb parlance, these types of functionalities are known as web actions. While they’re often added to make it easier for one site with the proper infrastructure to interact with another, they’re also designed for social web silos (Like Twitter, Facebook, et al.) to do this type of interaction simply as well.

As a small scale experiment, I thought I would begin manually and add some simple interface to allow Twitter users (who may not yet have their own websites to use to respond to me instead) to be able to quickly and easily reply to, repost, or like posts on my site. A little bit of reading on the wiki and Twitter’s developer site allowed me to leverage something into existence pretty quickly.

Interestingly, although there are many plugins that help users simply share a blog post to Twitter, I couldn’t easily find a WordPress plugin that already allows these other interactions as options at all. I suspect it may be because the other side of the interaction of bringing the replies back to one’s site isn’t commonly known yet.

Example

I was able to write a post, syndicate it to Twitter, upload the button images, and then inject the Twitter post ID (939650287622434816 in this example) for my syndicated copy into my post like so:

<span class="syn-text">Respond via Twitter:
<ul class="relsyn">
<li><a href="https://twitter.com/intent/tweet?in_reply_to=939650287622434816" target=""><img src="/reply-icon-16.png" alt="" width="16" height="11" /> Reply</a></li>
<li><a href="https://twitter.com/intent/retweet?tweet_id=939650287622434816" target=""><img src="/retweet-icon-16.png" alt="" width="16" height="10" /> Repost</a></li>
<li><a href="https://twitter.com/intent/favorite?tweet_id=939650287622434816" target=""><img src="/like-icon-16.png" alt="" width="16" height="16" /> Like</a></li>
</ul><script type="text/javascript" async src="https://platform.twitter.com/widgets.js"></script></span>

And voila! My new post now had some simple buttons that allow users a simple one click interaction with a popup window to reply to, repost, or like my post.

Displaying responses

Naturally, through the “magic” of Brid.gy, I’m able to collect these responses via backfeed with the Webmention protocol using the Webmention Plugin for WordPress back to my own website. In simpler and less technical terms, if you use one of these buttons, your interaction with my website as posted to Twitter comes back to live on my website. Thus users can use Twitter to write a comment or reply on Twitter and it will display in my comments section just as if they had written it directly in my comments box. Likes and reposts are sent to my site and are displayed relatively naturally as facepiles under the comment headings “Likes” and “Reposts”.

I’ll do another manual example with this particular post, so feel free to use the buttons at the bottom of this post to make your response via Twitter if you wish.

Future Improvements

Taking some of this code and abstracting into a plugin for others to use would be a nice feature. Doing this would also potentially make it available as a potential plugin in the larger IndieWeb suite of WordPress plugins. Perhaps it could be easily added into the codebase in one or another pre-existing plugins? I might think that David Shanske’s  Syndication Links plugin or Bridgy Publish plugin might make sense as they’re already adding functionality for part of the publishing half of the cycle by either publishing to Twitter and/or importing the Tweet ID back into one’s WordPress site for potential display. One or the other could do a simple if/then on the existence of a syndicated Tweet, then extract the Twitter ID, and add the buttons to the interface appropriately.

It would be interesting to add full mark up to make <indie-action> functionality possible for a broader class of web actions, particularly if it could be integrated directly into WordPress in a more interesting manner to work with the Post Kinds Plugin or the IndieWeb PressThis type of bookmarklet functionality.

Instead of having these types of interactions injected at the bottom of the post, it may make more sense to have it display in the comment block instead.

I suspect that Facebook, Instagram, and others also enable some types of functionality, so adding the ability to use them the same way would be awesome. And even more so in the case of RSVP’s to events since Brid.gy handles those relatively well between Facebook and WordPress sites. (See this example.)

Try it yourself

Go ahead and use the buttons below to interact with this post via Twitter.

Virtual Homebrew Website Club Meetup on December 27, 2017

I was going to take the week off for the holidays, but seeing a group of people rally around the hashtag #newwwyear to get excited about building and updating their personal websites has inspired me to host an online Homebrew Website Club meetup during the holidays.

This is a virtual/online HWC meetup for website builders who either can’t make a regular in-person meeting in their city or don’t yet have critical mass to host one in their area. Everyone of every level is welcome to participate remotely! Don’t have a domain yet? Come along and someone can help you get started and provide resources for creating the site you’d like to have.

Virtual Homebrew Website Club Meetup

Time:  to
Location: Online via Google Hangouts (a link will be posted here or on syndicated copies of this post prior to the meetup: https://hangouts.google.com/call/8XGkwtEjxg2oH07pyOD_AAEE)

More Details

Join a community of like-minded people building and improving their personal websites. Invite friends that want a personal site.

  • Work on your #newwwyear Resolution or IndieWeb Resolutions for 2018
  • Work with others to help motivate yourself to create the site you’ve always wanted to have.
  • Ask questions about things you may be stuck on–don’t let stumbling blocks get in the way of having the site you’d like to have.
  • Finish that website feature or blog post you’ve been working on
  • Burn down that old website and build something from scratch
  • Share what you’ve gotten working
  • Demos of recent breakthroughs

A link to the virtual meetup on Google Hangouts will be posted on the day of the event. Check back before the quiet writing hours/meeting to get the link.

Optional quiet writing hour: 19:30–20:30 ET (16:30-17:30 PT) Use this time to work on your project (or get some help) before the meeting.
Meetup: 20:30–21:30 ET (17:30-18:30 PT)

Skill levels: Beginner, Intermediate, Advanced

Keep in mind that there is often a European virtual meetup if those times work better for your schedule.

Any questions? Need help? Need more information? Ask in chat: http://indiewebcamp.com/irc/today#bottom

RSVP

Add your optional RSVP in the comments below; by adding your indie RSVP via webmention to this post; or by RSVPing yes to one of the syndicated posts below:
Indieweb.org event: https://indieweb.org/events/2017-12-27-homebrew-website-club#Virtual_Americas
Facebook.com: https://www.facebook.com/events/801364280044020/
Meetup.com: https://www.meetup.com/IndieWeb-Homebrew-Website-Club-Los-Angeles/events/246071606/

 

Accessibility on the Web

I certainly don’t go out of my way to follow the topic of accessibility, though I do think about it occasionally. It’s apparently bubbling up more frequently as something in need of some dire attention on both the web and in real life.

I ran across three different pleas in less than the span of an hour, so it’s something I’ll commend to everyone’s attention. Rachel’s tweet has some nice linked resources. I’ll have to take a closer look at what I can do to better support these ideas myself.

I’m glad that WordPress.org has a feature filter checkbox for “accessibility ready” on their themes page, but they should begin using that flag to filter out those which aren’t and just not showing them. It would be nice to have that type of functionality to be able to sort plugins by as well, or to leverage plugins to support it against the threat of being de-listed.

I highly recommend these two additional articles I saw that touch upon two different areas:

Excluded from Confoo Speaker Dinner: What Happened and How it Made Me Feel by Nicolas Steenhout

Spooled Twitter Thread: OK Third-Party WordPress, We Need To Have A Come-to-Jesus Meeting About Your Accessibility Flare by Amanda Rush

Threaded Replies and Comments with Webmentions in WordPress

Introduction to what one would consider basic web communication

A few days ago I had written a post on my website and a colleague had written a reply on his own website. Because we were both using the W3C Webmention specification on our websites, my site received the notification of his response and displayed it in the comments section of my website. (This in and of itself is really magic enough–cross website @mentions!)

To reply back to him I previously would have written a separate second post on my site in turn to reply to his, thereby fragmenting the conversation across multiple posts and making it harder to follow the conversation. (This is somewhat similar to what Medium.com does with their commenting system as each reply/comment is its own standalone page.)

Instead, I’ve now been able to configure my website to allow me to write a reply directly to a response within my comments section admin UI (or even in the comments section of the original page itself), publish it, and have the comment be sent to his reply and display it there. Two copies for the price of one!

From the comments list in my Admin UI, I can write a reply and it not only lives on my site but it can now be sent as a comment to the site that made the original comment! As an example, here’s my first one and the resultant copy on the site I was replying to.

This means that now, WordPress-based websites (at least self-hosted versions running the WordPress.org code) can easily and simply allow multiple parties to write posts on their own sites and participate in multi-sided conversations back and forth while all parties maintain copies of all sides of the conversation on their own websites in a way that maintains all of the context. As a result, if one site should be shut down or disappear, the remaining websites will still have a fully archived copy of the entire conversation thread. (Let’s hear it for the resilience of the web!)

What is happening?

This functionality is seemingly so simple that one is left wondering:

  • “Why wasn’t this baked into WordPress (and the rest of the web) from the start?”
  • “Why wasn’t this built after the rise of Twitter, Facebook, or other websites which do this as a basic function?”
  • “How can I get it tout suite?!” (aka gimme, gimme, gimme, and right now!!!)

While seeming simple, the technical hurdles aren’t necessarily because there had previously never been a universal protocol for the web to allow it. (The Webmentions spec now makes it possible.) Sites like Facebook, Twitter, and others enable it because they’ve got a highly closed and highly customized environment that makes it a simpler problem to solve. In fact, even old-school web-based bulletin boards allowed this!

But even within social media one will immediately notice that you can’t use your Facebook account to reply to a Twitter account. And why not?! (While the web would be far better if one website or page could talk to another, these sites don’t for the simple economic reason that they want you using only their site and not others, and not enabling this functionality keeps you locked into what they’re selling.)

I’ll detail the basic set up below, but thought that it would be highly illustrative to have a diagram of what’s physically happening in case the description above seems a bit confusing to picture properly. I’ll depict two websites, each in their own column and color-coded so that content from site A is one color while content from site B is another color.

A diagram of where comments live when sent via webmention.
Each site composes and owns its own content and sends the replies to the other site.

It really seems nearly incomprehensible to me how this hasn’t been built into the core functionality of the web from the beginning of at least the blogosphere. Yet here we are, and somehow I’m demonstrating how to do this from one WordPress site to another via the open web in 2017. To me this is the entire difference between a true Internet and just using someone else’s intranet.

Implementation

Prerequisites

While this general functionality is doable on any website, I’ll stick to enabling it specifically on WordPress, a content management system that is powering roughly 30% of all websites on the internet. You’ll naturally need your own self-hosted WordPress-based website with a few custom plugins and a modern semantic-based theme. (Those interested in setting it up on other platforms are more than welcome to explore the resources of the IndieWeb wiki and their chat which has a wealth of resources.)

Plugins

As a minimum set you’ll want to have the following list of plugins enabled and configured:

Other instructions and help for setting these up and configuring them can be found on the IndieWeb wiki, though not all of the steps there are necessarily required for this functionality.

Themes

Ideally this all should function regardless of the theme you have chosen, but WordPress only provides the most basic support for microformats version 1 and doesn’t support the more modern version 2 out of the box. As a result, the display of comments from site to site may be a bit wonky depending on how supportive your particular theme is of the microformats standards. As you can see I’m using a relatively standard version of the TwentySixteen theme without a lot of customization and getting some reasonable results. If you have a choice, I’d recommend one of the following specific themes which have solid semantic markup:

Plugin

The final plugin that enables sending comments from one comment section to another is the WordPress Webmention for Comments plugin. As it is still somewhat experimental and is not available in the WordPress repository, you’ll need to download it from GitHub and activate it. That’s it! There aren’t any settings or anything else to configure.

Use

With the plugin installed, you should now be able to send comments and replies to replies directly within your comments admin UI (or directly within your comments section in individual pages, though this can not require additional clicks to get there, but you also don’t have the benefit of the admin editor either).

There is one current caveat however. For the plugin to actually send the webmention properly, it will need to have a URL in your reply that includes the microformats u-in-reply-to class. Currently you’ll need to do this manually until the plugin can properly parse and target the fragmentions for the comments properly. I hope the functionality can be added to the plugin to make the experience seamless in the future.

So what does this u-in-reply-to part actually look like? Here’s an example of the one I used to send my reply:

<a class="u-in-reply-to" href="https://islandinthenet.com/manually-adding-microfomats-markup/">Khürt</a>

The class tells the receiving site that the webmention is a reply and to display it as such and the URL is necessary for your webmention plugin to know where to send the notification. You’d simply need to change the URL and the word (or words) that appear between the anchor tags.

If you want to have a hidden link and still send a webmention you could potentially add your link to a zero width space as well. This would look like the following:

<a class="u-in-reply-to" href="http://www.example.com">&​#8203;​</a>

Based on my experiments, using a <link> via HTML will work, but it will send it as a plain webmention to the site and it won’t show up natively as a reply.

Sadly, a plain text reply doesn’t work (yet), but hopefully some simple changes could be made to force it to using the common fragmentions pattern that WordPress uses for replies.

Interestingly this capability has been around for a while, it just hasn’t been well documented or described. I hope now that those with WordPress sites that already support Webmentions will have a better idea what this plugin is doing and how works.

Future

Eventually one might expect that all the bugs in the system get worked out and the sub-plugin for sending comment Webmentions will be rolled up into the main Webmentions plugin, which incidentally handles fragmentions already.

Caveats

In addition to the notes above, I will say that this is still technically experimental code not running on many websites, so its functionality may not be exact or perfect in actual use, though in experimenting with it I have found it to be very stable. I would recommend checking that the replies actually post to the receiving site, which incidentally must be able to accept webmentions. If the receiving website doesn’t have webmention support, one will need to manually cut and paste the content there (and likely check the receive notification of replies via email, so you can stay apprised of future replies).

You can check the receiving site’s webmention support in most browsers by right clicking and viewing the pages source. Within the source one should see code in the <head> section of the page which indicates there is a webmention endpoint. Here is an example of the code typically injected into WordPress websites that you’d be looking for:

<link rel="webmention" href="http://example.com/wp-json/webmention/1.0/endpoint" />
<link rel="http://webmention.org/" href="http://example.com/wp-json/webmention/1.0/endpoint" />

Also keep in mind that some users moderate their comments, so that even though your mention was sent, they may need to approve it prior to it displaying on the page.

If you do notice problems or issues or have quirks, please file the issue with as full a description of what you did and what resulted as you can so that it can be troubleshot and made to work not only for you, but hopefully work better for everyone else.

Give it a try

So you’ve implemented everything above? Go ahead and write a reply on your own WordPress website and send me a webmention! I’ll do my best to reply directly to you so you can send another reply to make sure you’ve got things working properly.

Once you’re set, go forward and continue helping to make the web a better place.

Special Thanks

I wanted to take a moment to give special thanks to Aaron Parecki, Matthias Pfefferle, and David Shanske who have done most of the Herculean work to get this and related functionality working. And thanks also to all who make up the IndieWeb community that are pushing the boundaries of what the web is and what it can accomplish. And finally, thanks to Khürt Williams who became the unwitting guinea pig for my first attempt at this. Thank you all!

​​​​​​

An update to read posts for physical books

Inspired by gRegor Morrill’s IndieWebCamp Austin project, I went back and took a look at some of my read posts, and particularly for books.

For online material, I use the Post Kinds Plugin which does a good job of adding h-cite and p-read-of (experimental) microformats classes to the data for the things I’ve read.

Because Post Kinds doesn’t (yet?) support percentage finished or number of pages read, I generally do read posts for books by hand as notes with the relevant data. So I decided to add some better mark up to my book-specific read posts and added microformats classes of h-cite, u-url, u-read-of, p-name, p-author, h-card and dt-published. I’m far from an expert on microformats, but hopefully the way I’m nesting them makes sense to parsers off in the future. (Suggestions for improvement are more than welcome.)

I like Gregor’s idea of p-read-status for things he’s posting and will have to see how I can pull that off for posts in the future (or suggest it as an addition to Post Kinds). Presently I’m just adding a want to read tag, but that could be improved to better match the functionality I appreciate in silos like Goodreads. I’ll also have to load up Gregor’s recent modifications to Quill and test them out on my site as well. I know David Shanske has expressed interest in better aligning Quill and micropub clients to post to WordPress with Post Kinds in mind.

Here’s an example of the mark up of a recent read post:

Read pages 381-461 to finish reading <span class="h-cite"><cite><a class="u-url u-read-of p-name" href="http://amzn.to/2zXnQDC" target="_blank" rel="noopener">Origin: A Novel</a></cite> by <span class="p-author h-card"><a class="p-name u-url" href="http://danbrown.com/">Dan Brown</a></span><time class="dt-published" datetime="2017-10-103 00:00:00"></time></span>

It’s also made me begin to feel itchy about some of my past quote posts and potentially revisiting them to add the appropriate h-cite and related mark up to them as well. (Or at least fix it moving forward.)

Incidentally, my real camp project was some heavy editing work on “The Book.” More on that later…

Mismanaged road closures on 210 Freeway for the Creek Fire (and others)

I’ll note at the outset that there are larger, potentially more pressing problems relating to the current fires in Southern California, and I have every hope that they’re mitigated as quickly and smoothly as possible, particularly for the large numbers of displaced residents. But I also know that this is not our “first rodeo”, and therefore there should have been better planning and be a better coordinated response from state and local officials.

Apparently in a fit of poor thinking, the California Highway Patrol and the fine folks at CalTrans Distric 7 have closed almost all of the East and Westbound exits on the 210 Freeway from roughly Glendale to past Sylmar. This includes exits for areas that aren’t under immediate threat, nor, based on reports I’ve seen, for areas that are expected to be threatened.

While I understand that they’re evacuating much of the proximal area for the Creek Fire and public safety, they’re potentially causing not only undue burden on people moving around or through the area, but adding stress to resources needed to abate the issue. In particular, while it may be advisable to close several on/off ramps nearest the fire, it is neither smart, nor helpful to have all of them closed for miles and miles in all directions, particularly those closures at the furthest ends.

Because the Westbound Pennsylvania and Lowell freeway ramps were (unnecessarily) closed this morning on the Westbound 210, I and thousands of others, including countless parents taking their children to one of the several dozen schools in NorthWest Glendale, were unnecessarily forced to spend an additional hour or more this morning driving on the 210 through the worst of the smoke out past Sylmar only to need to turn around and drive back through the heavy smoke to return to our original destinations. After almost a day of issues, there is still no signage on the 210 Freeway indicating any closures. Easily one of approximately 20 CalTrans vans I saw blocking exits this morning could have been better used to pull a trailer with closure signage.

I get the need to evacuate the area and close roads, but why not close them at the surface street level? This would allow travelers to turn around and reroute instead of being unnecessarily forced to spend one or more hours in both heavy traffic and heavy smoke. If there aren’t enough resources to do this at every exit, why not at least one or two of them to alleviate the additional and unnecessary back and forth?

I noticed at least four accidents–which I’m sure is at least 3 standard deviations from the average–on this stretch of freeway, which I hope were small fender benders. I would posit that these were all caused as a result of (frustrated and distracted) people simply trying to exit and turn around. This stresses the EMS system further by requiring the additional response of police, ambulance, fire and other first responders. I saw at least one firetruck at such a scene this morning, which I’m sure could have been better deployed against low containment numbers in highly populated areas being threatened by fire.

I saw people attempting to go the wrong way down on ramps simply to access surface streets to turn around. I saw dozens of cars (far more than usual) pulled over on the side of the road attempting to figure out the predicament. At least one driver in a similar situation this morning was forced to cope with running out of gas as the result of lack of communication. I stopped at at least two exit ramps in an attempt to get information from CHP officers, none of whom had any information about where or how to turn around. They literally knew nothing except that they could not let me pass at that point. (To me this is painfully inept communication at a time when communication could be saving lives, and multiple hours after these issues should have long since been anticipated.)

If they’re going to pull the public safety card, local and state government should simply close the entire 210 freeway from the 2 North to past Sylmar. If they can’t do this they should do local street closures to allow constituents to exit the freeway to turn around and find alternate routes back and around instead of simply being stuck (due to the lack of zero signage) and put further in harms way.

Additionally, if CalTrans hasn’t figured it out yet, there’s also a very frequently used traffic app called Waze that can be quickly edited to indicate road closures that will drastically help to mitigate traffic issues in and around the area to prevent a lot of the problem. Because Google owns Waze and shares data, it also means that Google Maps, another popular navigation application, will also further mitigate the traffic and ancillary public safety issues. I don’t think that any of the closures I saw this morning were marked on either platform. (Nota bene to Waze/Google Maps, in high traffic areas like Southern California, I’m surprised that your systems don’t intuit major closings automatically given the amounts of data you’re receiving back.)

I hope that from an executive standpoint state and local systems will have their resources better deployed for this evening’s commute. I can’t help but note that these aren’t the first large fires in the Southern California area, so I’m shocked that the response isn’t better managed. Better managing small seeming issues like these could allow resources that have to be deployed to remedy distal issues like them to be better deployed to the proximal issues.

If they can’t manage to fix these issues in the near term, I hope they’ll at least file them into their future emergency plans for what are sure to be future incidents.

Virtual Homebrew Website Club Meetup on December 13, 2017

This is a Virtual HWC for IndieWebbers who either can’t make a regular meeting or don’t yet have critical mass to host one in their area. Everyone is welcome to participate remotely!

Virtual Homebrew Website Club Meetup on December 13, 2017
Time:  to
Location: Online via Google Hangouts (link is posted and live)

Details

Join a community with like-minded interests. Invite friends that want a personal site.

  • Work on your IndieWeb Resolutions for 2018
  • Finish that blog post you’ve been working on
  • Demos of recent IndieWeb breakthroughs
  • Share what you’ve gotten working
  • Ask the experts questions

A link to virtual meetup on Google Hangouts will be posted on the day of the event. Check back before the meeting to get the link: https://hangouts.google.com/call/0JCH5b875C2UNseSnfkxAAEE

Optional quiet writing hour: 19:30–20:30 ET (16:30-17:30 PT)
Meetup: 20:30–21:30 ET (17:30-18:30 PT)

The IndieWeb is a growing people-focused alternative to the ‘corporate web’.

Skill levels: Beginner, Intermediate, Advanced

Keep in mind that there is often a European virtual meetup if those times work better for your schedule.

Any questions? Need help? Ask in chat: http://indiewebcamp.com/irc/today#bottom

RSVP

Add your RSVP in the comments below; by adding your indie RSVP via webmention to this post; or by RSVPing yes to one of the syndicated posts below
Indieweb.org event: https://indieweb.org/events/2017-12-13-homebrew-website-club#Virtual_Americas
Facebook.com: https://www.facebook.com/events/169650146961455/
Meetup.com: https://www.meetup.com/IndieWeb-Homebrew-Website-Club-Los-Angeles/events/245539015/

If your site doesn’t support sending webmentions yet, you should be able to create a post on your website with the following HTML:

<div class="h-entry">
RSVP <span class="p-rsvp">yes</span>
to <a href="http://boffosocko.com/2017/11/30/virtual-homebrew-website-club-meetup-on-december-13-2017/" class="u-in-reply-to">Virtual Homebrew Website Club Meetup on December 13, 2017</a>
</div>

Then put the permalink URL for your post into the webmentions box in the comments section. My site should be able to parse your URL and display the response. (Naturally, you can also change your response to “no” or “maybe” depending on your ability to attend.)

(I think this may be my first indie event that I’ve posted to my WordPress site.)

OPML files for categories within WordPress’s Links Manager

Last week I wrote about creating my following page and a related OPML file which one could put into a feed reader to subscribe to the list itself instead of importing it. I haven’t heard anyone mention it (yet), but I suspect that like I, some may be disappointed that some feed readers that allow OPML subscriptions don’t always respect the categorizations within the file and instead lump all of the feeds into one massive list. Fortunately there’s a quick remedy!

WordPress in its wisdom used a somewhat self-documenting API that allows one to create standalone OPML files by category. Thus if you only want to subscribe to just the feeds categorized as IndieWeb related in my OPML file, you can append the category id to the end of the URL to filter the others out.

The main OPML file: http://boffosocko.com/wp-links-opml.php
The IndieWeb only file: http://boffosocko.com/wp-links-opml.php?link_cat=1521

So in general, for WordPress sites one can append ?link_cat=[category id] (with or with out the brackets) to the main URL for the OPML file typically found at http://www.example.com/wp-links-opml.php.

I was going to post about this later this week after running across it this weekend, but by odd serendipity, while I was subscribing to Henrik Carlsson’s site I noticed that he posted a note about this very same thing recently! Thanks for the unintended nudge Henrik!

For quick reference, below are links to the specific OPML files for the following categories within my larger OPML file for those who’d like to subscribe to subsections:

A Following Page (aka some significant updates to my Blogroll)

I’ve been slowly but surely working on compiling a list of people I’m following online. In older iterations of the web, this would have been known as a blogroll, but I think it’s time to update the concept and potentially add some new features and functionality to it. It’s also time to upgrade its status on my site, so I’m moving it from a widgetized sidebar area on my front page to its own page under my “About” menu.

Why

Information Overload

As a member of more social sites that I have desire to count, I’m often overwhelmed with email, text, and other notifications from many of them. When I do dip into their streams, I sometimes find some reasonable value, but, more often that not, I’m presented with a melange of advertisements and somewhat meaningless and context-less posts that are more like addictive fat, sugar, and salt than healthy protein and complex carbohydrates.

I’ve read books like Clay Johnson’s Information Diet: a Case for Conscious Consumption and P.M. Forni’s excellent Thinking Life: How to Thrive in the Age of Distraction which describe an overwhelming media and online social atmosphere with some prescriptive measures for cutting down on the noise. More people obviously need this type of advice and I’m regularly thinking about how to cut down on the noise and get more valuable signal out of my online tools.

An Inventory of Sources

As a result of all this noise from too many sources and social platforms, I’ve found that having a manifest or complete inventory of all my online reading sources can be immensely valuable. It will make it easier to see what I’m reading and consuming on a regular basis and therefor easier to prune or update this list based on how often I’m reading these sources compared to the value I’m getting out of them.

I can look at the titles of the sources and better get a feel for exactly what I’m consuming and possibly how much. Those I don’t read as often can be pruned out of the list or can serve as a reminder of why I wanted to add them in the first place and what I wanted to get out of them.  Better that I be nagged to read things I know I’ll get value out of than defaulting to the fast food-esque fluff that, like many others, I turn to on Facebook, Twitter, and Instagram because it’s “easy” to consume.

I’ve also now compiled a year’s worth of reading data for things that I’ve read online. I’ve saved links to literally everything I’ve read in the past full calendar year to my website (though I only choose to show a subsection of those links to the public). This has given me a more solid data set of what I’ve read and interacted with to better guide my decisions about what I should put on the list and what I shouldn’t.

Notifications

As for the notification overload, by moving some of my reading onto my site via the excellent PressForward reader, I can drastically cut down on the number of notifications I get in email or via phone. I can more directly control exactly which notifications (and when they’re sent) that are originating from my own website.

Fighting Algorithms (and winning!)

Over the past few years, we’ve seen the rapid rise of algorithms. In some cases they’ve provided worthwhile improvements to our lives, while in others they’re downright malicious and destructive. This has become drastically more apparent in the past year or so, and I invite those who aren’t aware of their dramatic effects on our lives to read Cathy O’Neil’s book Weapons of Math Destruction, which does a great job of outlining them for the lay person with no technical background.

Every day these black box algorithms are choosing more and more of what we read and consume. (The only thing worse than the lack of a free press coupled with government controlled media is a corporate algorithmically controlled media which gives you the illusion of freedom.) Because most companies that are using these algorithms in the social space are doing so to keep us more “engaged” and on their sites for longer and clicking their ads with out any transparency, I can no longer trust them. My goals and ideals when reading online content are drastically different than theirs. I want to become more informed, challenged, and made to think. I don’t want their programmatic “reversion to the mean” forcing me to read more memes, jokes, political vitriol, and useless content.

To fight these algorithms, particularly those found in Facebook and to a lesser extent in Twitter, I’m going to cut them off at the knees and consciously choose a set of specific streams to read and engage with. Because I control what goes in to the system, I’ll know exactly what comes out. To touch on the food analogy again, when I cook for myself, I know exactly what the ingredients are and can thus eat a more healthy and well-balanced diet compared to going out and eating fast-food where I’m not ever quite sure if the “beef” is really beef, much less if it’s safe. Yes, I’ll say it, I’m going to go both organic as well as farm-to-table in my online social life.

Twitter thought experiment

Initially I had contemplated declaring Twitter bankrupcy. It seemed like a brilliant and cathartic-ly wonderful idea! But cleaning out my Twitter feed to a much smaller subset ultimately seemed like way too much work. I can only think about the hours and hours of time I’ve spent even creating and categorizing Twitter feeds into lists on my account. (Fortunately others can also follow those curated lists to find some value, so it’s not a total loss.) Starting over again from scratch on my main feed seemed untenable. Even if I did clean it all out, I would potentially have a better feed, but it’s still a feed on a  silo which I don’t own or control and it doesn’t have any effect on needing to repeat the same work on dozens of other silos. Heavy pruning and weeding within someone else’s walled garden seemed like a painful and unscalable time-suck that I would potentially need to repeat on an ongoing basis. It’s akin to the sharecropping of content that I had previously been doing for them and refuse to continue to do so.

The better option seems to be to use open web technologies to create and maintain my own personal list. It’s something I own and can control. I can update it as often as I want. Even better, I only need to do it in one place instead of dozens and the results can be distributed across multiple sites almost instantaneously!

As I’ll also discuss below, my open list is still easily shareable and modifiable by others. So I’m not accruing benefits just to myself, but my work can become scale-able and usable by others.

What

So I’ve gone back to some of the original web technology including blogrolls and OPML files.  I’ve created a Following page where I’m going to share my data. Here’s that page: http://boffosocko.com/about/following/

Context

In creating my list I wanted to go above the traditional blogroll and add additional context that most of them often didn’t originally have. I’ve tried to add a photo, logo, or  avatar of some sort for all the sources to provide some visual context. I’ve also added either a description of the site or a snippet from the site’s owner to give an idea of what it is about (in addition to categorizing them by one or more tags) as well as an optional reason why I’m following them. I’ve also included a link to the site as well as an RSS, atom, or h-entry feed for the site to make subscribing easier for others. Where appropriate, I’ve added the microformats XFN data to these sites as well so others will have an idea of my relationship to those entities or people I’m following. Disclosure is a good thing, right? Just ask a journalist. (Viewing this last part is currently only available via parsers or by viewing the page source within a browser, but it’s there for potential future use.) In aggregate, these bits of context are not only valuable for page viewers who are considering subscribing/following them for themselves, but they also make a statement about me as a reader, a topic I’ll touch on further below.

Promotion of position: from sidebar to a full page

Given the value of social following/friending in the past decade, it’s long overdue to promote the old-school blogroll, which was traditionally placed in a diminutive position in one’s sidebar, to a more prominent position on its own page (or others may even choose to span it over multiple pages).

Social media platforms do their best to hide our social graphs from us thereby making more of what they do seem magical. Many have even bent over backwards to prevent other possibly competing social startups from leveraging our own social graphs on their platform to help build them up. Just where do they think that data came from initially? It came from me! I own it and should continue owning it.

To that end, my follow list in some sense is an implicit statement of me owning that data once again. While it may take me a bit to import and arrange it all, I’ll have ownership and agency over it. Perhaps an outside service may want pieces or parts of it, and in some cases having it open and portable may provide continued future value to me.

As an analogy for what this means, think back to the days of arduously making mix tapes in the 80’s. You’d spend hours and hours diligently copying and pasting songs together onto a cassette tape to give to a favored someone. The gift usually meant more than just the songs on the tape. This type of thing is far easier now with digital music services to the point of devaluing part of the original meaning of a mix tape. However, almost no modern music service will allow you to take your hand-crafted playlists out of their service to other competing services to make it easier to switch from something like iTunes to Amazon Music or Google Music. It’s painful and annoying in an age chock full of digital exhaust. I’m hoping that my open following list might be a lot like the portable digital music play list I wish I had.

Identity

I’m placing my follow list as a submenu item underneath my “About Me” page. Why? On most social networks there are a few simple fields, typically in a profile or on an explicit profile page, which give others some basic data about who the account holder is and what they do. Often people use this data to make relatively quick decisions about whether they should follow (or follow back) another person. Sadly I’m of the opinion that the amount and richness of the data on these pages is too sparse to be of much use. Fortunately by owning my own site, I can remedy this problem for others who visit it.

My website has thousands to potentially hundreds of thousands of posts. What data can I easily provide people who are interested in learning more about me without reading the whole book as it were? My About page is a good quick place to start, but it can’t necessarily give the whole picture. I’ve also got a few other sub-pages under my About page which helps to round out the snapshot picture of who I am. These include:

  • my /now page, which tells others what I’m up to most recently, but at a higher level than reading a month’s worth of status updates;
  • my /Favorites page, which is a list of some of my favorite things and things I use on a regular basis; it’s not dissimilar to a “What I’m Using” page or regular posts concept;
  • my /Bucketlist page, which is a list of some things I’ve done or would like to do before I “kick the bucket”;
  • my /Social Media (or as I call it, my rel=”me”) page, which is a list of my too-many-presences on other social platforms;
  • I’ve also recently added an  /AMA or Ask Me Anything page, so that if there’s something pressing you need to know that isn’t written or find-able on my site, you can easily ask it.

Finally, there’s now also a source for others to quickly see what I’m regularly reading and find valuable enough on the web to have created a list of it all.

I think that in evaluating others, this last page (the following page) may actually provide the most value, and so I hope it does to others in return. I can’t help noting here how I’ll often judge others by which books they have on their shelves at home, or this great judgmental quote from John Waters:

“If you go home with somebody, and they don’t have books, don’t fuck ’em!”

I hope others I’m following will follow suit and create their own following pages as I’d honestly love nothing more than to know who and what they find valuable, and to be able to extract it quickly to add to my own list! The value of discovery here can be tremendous.

Intellectual Antecedents

I know that academics like to give credit to their sources when writing papers, though they often do so in explicit footnote form. Abstracted out to a more general form, I’m hoping that my following page can also help to provide some meta data about which sources I regularly find valuable and which ones are most likely influencing me even if they’re not explicitly footnoted within my writings.

Benefit of following members of the IndieWeb

Having been using a version of my following page for a while, I’ve found one particularly nice feature of following people who are adherents of the IndieWeb movement. Because they’ve chosen to post on their own site first (and optionally syndicate to other silos), their internet presence is far more centralized for subscription and consumption. I don’t have to follow them on dozens of multiple social silos to attempt to capture all their content. I can subscribe in one place and get as much or as little as I like! You can do much the same with my site, which I’ve discussed in the past.

Now of course this isn’t the case for everyone yet, and there can be some exceptions (since not everyone owns every post-type yet nor has quit all their silos), but it does tremendously cut down on the noise, cruft, and duplicated messages that live on multiple platforms.

I’ve experimented in the past with following even a subset of researchers and their work online. The amount of time needed to catalog them all, find their various presences in sites like Facebook, Twitter, LinkedIn, Google+, Academia, ResearchGate, etc., etc. was painful, but then setting up notifications and creating a workflow was even worse–particularly since I want to read or see everything they’re putting out over time. I think I’d have been better off building them all custom websites to publish their content instead.

OPML means sharing

OPML really stands for Outline Processor Markup Language. It is an XML-based format and standard used for feed lists interchange. All this to mean that it’s a standardized specially formatted document that allows one to share all the data in it easily by means that make sense to certain machines that would want it.

The most common example is that most feed readers allow you to import and export OPML files (with the .xml extension) so that you can quickly and easily move all of your feeds from one reader to another. (This is kind of like the playlist analogy for music that I mentioned–it’s just a playlist, or readlist if you prefer, for feed readers.) This is great if you want to try out a or move to a new feed reader.

Even better, because you can find and save a copy of my list, others can easily port it into their feed readers and sample the things that I’m seeing and often reading.

But wait! There’s more…

Many modern feed readers are supporting OPML subscription functionality! (What’s that you ask?) It’s fine to download my OPML list and import it into your reader. But what happens when I update it next week with three new great sources and remove a dead feed that no longer works? You’re stuck missing out on the new stuff and have to manually find and remove the broken one yourself. Instead, if you’ve subscribed to my OPML in your feed reader, the reader knows the URL where my list lives and checks it frequently for updates so you don’t have to worry about syncing the changes yourself! Shazam! It’s now a lot like a shared/synced playlist for articles. For those who are familiar with Twitter lists and following those, it’s very similar to how those work, except in this case they’re open and work on multiple sites and apps instead of being stuck in a proprietary service.

How

Now the part you’ve been waiting for: How can I do this myself?

For those who are on WordPress, much of the base functionality is already built into WordPress core. Below I’ll provide a few means and tips for getting you most of the way while still having some flexibility in where and how you choose to display your particular version.

(For those not on WordPress, check out some of the details and documentation on the IndieWeb wiki and ask in their chat how you might go about doing it.)

Re-enable Links Manager interface

The code for the WordPress blogroll functionality was built into core and was known as the Links Manager, but it was removed in version 3.5 for new installs that didn’t have any pre-existing links. I’ll note that the functionality was removed in late 2012 long after social media had already begun to make functionality like blogrolls (and even blogs themselves) fall out of fashion.

Fortunately, while it’s now hidden for most, it can be brought back with one line of code. (Hooray for backwards compatibility!) You can bring this functionality back to your website by adding the following snippet of code into your theme’s functions.php file:

add_filter( 'pre_option_link_manager_enabled', '__return_true' );

You can do this manually in the administrative user interface of your WordPress install by going to Appearance » Editor, which will bring up your theme files. Then in the right hand sidebar there should be a link for editing your functions.php file. Cut and paste the line of code into the file on its own line and then click Update File.

That’s easy enough, but what do you do if you’re scared of code? (You shouldn’t be, by the way…) The same functionality can be brought back with the Link Manager plugin. Just download it in the admin UI under Plugins » Installed Plugins and click Add New at the top of the page. Search for the plugin name Link Manager to download and then activate. That’s it.

Note: some may worry at the fact that the details for this plugin include the warning words:

This plugin hasn’t been updated in over 2 years. It may no longer be maintained or supported and may have compatibility issues when used with more recent versions of WordPress.

On a scale of 1-10 for warnings, this one is really less than a 1. This has to be one of the simplest plugins in all of WordPress because it really only includes the single line of code above. There’s really almost nothing with it that could change, break, or need to be updated. It’s old, but it will work.

You’ve now re-enabled the Links Manager which will put a Links tab into your admin UI. You can click on it to start adding your links, feeds, photos, and data. The WordPress codex has great documentation for how to do this: https://codex.wordpress.org/Links_Manager

Within the admin UI you can now display a blogroll widget by going to Appearance » Widgets and moving the Links widget into one of the widgetizable areas in your theme.

Put your following list onto a page by itself

Sadly, because the Links Manager is so old and is now hidden, development on it seems to have long since stalled. This means you’ll require some simple code to get things working a bit better in terms of display. I’ll do my best to give you instructions for cutting and pasting with as little code as possible.

Plugin and Code

There’s a convenient plugin called Links Page which will get us most of the way. Go ahead and download and activate it. From the plugin interface, click the edit link for the Links Page.

The Links Page plugin displayed in the Plugin page of the WordPress admin UI.

The editor will pop up with the code for the plugin, which looks like this:

function linkspage($text) {
if (preg_match("|<!--links-page-->|", $text)) {
$links = wp_list_bookmarks();
$text = preg_replace("|<!--links-page-->|", $links, $text);
}
return $text;
}
add_filter('the_content', 'linkspage', 2);

In between the parenthesis for the function wp_list_bookmarks(), you’ll want to add something like the following code snippet I’ve customized for my following lists:

'categorize=1&category_orderby=count&category_order=DESC&orderby=rating&order=DESC&show_name=1&between= - &show_description=1&category_before=<h2>&category_after=</h2>'

Yours doesn’t necessarily need to be exactly the same, but it should reflect how you’d like your own list to look. To accomplish this take a look at the documentation and examples for this function to pick and choose among the options you’d like to display. You’ll just string the options together between two single quotes and separate them with an ampersand (&) as in my example above.

Caveat: Since we’ve done some “cowboy coding” here and modified the code directly in the plugin, we run the risk of the accidentally updating the plugin and overwriting our changes. I would suggest that this risk is fairly low given the simplicity of the plugin and the unlikelihood that it would need an update. More advanced WordPress users will know that the better option is to roll up all the code in the plugin and all their changes and put it into their functions.phpfile or just fork the plugin with a new name and go from there.

CSS for styling and display

You may want to put in a bit of CSS to modify how our following list is displayed on the page. Without some tweaks or taking some extreme care when uploading or linking to the photos/avatars, we may run into some display issues.

As a result I’ve added the following snippet of CSS to my theme’s style.css file:

ul.xoxo.blogroll > li > a > img {
width: 20px;
height: 20px;
}
ul.xoxo.blogroll li{
list-style-type: none;
}

You can accomplish this by going to Appearance » Editor in the admin UI and editing the file by cutting and pasting the segment above into it and clicking Update file when you’re done.

The Page itself

We’ve now got all the big pieces in place. If you haven’t already, add some data into the Links Manager (documented here). You then need to create a new page on your site in the admin UI. I’ve named mine Following, but you can name yours Blogroll, Links, or anything you’d like really–it is your site after all.

Next, as described in the instructions for the Links Page plugin add the following text into the body of your post:

<!--links-page-->

When you’re done, save the page. The plugin will then replace the text above with your following list based on the output properties you specified.

Optionally you may want to go to Appearance » Menus to modify your menu to show your follow page in your menu structure so people can easily get to it.

Other Options

Those who’d like a different way of doing all of the above might also consider trying out other blogroll-related plugins in the WordPress repository. There are likely some other excellent options and methods to accomplish some of this functionality in a way that’s acceptable for your needs.

Future

So where do we go from here? This is certainly not complete by any means and there could be additional functionalities built on top of and even beside all of this.

I haven’t delved into it deeply, but I know there are developers like Dave Winer who have created services like Share Your OPML which allow you to upload your own file and then get recommendations of similar feeds in which you might also have some interest. Services like this that take advantage of my open data to provide me with value in return could be truly awesome.

I’m sure others smarter than I will come up with better UI. I’d personally love to have a bookmarklet similar to SubToMe that allows me to quickly and easily scrape a page and post the data from a person’s site to my following list (SubToMe currently redirects one to third party readers instead.)

I’ve also been enamored by Colin Walker’s “webmention roll” in which he creates a blogroll of all the people who have interacted with his website via Webmention.

New functionality

The future might also bring increased ease-of-use as well as expanded functionality. I’m curious what value might be extracted by adding microfomats like h-cards to my follow lists? What could parsers do with a microformat like ‘p-following’ to more quickly create social graphs like Ryan Barrett’s Indie Map?

What might we expect with simpler formats than OPML, which could likely be done with microformat classes the same way that h-entry and h-feed have made supporting clunkier specs like RSS and Atom far easier?

I’m feeling itchy with all the potential possibilities…

Comments

I’d love to hear people’s thoughts and comments on the usefulness of any of the above. Is it something you’d attempt to do yourself? (If you attempted it, did it actually work?) What would you change? How could it be extended? What UI/UX improvements could be added? Other interactivity suggestions? How can the discoverability of such a thing be improved? What could be built on top of it all?

Also feel free to share your following pages, blogrolls, and OPML feeds in the comments below. Have you added your examples to the IndieWeb wiki to help others improve?

Are there people or sources missing from my following page that you’d recommend? (Keep in mind I’m far from done adding sources…)

A final thanks

Here’s a big thank you and h/t to all those who’ve been working on their own versions of this type of technology (either recently or for decades) including: Dave Winer (thanks for OPML by the way), Richard MacManus, Colin DevroeColin WalkerKhürt Williams, James Shelly, Bryan Alexander, Aaron Davis, and many, many others.
​​​​​

👻 ☠️ 🎃 Halloween flavored names on Twitter

Everyone I know has jumped on the Halloween bandwagon on Twitter and added one or more Halloween related emoji to their Twitter name. Jack-o-lanterns, ghosts, etc. abound. Some have even changed their names a bit to fit into the theme.

Some of my favorites:

@JordanUhl is now jordan ghoul 👻 ☠️ 🎃
@rachsyme‏ is now🎃 rachel slime 🎃
@VictoriaAveyard is Victoria Graveyard 🎃
@BrendonHope is 🎃 Abandon Hope 🎃
@spicer‏ is Christian Spider 🕷 🎃
@Juliet_Shen‏ is 🎃 Ghouliet Shen 🎃

Despite the fact that Halloween is my favorite holiday, and since retailers are already jumping the gun on Christmas, I thought I’d do the same. I’m changing my Twitter name to something like:

🎄Christmas🎄 🎅Aldrich 🎁

IndieWeb: The Book

For a quite a while I’ve been thinking about writing a book about the IndieWeb to provide a broader overview of what it is philosophically, how it works, how its community functions, and most specifically how the average person can more easily become a part of it.

Back in January Timo Reitnauer wrote Let’s Make 2017 The Year of the Indie WebI agree wholehearted with the sentiment of his title and have been personally wanting to do something specific to make it a reality. With the changes I’ve seen in the internet over the past 22 years, and changes specifically in the last year, we certainly need it now more than ever.

In large part, I’ve been inspired by the huge number of diverse and big-hearted developers who are an active part of the growing community, but specifically today I came across a note by Doc Searls, an email about the upcoming NaNoWriMo (National Novel Writing Month), and then a reminder about the 100 Days of IndieWeb project. This confluence of events is clearly my tipping point.

As a result, I’m making my 2018 IndieWeb resolution early. For the month of November, as part of NaNoWriMo, I’m going to endeavor to lovingly craft together a string of about 2,000 words a day on the topic of the IndieWeb to create a book geared toward helping non-developers (ie. Generation 2 and Generation 3 people) more easily own their online identities and content.

IndieWeb Generations Diagram by Amber Case (Caseorganic.com) as depicted on the IndieWeb Wiki

Over the past year, surely I’ve read, written about, or interacted with the IndieWeb community concretely in one way or another on at least 70 days. This sprint of 30 days should round out a 100 days project. To be honest, I haven’t necessarily posted about each of these interactions on my own site nor are they necessarily visible changes to my site, so it may not follow the exact requirements of the 100 Days of IndieWeb, but it follows the spirit of the creator idea with the hopes that the publicly visible result is ever more people adopting the principles of the movement for themselves.

I’ll focus the book primarily on how the average person can utilize the wealth of off-the-shelf tools of the WordPress content management system and its community–naturally with mentions of other easy-to-use platforms like Known and Micro.blog sprinkled throughout–to own their own domain, own their content, and better and more freely communicate with others online.

If you haven’t heard about the movement before, I’ll direct you to my article An Introduction to the IndieWeb, portions of which will surely inform the introduction of the book.

If you’ve recently joined the IndieWeb, I’d certainly love to hear your thoughts and stories about how you came to it, why you joined, and what the most troublesome parts have been so I can help direct people through them more easily–at least until there are a plurality of one-click solutions to let everyone IndieWeb-ify themselves online.

As a publisher who realizes the value of starting a PR campaign to support the resultant book, I’m also curious to hear thoughts about potentially launching a crowdfunding campaign to support the modest costs of the book, with profits (if any) going toward supporting the IndieWeb community.

I’m happy to entertain any other thoughts or considerations people have, so feel free to reply in the comments below, or better yet, reply on your own site and send me a webmention.

Video lectures for Algebraic Geometry

I originally made this compilation on May 31, 2016 to share with some friends and never got around to posting it. Now that I’m actually in the midst of a class on the topic, I thought I’d dust it off and finally publish it for those who are interested.

If you’re aware of things I’ve missed, or which have appeared since, please do let me know in the comments.

A List of video lectures for Algebraic Geometry

Some other places with additional (sometimes overlapping resources), particularly for more advanced/less introductory lectures:

Wilson Fire in my front yard

Apparently the forest fire started around 4 am on Mount Wilson and has been burning relatively steadily since.

This isn’t the closest fire to the house–that award goes to a medium sized brush fire about 8 doors down when I lived on Adams Hill in 2012, which was out in just a few hours–but it is the closest and the largest thus far. While it would take me about 3.5 hours to hike to the location of the fire, it’s because it’s located on a mountain and would take some winding mountain paths as well as a 4,700 foot climb. Sadly, most everything between us and the fire is all dry brush.

Fortunately today it’s not as hot or as windy as it has been here for the past month. Typically the winds have been to the North West this month, which would potentially serve to protect the house. The fire isn’t very close to residential neighborhoods (ours is the closest though), but there is an estimated $500 million in infrastructure and assets at the top of the hill as it is the home of the Wilson Observatory as well as a multitude of broadcast equipment for all of the major LA television and several radio stations.

Since at least 9am, I’ve been seeing a rotation of at least three helicopters and a large plane (747?) doing water drops on the hillside to battle the fire. Some of the photos above have these aircraft visible.

I still vividly remember the massive Station Fire in this area from August 2009 that still stands as one of the nation’s largest and significantly threatened the Observatory at the top of the hill above us. I was in San Diego the day the fire started and still remember the massive pyrocumulus cloud that I could vividly see the entire drive back home to Los Angeles.

Sadly, site deaths (thanks FriendFeed) have not preserved the photos, but here are a few tweets almost a week apart about the original:

Updates

4:00 am Fire reported
8:00 am 26 acres burning and 0% contained
9:00 am the blaze had burned about 30 acres and and was 5 percent contained, according to the U.S. Forest Service
4:00 pm No visible smoke apparent from the Pasadena side facing North, but the fire is still blazing
9:00 pm No visible fire from the Pasadena side still, but fire is still at 30 acres and 25% containment

News articles

Using Facepiles in Comments for WordPress with Webmentions and Semantic Linkbacks

Today, through the brilliant and diligent work of David Shanske and Matthias Pfefferle (as well as Ashton McAllan and many other opensource contributors), I’ve enabled facepiling for likes, reposts, and mentions within my website’s comment section using the Semantic Linkbacks plugin for WordPress (in conjunction with the Webmention plugin.)

What does this mean? My personal website both sends and accepts Webmentions, a platform independent “at mention” or @mention, including those from the fantastic, free service brid.gy which sends replies/comments, likes, reposts, and mentions to my site from silo services like Facebook, Twitter, Instagram, Google+, and even Flickr.

As I’ve long known, and as someone noted at least once on my site, some of these likes, replies, and mentions, which provide some interesting social interaction and social proof of a post’s interest, don’t always contribute to the actual value of the conversation. Now with this wonderful facepiling UI-feature, I’m able to concatenate these types of interactions into a smaller and more concentrated section at the bottom of a post’s comments section, so they’re still logged and available, but now they just aren’t as distracting to the rest of the conversation.

Compare the before and after:

Before

A mention, a Facebook like, another mention and a repost on Twitter. Anil’s comment is pretty useful, but the others don’t add as much to the ideas in the post.
Richard MacManus “liked” the post and subsequently wrote about it on AltPlatform (relatively useful) along with some tangential mentions, which don’t add as much to the conversation. The raw URL of Gisele’s Twitter post likely looked better natively on Twitter (as a Twitter Card), but translated onto my site as a mention like this, just isn’t as useful.

After

Likes and Reposts concatenated on my site now after converting them into facepiles. They still give the social “proof” and indicate the interaction, but don’t interfere in the conversation now–especially when there are hundreds of them.

 

A Prime Example

In particular, this functionality can best bee seen on my article The Facebook Algorithm Mom Problem, which has over 400 such interactions which spanned pages and pages worth of likes, reposts, and mentions. Many of my posts only get a handful of these types of interactions, but this particular post back in July was overwhelmed with them when it floated to the top of Hacker News and nearly crippled my website. Without the facepile functionality, the comments section of this post was untenably unreadable and unusable. Now, with facepiles enabled, the comments are more quickly read and more useful to those who are interested in reading them while still keeping the intent.

Implementing

For those who have already begun Indiewebifying their WordPress sites with plugins like Webmention and Semantic Linkbacks, the most recent 3.5.0 update to Semantic Linkbacks has the functionality enabled by default. (Otherwise you can go to your administrative dashboard and click on the checkbox next to “Automatically embed facepile” located under Settings » Discussion).

Settings interface for enabling or disabling facepiles in your comments section with Semantic Linkbacks (and Webmentions)

As a caveat, there’s a known bug for those who are using JetPack to “Let readers use WordPress.com, Twitter, Facebook, or Google+ accounts to comment”. If the facepiles don’t show up on your site, just go to your JetPack settings (at yoursite.com/wp-admin/admin.php?page=jetpack#/discussion) and disable this feature. Hopefully, the JetPack team will have it fixed shortly.

If you haven’t begun using IndieWeb principles on your WordPress website, you might consider starting with my article An Introduction to the IndieWeb, which includes some motivation as well as some great resources for getting started.

Nota bene: I know many in the WordPress community are using the excellent theme Independent Publisher, which already separates out likes, mentions, etc. (though without the actual “facepiles”), so I’m not sure if/how this functionality may work in conjunction with it. If you know, please drop me a note.

Hopefully most WordPress themes will support it natively without any modifications, but users are encouraged to file issues on the plugin if they run across problems.

Using another platform?

I’m not immediately aware of many other CMSes or services that have this enabled easily out of the box, but I do know that Drew McLellan enabled it (along with Webmentions) in the Perch CMS back in July. Others who I’ve seen enabling this type of functionality are documented on the IndieWeb wiki in addition to Marty McGuire and Jeremy Keith, who has a modified version, somewhat like Independent Publisher’s, on his website.

There are certainly many in the IndieWeb community who can help you with this idea (and many others) in the IndieWeb’s online chat.

Give it a spin

Now that it’s enabled, if you’re reading it on my website, you can click on any of the syndicated copies listed below and like, retweet/repost, or mention this article in those social media platforms and your mention will get sent back to my post to be displayed almost as it would be on many of those platforms. Naturally comments or questions are encouraged to further the ongoing conversation, which should now also be much easier to read and interact with.

Thanks again to everyone in the IndieWeb community who are continually hacking away to allow more people to more easily own and control their content while still easily interacting with people on the internet.

UPDATE

Turning mentions into comments for native display

Following Aaron Davis’ comment, I thought I’d add a few more thoughts for those who have begun facepiling their likes, mentions, bookmarks, etc. As he indicates, it’s sometimes useful to call out a particular mention, a special like, or you might want to highlight one among the thousands for a particular reason. This is a feature that many are likely to want occasionally and code for it may be added in the future, but until then, one is left in the lurch a bit. Fortunately, as with all things IndieWeb, part of the point is having more control over your site to be able to do anything you’d like to it. So for those without the ability to write the requisite code to create a pull request against the Webmention or Semantic Linkbacks plugins (they’re more than welcome), here are a few quick cheats for converting that occasional (facepiled or not) webmention into a full comment within your WordPress site’s comment section.

Pro tip: This also works (even if you’re not using facepiles) to convert a basic mention into something that looks more like a native comment. It’s also useful when you’ve received a mention that you’d prefer to treat as a reply, but which wasn’t marked up as a reply by the sending site.

I’ll use an example from the Facebook Algorithm Mom Problem post referenced above. On that post, I’d received a webmention via Twitter from Anil Dash, a blogger and advocate for more humane, inclusive and ethical technology, with some commentary about usability. Here is his original tweet:

That webmention is now hidden behind an avatar and not as likely to be seen by more casual readers. I’d like to change it from being hidden behind his avatar in that long mention list and highlight it a bit to make it appear as a comment in the full comments section.

On a post with a large number of mentions, you’re very unlikely to find some of the valuable nectar hiding in them. Do you see Anil Dash’s lovely mug hiding among all these avatars? (Hint, it’s not a “blank” avatar caused by someone having changed their Twitter, Facebook, etc. avatar.)

Steps to convert a mention to a comment

Caution: I recommend reading through all the steps before attempting this. You’ll be modifying your WordPress database manually, so please be careful so you don’t accidentally destroy your site. When doing things like this, it’s always a good idea to make a back up of your database just in case.

  1. Search for the particular comment you want to change in the WordPress Admin UI.
  2. Hover over the date in the “Submitted On” column to find the comment ID number in the URL, in this case it’s http://boffosocko.com/2017/07/11/the-facebook-algorithm-mom-problem/#comment-35281. Make a note of the comment ID: 35281.
  3. Open up the mySQL database for your WordPress install (I’m using phpMyAdmin) to view the data for your site.
  4. Go to the wp_comments table in the database. (Yours may be slightly different depending on how your site was set up, but it should contain the word “comments”.)
  5. Use the search functionality for your table and input your comment ID number into the field for comment_ID.
  6. We’ve identified the specific comment we want to modify in phpMyAdmin.
  7. Now delete the word “webmention” from the comment_type field for the particular comment. This field should now be empty.
  8. You should now be able to view your post (be sure to clear your cache if necessary) and see the mention you received displayed as a native comment instead of a mention. It should automatically include the text of the particular mention you needed.
Here’s what the modified mention from Anil Dash looks like in my comments section now. It appears as if it were a native comment.

If you need to convert a large number of mentions into comments, you may be better off searching for the particular post’s post_ID in the comments table and changing multiple comment_type fields at once. Be careful doing this in bulk–you may wish to do a database back up before making any changes to be on the safe side.
​​​

Algebraic Geometry Lecture 1

For those who are still on the fence about taking Algebraic Geometry this quarter (or the follow on course next quarter), here’s a downloadable copy of the written notes with linked audio that will allow you to sample the class:

Algebraic Geometry-Lecture 1 notes [.pdf file with embedded and linked audio]

I’ve previously written some notes about how to best access and use these types of notes in the past. Of particular note, one must download the .pdf file and open in a recent version of Adobe Acrobat to take advantage of the linked/embedded audio file. (Trust me, it’s worth doing as it will be like you were there with the 20 of us who showed up last night!)

For those who prefer just the audio files separately, they can be listened to here, or downloaded.

Lecture 1 – Part 1

Lecture 1 – Part 2

Again, the recommended text is Elementary Algebraic Geometry by Klaus Hulek (AMS, 2003) ISBN: 0-8218-2952-1.

For those new to Dr. Miller’s classes, I’ve written up some hints/tips about them in the past as well.