Paragraph commenting, or annotations is not exactly new. Readers have been scribbling in the margins of books, magazines and uni assignments for years. The online world has been slow to adopt this approach which is perhaps why Medium caused a stir and no shortage of admiring looks when it went the annotation route. Well, admire forlornly no more because I'm going to show you how to add paragraph commenting to your WordPress site. There are existing annotation solutions for WordPress but they are generally theme dependent, or in the case of CommentPress actually provide a theme.
This has some great advice and code for potentially adding marginalia.Syndicated copies to:
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.
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?
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 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?
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.
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.
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.
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’.”
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.Syndicated copies to:
In an effort to provide easier commuting access for a broader cross-section of Homebrew members we met last night at Yahoo’s Yahoo’s primary offices at 11995 W. Bluff Creek Drive, Playa Vista, CA 90094. We hope to alternate meetings of the Homebrew Website Club between the East and West sides of Los Angeles as we go forward. If anyone has additional potential meeting locations, we’re always open to suggestions as well as assistance.
We had our largest RSVP list to date, though some had last minute issues pop up and one sadly had trouble finding the location (likely due to a Google map glitch).
Angelo and Chris met before the quiet writing hour to discuss some general planning for future meetings as well as the upcoming IndieWebCamp in LA in November. Details and help for arrangements for out of town attendees should be posted shortly.
Notes from the “broadcast” portion of the meetup
Chris Aldrich (co-organizer)
- Still working on a workflow for owning all of his reading related data, particularly with respect to POSSE to GoodReads.com
- Registered for the upcoming Dodging the Memory Hole 2016: Saving Online News on October 13/14 at UCLA which has the flavor of IndieWeb as well as the Decentralized Web movements.
Angelo Gladding (co-organizer)
- Work is proceeding nicely on the overall build of Canopy
- Discussed an issue with expanding data for social network in relation to events and potentially expanding contacts based on event attendees
Srikanth Bangalore (our host at Yahoo!)
- Discussed some of his background in coding and work with Drupal and WordPress.
- His personal site is https://srib.us/
Notes from the “working” portion of the meetup
We sketched out a way to help Srikanth IndieWeb-ify not only his own site, but to potentially help do so for Katie Couric’s Yahoo! based news site along with the pros/cons of workflows for journalists in general. We also considered some potential pathways for potentially bolting on webmentions for websites (like Tumblr/WordPress) which utilize Disqus for their commenting system. We worked through the details of webmentions and a bit of micropub for his benefit.
Srikanth discussed some of the history and philosophy behind why Tumblr didn’t have a more “traditional” native commenting system. The point was generally to socially discourage negativity, spamming, and abuse by forcing people to post their comments front and center on their own site (and not just in the “comments” of the receiving site) thereby making the negativity be front and center and redound to their own reputation rather than just the receiving page of the target. Most social media related sites hide (or make hard to search/find) the abusive nature of most users, while allowing them to appear better/nicer on their easier-to-find public facing persona.
Before closing out the meeting officially, we stopped by the front lobby where two wonderful and personable security guards (one a budding photographer) not only helped us with a group photo, but managed to help us escape the parking lot!
I think it’s agreed we all had a great time and look forward to more progress on projects, more good discussion, and more interested folks at the next meeting. Srikanth was so amazed at some of the concepts, it’s possible that all of Yahoo! may be IndieWeb-ified by the end of the week. 🙂
We hope you’ll join us next month on 10/05! (Details forthcoming…)
Live Tweets Archive
Ever with grand aspirations to do as good a job as the illustrious Kevin Marks, we tried some livetweeting with Noterlive. Alas the discussion quickly became so consuming that the effort was abandoned in lieu of both passion and fun. Hopefully some of the salient points were captured above in better form anyway.
(This CMS comment may have been the biggest laugh of the night, though the tone captured here (and the lack of context), doesn’t do the comment any justice at all.)
Clint, first, congratulations on your first PR!
Oddly, I had seen the VERY same post/repo a few weeks back and meant to add a readme too! (You’ll notice I got too wrapped up in reading through the code and creating some usability issues after installing the plugin instead.)
Given that you’ve got your own domain and website (and playing in ed/tech like many of us are), and you’re syndicating your blog posts out to Medium for additional reach, I feel compelled to mention some interesting web tech and philosophy in the #IndieWeb movement. You can find some great resources and tools at their website.
In particular, you might take a look at their WordPress pages which includes some plugins and resources you’ll be sure to appreciate. One of their sets of resources is allowing you to not only syndicate your WP posts (what they call POSSE), but by using the new W3C webmention spec, you can connect many of your social media resources to brid.gy and have services like twitter, facebook, G+, instagram and others send the comments and likes on your posts there back to your blog directly, thereby allowing you to own all of your data (as well as the commentary that occurs elsewhere). I can see a lot of use for education in some of the infrastructure they’re building and aggregating there. (If you’re familiar with Known, they bake a lot of Indieweb goodness into their system from the start, but there’s no reason you shouldn’t have it for your WordPress site as well.)
If you need any help/guidance in following/installing anything there, I’m happy to help.
Congratulations again. Keep on pullin’!Syndicated copies to:
This morning while breezing through my Woodwind feed reader, I ran across a post by Rick Mendes with the hashtags #readlater and #readinglist which put me down a temporary rabbit hole of thought about reading-related post types on the internet.
I’m obviously a huge fan of reading and have accounts on GoodReads, Amazon, Pocket, Instapaper, Readability, and literally dozens of other services that support or assist the reading endeavor. (My affliction got so bad I started my own publishing company last year.)
READ LATER is an indication on (or relating to) a website that one wants to save the URL to come back and read the content at a future time.
I started a page on the IndieWeb wiki to define read later where I began writing some philosophical thoughts. I decided it would be better to post them on my own site instead and simply link back to them. As a member of the Indieweb my general goal over time is to preferentially quit using these web silos (many of which are listed on the referenced page) and, instead, post my reading related work and progress here on my own site. Naturally, the question becomes, how does one do this in a simple and usable manner with pretty and reasonable UX/UI for both myself and others?
Currently I primarily use a Pocket bookmarklet to save things (mostly newspaper articles, magazine pieces, blog posts) for reading later and/or the like/favorite functionality in Twitter in combination with an IFTTT recipe to save the URL in the tweet to my Pocket account. I then regularly visit Pocket to speed read though articles. While Pocket allows downloading of (some) of one’s data in this regard, I’m exploring options to bring in the ownership of this workflow into my own site.
For more academic leaning content (read journal articles), I tend to rely on an alternate Mendeley-based workflow which also starts with an easy-to-use bookmarklet.
I’ve also experimented with bookmarking a journal article and using hypothes.is to import my highlights from that article, though that workflow has a way to go to meet my personal needs in a robust way while still allowing me to own all of my own data. The benefit is that fixing it can help more than just myself while still fitting into a larger personal workflow.
A Broader Reading (Parent) Post-type
Philosophically a read later post-type could be considered similar to a (possibly) unshared or private bookmark with potential possible additional meta-data like: progress, date read, notes, and annotations to be added after the fact, which then technically makes it a read post type.
A potential workflow viewed over time might be: read later >> bookmark >> notes/annotations/marginalia >> read >> review. This kind of continuum of workflow might be able to support a slightly more complex overall UI for a more simplified reading post-type in which these others are all sub-types. One could then make a single UI for a reading post type with fields and details for all of the sub-cases. Being updatable, the single post could carry all the details of one’s progress.
Indieweb encourages simplicity (DRY) and having the fewest post-types possible, which I generally agree with, but perhaps there’s a better way of thinking of these several types. Concatenating them into one reading type with various data fields (and the ability of them to be public/private) could allow all of the subcategories to be included or not on one larger and more comprehensive post-type.
- Not including one subsection (or making it private), would simply prevent it from showing, thus one could have a traditional bookmark post by leaving off the read later, read, and review sub-types and/or data.
- As another example, I could include the data for read later, bookmark, and read, but leave off data about what I highlighted and/or sub-sections of notes I prefer to remain private.
A Primary Post with Webmention Updates
Alternately, one could create a primary post (potentially a bookmark) for the thing one is reading, and then use further additional posts with webmentions on each (to the original) thereby adding details to the original post about the ongoing progress. In some sense, this isn’t too far from the functionality provided by GoodReads with individual updates on progress with brief notes and their page that lists the overall view of progress. Each individual post could be made public/private to allow different viewerships, though private webmentions may be a hairier issue. I know some are also experimenting with pushing updates to posts via micropub and other methods, which could be appealing as well.
This may be cumbersome over time, but could potentially be made to look something like the GoodReads UI below, which seems very intuitive. (Note that it’s missing any review text as I’m currently writing it, and it’s not public yet.)
Ideally, better distinguishing between something that has been bookmarked and read/unread with dates for both the bookmarking and reading, as well as potentially adding notes and highlights relating to the article is desired. Something potentially akin to Devon Zuegel‘s “Notes” tab (built on a custom script for Evernote and Tumblr) seems somewhat promising in a cross between a simple reading list (or linkblog) and a commonplace book for academic work, but doesn’t necessarily leave room for longer book reviews.
I’ll also need to consider the publishing workflow, in some sense as it relates to the reverse chronological posting of updates on typical blogs. Perhaps a hybrid approach of the two methods mentioned would work best?
Potentially having an interface that bolts together the interface of GoodReads (picture above) and Amazon’s notes/highlights together would be excellent. I recently noticed (and updated an old post) that they’re already beta testing such a beast.
I’ll keep thinking about the architecture for what I’d ultimately like to have, but I’m always open to hearing what other (heavy) readers have to say about the subject and the usability of such a UI.
Please feel free to comment below, or write something on your own site (which includes the URL of this post) and submit your URL in the field provided below to create a webmention in which your post will appear as a comment.Syndicated copies to:
Does blogging need to be different than it was?
agree with John that blogs seemingly occupy a different space in online life today than they did a decade ago, but I won’t concede that, for me at least, most of it has moved to the social media silos.
I think the role of the blog is different than it was even just a couple of years ago. It’s not the sole outpost of an online life, although it can be an anchor, holding it in place. — John Scalzi
Why? About two years ago I began delving into the evolving movement known as IndieWeb, which has re-empowered me to take back my web presence and use my own blog/website as my primary online hub and identity. The tools I’ve found there allow me to not only post everything to my own site first and then syndicate it out to the social circles and sites I feel it might resonate with, but best of all, the majority of the activity (comments, likes, shares, etc.) on those sites boomerangs back to the comments on my own site! This gives me a better grasp on where others are interacting with my content, and I can interact along with them on the platforms that they choose to use.
Some of the benefit is certainly a data ownership question — for who is left holding the bag if a major site like Twitter or Facebook is bought out or shut down? This has happened to me in dozens of cases over the past decade where I’ve put lots of content and thought into a site only to see it shuttered and have all of my data and community disappear with it.
Other benefits include: cutting down on notification clutter, more enriching interactions, and less time wasted scrolling through social sites.
Reply from my own site
Now I’m able to use my own site to write a comment on John’s post (where the comments are currently technically closed), and keep it for myself, even if his blog should go down one day. I can alternately ping his presence on other social media (say, by means of Twitter) so he’ll be aware of the continued conversational ripples he’s caused.
Social media has become ubiquitous in large part because those corporate sites are dead simple for Harry and Mary Beercan to use. Even my own mother’s primary online presence begins with http://facebook.com/. But not so for me. I’ve taken the reigns of my online life back.
My Own Hub
My blog remains my primary online hub, and some very simple IndieWeb tools enable it by bringing all the conversation back to me. I joined Facebook over a decade ago, and you’ll notice by the date on the photo that it didn’t take me long to complain about the growing and overwhelming social media problem I had.
I’m glad I can finally be at the center of my own social graph, and it was everything I thought it could be.
Syndicated copies to:
The camp sold out in just hours a month and change ago, in part because it was limited to about 200 people given the fantastic space provided by UC Irvine’s Advanced Innovation. There aren’t many spaces one could go with such spectacular amenities and support in addition to a huge plethora of screens, recording equipment, and audio/visual supplements. Thanks for hosting us Applied Innovation!
Sadly the limited space meant that some people missed out, and the most unrepresented group was likely new users who may not have heard about it in time to get tickets. However, this didn’t mean that anyone else was underrepresented: there were attendees of every ability, age (10 months to over 90), race, sex and creed. I was honestly astounded by the diversity of people in attendance.
One of the best programming decisions was having food trucks show up to cater lunch, which kept everyone close and socially engaged rather than dispersing everyone to the wind by means of forcing outside food options.
Sadly, even knowing that Sundays are always slower than Saturdays, there were 2-3 empty rooms with no sessions at all on Sunday afternoon. I wish there had been some type of offering to assist in putting together impromptu sessions or BoF sessions in these empty rooms. Alternately doing a beginner build track on Sunday and releasing “Sunday only” tickets might have been interesting and also better utilized the space.
Below are some thoughts on the individual sessions I attended. Most should be on WordPress.TV shortly and nearly everyone was posting slides.
Development Workshop: Intro to Core Concepts by Erick Hitter
This was a great quick introduction to most of the basics of WP Core and at just about the right time as I’ve been wanting to delve more directly into portions for a few projects. I’d definitely recommend the slide deck once it’s posted. This was one of my favorite sessions of the weekend.
Content Development by Greg Taylor
This was one of the more entertaining sessions and had more conversation back and forth than any camp session I’ve ever attended. Sadly it stayed to the basics and in a room which seemed to have some more advanced participants, I wish it had gone further.
What is oEmbed and why you should use it by Jason Tucker
This was mostly what I expected, but included some additional tips that I didn’t know existed. In particular, knowing that I can provide formatting for others when they oEmbed my site is something I’ll have to look into.
Getting Started With SVGs For WordPress Theme Building by Jacob Arriola
I’ve played a bit with SVG’s but hadn’t delved into them very significantly. This was a good overview/crash course on some of the particulars.
Curating a Pattern Library by Brianna Privett
This was a nice start to some intro information on talking about design patterns, but I would have preferred something at the intermediate or advanced level. In particular, it made me consider some quirky potential new visual grammars for mobile use (particularly in advertising). It also inspired me to think about creating a disorenting experience built on the visual/time grammar of the movie Inception.
Development Discussion: Improving WordPress Search by Aaron Holbrook
Aaron was a fun and very dynamic speaker who obviously truly loves his topic. This was by far the best session I attended over the weekend. I want to try to get Elastic Search and ElasticPress set up on my site soon as it looks like what modern search should be on a website.
Using WordPress as an App Framework by Nathan Tyler
I’m somewhat shocked I’d never thought of doing this myself before, but just knowing the concept exists is more than half the battle. The sad part is that it sounds like for half the stuff you get for free, one needs to rebuild or re-engineer something else to get it working.
Contributing to Open Source by Andy Fragen
Andy is a practicing physician and a great WordPress “hobby-ist” who drove in from Palm Springs to give a great overview of the philosophy of Open Source and a broad range of tools used to help further that goal. One can’t help but be affected by his enthusiasm.
For a session meant to be primarily entertainment, I was actually surprised to learn about coding/development by hearing a panel of others critique four plugins. Condensed down, this could have been a session on the intangible things one would want to think about before building a plugin.
A Developer’s Guide to Support by Thomas Patrick Levy
Everyone can be put into a better mindset to help others. This was a great presentation for just that.
WordCamp Los Angeles 2016
Because one just can’t get enough, I can’t wait to attend WordCamp LA on September 10th & 11th at Cal State University Los Angeles.
IndieWeb and WordPress
Since they’ve already made a Call for Speakers for the LA camp, I’ve already submitted the following talk application which focuses on the IndieWeb:
The IndieWeb is a people-focused alternative to the “corporate web” which has recently been covered in Wired, Fast Company, The Atlantic, The New Republic, Newsweek, and Slate. It encourages everyone to own their own data/content, be better connected to engage with everyone, and provide users with more control of their content and identity online. With the rise of social media silos everyone is seemingly incentivized to split up their online identity to participate in multiple various communities and a variety of platforms which are often bought out, shut down, or simply disappear, very often taking users’ data with them.
Why not allow your own WordPress site to truly be your primary hub online? Post your content on your own site/server so that you not only own it, but then, if you choose, syndicate it out to social media networks in a native and simpler fashion to take advantage of their network effects and engagement. Even better, new web specs like WebMention from the W3C (essentially a universal/internet-wide method of @mention) allow you to easily bring back comments, likes, and similar data back to your original post as native comments. You can now truly own all of the data and subsequent related data (comments) you place on most major social networks.
In this session we’ll briefly cover the basic history and philosophy of the IndieWeb movement before moving into more advanced topics like microformats, WebMention, IndieAuth, micropub, and a growing wealth of related tools which will be of interest to developers and designers alike. While primarily geared at individual users, these philosophies and techniques can be of huge value to writers/authors, bloggers, podcasters, and even businesses for drastically improving their reach and marketing efforts online while simultaneously saving them time and effort.
I spoke to a number of people over the weekend about some IndieWeb concepts and basics, but for those who can’t wait for more details, I’m happy to discuss more of the specifics at anyone’s leisure. If you’re really chomping at the bit, I’ll be at the WordPress Pasadena Meetup tonight and hopefully be setting up a Homebrew Website Club meeting in the LA area sometime in the next few weeks in anticipation of IndieWeb Camp Los Angeles in November.Syndicated copies to:
I’m not sure why I didn’t upgrade this ages ago when I saw it mentioned (probably because of the manual nature of the upgrade and the fact that I don’t think it’s bundled into the IndieWeb plugin for WordPress), but here we go. And this is the first post actually using the bookmarklet.
Syndicated copies to:
IndieWeb press this
Having said that, most people don’t want to write HTML just to like or reply to something. WordPress’s Press This bookmarklets can already start a new post with a link to the page you’re currently viewing. This code adds IndieWeb microformats2 markup to that link. Combined the wordpress-webmention plugin, you can use this to respond to the current page with just two clicks.
What’s more, if you’re currently on a Facebook post or Twitter tweet, this adds the Bridgy Publish link that will reply, like, favorite, retweet, or even RSVP inside those social networks.