Output of comments isn't rendering using IndieWeb plugins

[chrisaldrich]

I'd previously posted this at https://wordpress.org/support/topic/likes-rts-mentions-not-showing-up-in-comments?replies=1#post-7327601, but thought I'd cross post it here because perhaps that it's an issue potentially with how the theme may be outputting comments vis-a-vis the IndieWeb plugins, which I know you're aware of @raamdev. I've got another related issue which I'll post separately shortly. The original post follows:

I'm still attempting to understand the larger world of indieweb code for WP, but I'm relatively sure that the issue I'm seeing is potentially coming out of the WP Semantic-Linkbacks plugin.

The issue:
Likes from Facebook as well as likes and RT's from Facebook are feeding into the the WP comments dashboard from brid.gy properly, but once being approved, aren't actually showing up in the comments section of the related WP post.
I've done a quick test with a comment with text on the same Facebook post and don't seem to be seeing the same issue and it seems to show up fine in the comments on the post once approved.

Example:
WP post: http://lfl8424.boffosocko.com/2015/08/20/todays-books-august-20-2015/
Associated facebook post: https://www.facebook.com/ChrisAldrich/posts/10100846770831315

As this is a relatively new site, perhaps there's some small thing that I'm missing or forgetting? I set it all up with the WP IndieWeb plugin (v2.2.0) and everything within it is current and installed/configured (except Hum and Micropub).

