We’re at a turning point: 2017 is going to be the year that we’re going to see features in WordPress which require hosts to have HTTPS available. Just as JavaScript is a near necessity for smoother…
One big reason is the ability to compose your entries while offline. WordPress does not (yet) allow for the web interface to be used offline. Also, if you po...
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.
Not a day goes by that I don’t run across a fantastic blog built or hosted on WordPress that looks gorgeous–they do an excellent job of making this pretty easy to accomplish.
but…
Invariably the blog’s author has a generic avatar (blech!) instead of a nice, warm and humanizing photo of their lovely face.
Or, perhaps, as a user, you’ve always wondered how some people qualified to have their photo included with their comment while you were left as an anonymous looking “mystery person” or a randomized identicon, monster, or even an 8-bit pixelated blob? The secret the others know will be revealed momentarily.
Which would you prefer?
Identicon: A face only the internet could loveChris: a face only a mother could loveAn example of a fantastic blog covering the publishing space, yet after 11,476 articles, the author can’t get his photo to show up.
Somehow, knowing how to replace that dreadful randomized block with an actual photo is too hard or too complicated. Why? In part, it’s because WordPress separated out this functionality as a decentralized service called Gravatar, which stands for Globally Recognized Avatar. In some sense this is an awesome idea because then people everywhere (and not just on WordPress) can use the Gravatar service to change their photo across thousands of websites at once. Unfortunately it’s not always clear that one needs to add their name, email address, and photo to Gravatar in order for the avatars to be populated properly on WordPress related sites.
(Suggestion for WordPress: Maybe the UI within the user account section could include a line about Gravatars?)
So instead of trying to write out the details for the third time this week, I thought I’d write it once here with a bit more detail and then point people to it for the future.
Another quick example
Can you guess which user is the blog’s author 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:
[wpvideo HNyK67JS]
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
WordPress screenshot of admin panel for user information.
In the field for the email, input (one of) the email(s) you used in Gravatar that’s linked to a photo.
Don’t worry, the system won’t show your email and it will remain private–WordPress and Gravatar simply use it as a common “key” to serve up the right photo and metadata from Gravatar to the WordPress site.
Once you’ve clicked save, your new avatar should show up in the list of users. More importantly it’ll now show up in all of the WordPress elements (like most author bio blocks and in comments) that appear on your site.
Administrator Caveats
WordPress themes need to be Gravatar enabled to be able to use this functionality, but in practice, most of them do, particularly for comments sections. If yours isn’t, then you can usually add it with some simple code.
In the WordPress admin interface one can go to Settings>>Discussion and enable View people's profiles when you mouse over their Gravatars under the heading “Gravatar Hovercards” to enable people to see more information about you and the commenters on your blog (presuming the comment section of your theme is Gravatar enabled.)
Some WordPress users often have several user accounts that they use to administer their site. One might have a secure administrator account they only use for updates and upgrades, another personal account (author/editor admin level account which uses their name) for authoring posts, and another (author/editor admin level) account for making admin notice posts or commenting as a generic moderator. In these cases, you need to make sure that each of these accounts has an email address with an an associated Gravatar account with the same email and the desired photo linked to it. (One Gravatar account with multiple emails/photos will usually suffice, though they could be different.)
Example: In Nate’s case above, we showed that his photo didn’t show in the author bio box, and it doesn’t show up in some comments, but it does show up in other comments on his blog. This is because he uses at least two different user accounts: one for authoring posts and another for commenting. The user account he uses for some commenting has a linked Gravatar account with email and photo and the other does not.
One account doesn’t have a Gravatar with a linked email and photo.
Want more information on how you can better own and manage your online identity? Visit IndieWeb.org: “A people-focused alternative to the ‘corporate web’.”
TL;DR
To help beautify your web presence a bit, if you notice that your photo doesn’t show up in the author block or comments in your theme, you can (create and) use your WordPress.com username/password in an account on their sister site Gravatar.com. Uploading your preferred photo on Gravatar and linking it to an email will help to automatically populate your photo in both your site and other WordPress sites (in comments) across the web. To make it work on your site, just go to your user profile in your WordPress install and use the same email address in your user profile as your Gravatar account and the decentralized system will port your picture across automatically. If necessary, you can use multiple photos and multiple linked email addresses in your Gravatar account to vary your photos.
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.
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. 🙂
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.
I only use @drupal when I want to make money. (Replying to why his personal site was on @wordpress.) #
(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.)
Crazy to think that, even though I have had a GitHub account for 5 years and have poked, played and forked things, I have never made a pull request and contributed something to another project unti…
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.
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.
Does blogging need to be different than it was?
I
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.
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 multiple food truck options over the weekend
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.
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.
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.
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.
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.
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.
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.
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.
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.
One big IndieWebraison d’être is using your own web site to reply, like, repost, and RSVP to posts and events. You do this by annotating links on your site with simple microformats2 HTML.
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.
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.
Gina Trapani (Track Changes)
Can you guess which user is the blog’s author in the screencapture?
Clint Lalonde (ClintLalonde.net)
John Scalzi (whatever.scalzi.com)
Matthias Pfefferle (GitHub)