Its possible that it's something similar to a related issue I'd had before on a different WP install (see: pfefferle/wordpress-webmention-for-comments#1) though that seemed to be fixed (by itself?) shortly thereafter.

Within the WP admin interface, (http://lfl8424.boffosocko.com/wp-admin/comment.php?action=editcomment&c=25)
in the editable comment section, I'm seeing something similar to the following:

<a href="http://lfl8424.boffosocko.com/2015/08/20/todays-books-august-20-2015" rel="nofollow"></a> <a href="http://lfl8424.boffosocko.com/2015/08/20/todays-books-august-20-2015/" rel="nofollow"></a>

So there is data there, it's just not being parsed/rendered properly somewhere.

Since I've got another WP set up that seems to be operating properly with the same general set up, has anyone got any ideas?

[raamdev]

@chrisaldrich As you noted, there are two other GitHub issues here related to IndieWeb integration with the Independent Publisher theme: #155 and #197.

Regarding this GitHub issue: Have you confirmed that the issue you're describing above is only occurring with the Independent Publisher theme? If not, then this isn't related to the theme itself but rather something else. (I'm not saying it's not a problem with theme--I just want to make sure that it is a problem with Independent Publisher before I start investigating this.)

[chrisaldrich]

Sorry for the delay, but my work schedule and travel have been awfully heavy lately. It does sound like the issue I'm having is somewhat related to the discussion on #155

I've got two separate installs with the same IndieWeb plugins installed. One uses Independent Publisher and the other is a slightly older version of the Academica Theme (v1.2.3 downloadable from https://www.dropbox.com/sh/ym0c78uyzltpeu1/AAByejNd8MG83I2MVOFXOuPaa?dl=0) which is outputting the facebook likes, twitter favorites, and reposts properly (or at least as I would expect.)

For some reason Independent Publisher isn't outputting Brid.gy likes, favorites, or resahares from Twitter and Facebook out of the box the way that Academica (or even WP common themes like Twenty Fourteen or Twenty Fifteen) does. They're not showing up at all. On the site with Academica Theme, I've tried doing a "Live Preview" of the Independent Publisher theme and there, it also seems to be "eating" (not showing) these additional comments from Brid.gy while all the other traditional comments do show up.

However, while you're tracking down the issue(s), you might also consider tweaking one additional output issue with respect to these types of comments. From a UI standpoint for themes using IndieWeb, I would recommend that the comment section sort out the comments and display them somewhat differently. For simple Facebook likes and Twitter favorites, it might be best to aggregate all of them into a "facepile" with a simple header ("Liked on Facebook"/"Favorited on Twitter") followed by the photo icons of the people who liked/favorited the article within those platforms. (This is similar to how most Wordpress sites handle Likes/Stars natively within WordPress.) Following this it could create a facepile of people who reposted/reshared the post. Then after this the rest of the comments should be sorted by date/time as comments traditionally are as this will allow people to more easily read/consume the actual commentary.

This post has an example of a combination of likes/favorites/reposts and actual comments that would be better sorted into a facepile section followed by a more "traditional" comments section. http://boffosocko.com/2015/07/27/algebraic-number-theory-ucla-extension/

I'm supposing that it's how Independent Publisher is rendering the output of wp_commentmeta into its comment section that causes some of these brid.gy-fed likes/favorites/reposts to disappear.

If it helps, I'll also point out a previous and possibly related issue I'd run across vis-a-vis IndieWeb and output of comments: pfefferle/wordpress-webmention-for-comments#1. The solution was most likely the way that the Semantic Linkbacks plugin (an IndieWeb WP-specific plugin) was handling its output. Here it's likely that @dshanske or pfefferle may be of more assistance in sorting things out if necessary.

[raamdev]

I would recommend that the comment section sort out the comments and display them somewhat differently. For simple Facebook likes and Twitter favorites, it might be best to aggregate all of them into a "facepile" with a simple header ("Liked on Facebook"/"Favorited on Twitter") followed by the photo icons of the people who liked/favorited the article within those platforms.

@chrisaldrich Thanks so much for the feedback. :-) Yes, I totally agree with you that separating them from the main comments makes a lot of sense and I'll be sure to take that into consideration when I work on this.

FYI, the Independent Publisher theme currently separates Pingbacks/Trackbacks from the main comments and puts them at the very bottom. You can see this in action at the bottom of this post:

[dshanske]

You can separate webmentions as well and put them at the bottom. You can also, if you wish, classify them by mention type(like, favorite, etc)

[raamdev]

@chrisaldrich @dshanske Would either of you be able to post an SQL dump of a few webmentions from one of your WordPress posts so that I can have some real-world data to test against as I work on improving webmention support in Independent Publisher?

I just reviewed the codebase for each of the webmention plugins out there and it appears that a webmention is just like a pingback except that it has a comment type of webmention (as opposed to something like pingback or reply). Also, it seems that avatars are expected to be supported, so that would mean outputting webmentions one-per-line would make the most sense as well.

[dshanske]

Basically it is an updated pingback. The protocol doesn't matter. If it detects it is a reply, it changes type to comment. But the type is stored in comment meta.

[chrisaldrich]

Another good option @raamdev is if you've got the minimal set of plugins for webmention (https://wordpress.org/plugins/indieweb/) installed, you could crosspost/POSSE to Twitter, FB, G+, et al, and we could create a variety of webmentions, comments, pingbacks, and trackbacks to your particular post.

I will note that the majority of comments.php files for most standard themes seem to output webmentions naturally without any tinkering. I haven't been able to discern what you've customized/changed in yours that prevents them from outputting.

[raamdev]

@chrisaldrich writes...

I haven't been able to discern what you've customized/changed in yours that prevents them from outputting.

That has to do with the fact that I'm separating comments from pings/trackpacks in Independent Publisher, which most themes don't do (the pings/trackpacks just show up interspersed with comments, in the order they were received, which I've always found very displeasing).

As part of that separation of pings/trackbacks from comments, I specifically say "get all comments of type comment" and then have a separate method that displays the pings/trackbacks (specifying ping as the comment type). Most themes simply don't define the type of comment they're fetching—they just fetch everything, which is why webmentions "just work" with those themes.

The style I'm using to display pings/trackbacks in this theme does not work for webmentions, so I need to create another method that pulls those and displays them underneath the comments.

[dshanske]

You can use type_in as an alternative to type ping to display pingbacks, trackbacks, and webmentions.

[raamdev]

@dshanske writes...

You can use type_in as an alternative to type ping to display pingbacks, trackbacks, and webmentions.

Thanks. I'm aware of that. :-) However, pings/trackbacks are not styled the same way webmentions will be, so they have to be separate.

I'm already clear on what needs to be changed to support webmentions. I just need to create some test webmention data so that I can test and style the output.

[raamdev]

@chrisaldrich @dshanske Commit a4bc3dd finally adds support for webmentions. I also redesigned the way pings/trackbacks show up in Independent Publisher, opting to combine those with webmentions (it seemed appropriate). I struggled with the decision of whether or not to include the avatar with each entry, but in the end decided that in the spirit of this specific theme, it felt right to exclude them.

Here's a screenshot with some test webmentions I made in my development environment:

And here's what pings/trackbacks look like on a real post:

And here are webmentions + pings/trackbacks on my local test site:

---

I'd love if you guys could test updated theme (you can grab the latest master zip of the repo and install that). I welcome any feedback.

[raamdev]

Added the number of webmentions (which includes pings and trackbacks) to the entry meta ("42 Webmentions" in the example below):

[dshanske]

I installed it on my test site. There is a second plugin, Semantic Linkbacks, which tries to find an avatar image for the webmention and display it. I have that installed. But it doesn't find it on this theme.

[raamdev]

There is a second plugin, Semantic Linkbacks, which tries to find an avatar image for the webmention and display it. I have that installed. But it doesn't find it on this theme.

As I mentioned above, I specifically excluded avatars from webmentions and ping/trackbacks, so that is to be expected.

[chrisaldrich]

I played around with it a bit tonight. In general I like the fact that the webmentions are simple/short one liners listed last with the commenter's name (linked) along with whether they like, reposted, or mentioned the article and where.

Eventually at some point for very popular articles the list can get incredibly long at which point doing either a facepile (or even a simple list) would probably be preferable. Example
Liked by: John Smith, Bob Jones, Jane Chen, Larry Sommers, Charlie Brown
Reposted by: comma separated list of names
Mentioned by: list of names (wrapped with URL pointing to the mention)

In the end, some of this type of UI will depend on the site (perhaps it's an option in the theme? for n>some integer cutoff), but as it stands, the current solution you've given @raamdev is probably workable for the larger number of potential users.

Kudos on being one of the first themes to split this type of functionality out in your comments!!

[raamdev]

@chrisaldrich writes...

Eventually at some point for very popular articles the list can get incredibly long at which point doing either a facepile (or even a simple list) would probably be preferable.

I agree that would be a lot nicer when there are a lot of webmentions, but that would require tying things closer to the Webmentions and Semantic-Linkbacks plugin, i.e., it would require writing some code that specifically analyzes the Comment Meta for each webmention and determines what type of mention it is (semantic_linkbacks_type), and then grouping like mentions together.

My feeling is that's the sort of thing that should be handled in another plugin. It could go in the theme, yes, but I need to walk a fine line between adding that sort of functionality to the theme and leaving it out for a plugin.

For now, my feeling is that, as you said, the above changes will be sufficient for the majority of users.

---

@dshanske @chrisaldrich Thank you for reviewing and providing feedback! 😄

[raamdev]

Next Release Changelog:

• Enhancement: Added support for Webmentions via the IndieWebCamp WordPress plugins. Props to @chrisaldrich, @dshanske, @raaphorst, @raumzeit77 for help and ideas. See Issues #201, #197, and #155.