Adding Simple Twitter Response Buttons to WordPress Posts

Simple Twitter UI buttons on an IndieWeb-enabled site can allow Twitter to become part of your commenting system.

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.

Syndicated copies to:

Using Facepiles in Comments for WordPress with Webmentions and Semantic Linkbacks

An update to an IndieWeb WordPress plugin now facilitates more streamlined conversations and interactions online

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.
​​​

Syndicated copies to:

An Introduction to the IndieWeb

There's a better way to own and control your online identity

Why IndieWeb?

Whether you’re starting a blog, building your personal brand, posting a resume, promoting a hobby, writing a personal journal, creating an online commonplace book, sharing photos or content with friends, family, or colleagues, writing reviews, sharing recipes, podcasting, or any one of the thousand other things people do online it all starts with having a presence and an identity online.

The seemingly difficult task these days is deciding where that should be. There’s Twitter for sharing short updates and bookmarks to articles; Instagram, Snapchat, Flickr, and YouTube for photos and videos; Facebook for communicating with family and friends; LinkedIn for work and career related posts; Swarm for sharing your location; and literally thousands of others for nearly every micro-slice of content one could think of.

Can you possibly be on them all? Should you? Would you want to be? Could you keep up with it? Which one really and truly represents the real you? Could any of them?

And what about your friends, family, and potential audience for all of these things? Some will be on Twitter while others only use Facebook. Grandma is worried about privacy and is only on Instagram to see photos of the grandchildren. Mom is on Facebook because she thinks that’s what the internet is, and wants to like everything her children post. Teenagers don’t want to be on any platforms their parents have heard of. It’s obvious that everyone has their own preferences and favorites.

In short, the web and using it for easy communication has become fraught with fragmentation and walls that often make communicating online far more difficult than it should be. Wouldn’t it be better if you had a single website that represented you online and through which you could easily communicate with everyone?

By analogy consider the telephone system which, just like the internet, consists of wires and hardware to access the network. Every user on the network has their own phone and phone number. What would it be like if AT&T users could only speak to other AT&T users and needed another separate phone, account, and phone number to speak to friends and family on Verizon and yet another to talk to friends on Sprint? To a great extent, this is what the internet has evolved to become with monopolistic, for-profit, corporate services like Facebook/Instagram, Twitter, LinkedIn, and all the rest.

Is there a better and more robust solution than these multitudes of social media sites which all come with their own onerous terms of service, limitations on your creativity, reach, ownership, and control of your online identity?

A growing number of people on the web are sure there is and they’re working together in an open yet coordinated way to improve the democratized nature of the decentralized internet. This movement is known as the IndieWeb.

Purpose of IndieWeb

The purpose of the IndieWeb movement is to help put you in control of your web presence, allow you a more true sense of ownership of your content, and to allow you to be better connected to your friends, family, colleagues, and communities. By first owning your own domain name and having your own personal website, the IndieWeb aims to help facilitate the following:

You are in Control

You can post anything you want, in any format you want, with no one monitoring you. In addition, you share simple readable links such as http://www.example.com/ideas. These links are permanent and will always work.

Control and Freedom

You should be able to exercise your freedom of speech and publish anything you want whenever you want. You should be able to set your own rules and own limits. You should be able to post content as long or short as you like with no pre-imposed limits or types whether it be text, photos, audio, or video. You should be able to have control over comments and protection against potential harassment, bullying, and online trolls.

Identity & Identity loss

Almost every social media site has a multi-page statement of their terms of service written in complicated legalese. More often that not, these terms are to protect them and not you. As a result people have found their accounts frozen, they’ve been shut out with no notice or warning, their identities have been reassigned, or their content simply disappears with liitle or even no notice. Often there is either no method of recourse, or it is difficult to communicate with these corporations and may take weeks or worse to recover one’s account and data, if at all.

Without care, one can become branded with the identity of the social media network of which they’re a part. If trolls overrun your social service then suddenly by association, you’ve become one too.

User Interface/User EXperience

You should have the ability to control how your site looks and works. Do you want a piece of functionality that one of your social network sites doesn’t have? Add it the way you want it. Create better navigation, better interactivity, better design to reflect your own identity instead of a corporation’s cookie-cutter idea of your identity. Since your data is yours you can add new and interesting pieces of functionality using that data instead of waiting on a social site to think about it and implement it for you. Chances are that unless millions will find it valuable or a company doesn’t think it will scale, most won’t build it, so don’t hold your breath.

Your content is yours

When you post something on the web, it should belong to you, not a corporation. Too many companies have gone out of business and lost all of their users’ data. By joining the IndieWeb, your content stays yours and in your control.

Greater reliability and protection against content loss

Social media is only about 11 years old, and one thing is certainly true: sites will go out of business, they will get acquired, they can and will disappear. When this happens, your data can disappear overnight without the ability to back it up or export it. A new corporation can take over and change the terms of service and do things with your data that you never intended. Content can accidentally or even willfully disappear without notice to you. In addition to the data, you can also lose contact with family, friends, and community members that also disappear without the service that connected you to them.

You can have greater control of site downtimes, server outages, maintenance, scalability issues, and database failures of silos attempting to solve massive scaling/engineering problems.

A better sense of ownership

Many in the IndieWeb community have found that they post more interesting and thoughtful pieces of content when they’re doing it on their own site rather than the “throw away” content they used to post to sites like Twitter. They feel a greater sense of responsibility and ownership in what they’re posting about and this can have a profound effect on the future of the internet and its level of civility.

Author centric

When you own your own website, other web sites see that it’s you personally sending traffic to their sites instead of a generic social site. You have the ability to edit content at any time or delete it if you like.

You also have:

  • greater choice of public vs. private posts and control of who your audience is;
  • the ability to fix URL links when they break or disappear;
  • no outside advertising on your site without your explicit permission;
  • no one monetizing you;
  • no censorship of your content;
  • no terms of service which can often co-op your work without notice for advertising or other use;
  • ownership and control of affiliate links to monetize your work if you choose.

 You are better connected

Your articles and status messages can go to all services, not just one, allowing you to engage with everyone regardless of their choice of platform. Even replies and likes on other services can come back to your site so they’re all in one place.

Since your content isn’t hidden behind the robots.txt of a silo service, you have much better search engine rankings and are more likely to be found, read, or have people interact with your content. If you choose, you can still syndicate your content to one or more social silos while still owning your content in the case that something happens to those silos. This allows you to continue to reach your friends, family, colleagues, and community who may have different ideas about where they prefer to interact online. Comments to and interactions with your content can come back to your original post to create a comprehensive conversation rather than have your conversation disjointed and spread over dozens of sites throughout the web.

How to be a part of the IndieWeb

Now that you’ve got a bit of an idea about what the IndieWeb movement is attempting to help people accomplish, how can you become a part of it and enjoy the benefits for yourself?

Own and use your own domain name

Fifteen or more years ago having your own domain wasn’t as easy or as inexpensive as it is now. There are hundreds and hundreds of domain registrars around the world that can register almost any domain name you can come up with for as little as 99 cents a year with the average closer to the $10-20 range depending on the name and the top level domain (.com, .org, .net, and .edu are examples of top level domains.)

For an extra $0-10 a month you can quickly purchase domain hosting so that when someone visits your fancy URL, it actually connects to a page on the internet. Whether that page is a single page of simple HTML with a line of text and a photo; a plug and play site like Wix or SquareSpace; a full blown professional open source content management system like WordPress or Drupal; a web site you build by hand using your own code; or it points to your Facebook or Twitter account page, you’ve just made a huge step toward better cementing your identity on the internet.

Once you own your own domain name, everything you post to the web will have a permalink URL which you can control. If you wish to change platforms or service providers you can relatively easily move all of your content and the permalinks along with it–much the same way you can move your cell phone number from one provider to another. People who visit your URLs will always be able to find you and your content.

Twitter account profile asking for your name, bio, location, and your personal domain name/URL online.

If nothing else, owning your own domain name will give you something useful to put into the ubiquitous field labeled “your website” that exists on literally every social media website out there. (Even they are subtly telling you that you should have your own domain name.)

Added bonus: even most inexpensive domain registrars and hosting services will give you free email for your domain so you can create a custom branded personal email address like susan@yourname.com. Even if you rely on G-mail or some other third party service for your email, it’s pretty easy to connect your own personal email address to your pre-existing account. It’ll make you look a lot more professional and will be far easier for your friends, family, and business colleagues to remember.

So you own your domain now?! Congratulations, you are officially a full-fledged member of the IndieWeb!

Own your data

Wait, it can’t be that simple can it? It is! But now that you’ve got your own website, it’s time to start using it to own your online identity and own your own content.

Next you may want to choose a content management system (CMS) in which to store and present your data. The IndieWeb has lists of projects which range from common services as simple as Tumblr and WordPress.com (both managed services with free hosting) to help in building your own site from the ground up in your programming language of choice. Which project you choose depends on your needs, desires for the future, and your abilities. There is something available for people of nearly every level of ability. Most domain registrars and internet host providers provide one or more means to quickly get up and running–just ask their customer service departments or see what they’ve got available online.

Most of these CMS solutions will give people a far bigger range of flexibility in terms of what they can write, record, and broadcast online. You don’t need to be limited to 140 characters if you choose not to be. Want to post more multi-media-based content with text, video, audio, and photos all at once? The online world can be your oyster and your social media platform no longer limits what is possible.

Further Steps

Ideally, what a lot of the IndieWeb developer community is rapidly building and iterating upon is an open and broadly distributeable way to make it easier for the everyday person to more easily own and operate all the functionality offered by the hundreds of social media websites without a lot of heavy and difficult-to-maintain overhead. A decade ago allowing Facebook to do everything for you may have been a simple “way out”, but now there are far more robust, diverse, and flexible solutions that aren’t as onerous. There are also newer open and easily supportable web protocols that make publishing and sharing your content far easier than before.

The first big piece most people enjoy implementing is writing their own content on their own site and syndicating it out to other services on the internet if they choose. Continuing to participate in your old siloed networks can help you stay connected to your pre-existing social networks, so you’re not leaving all your friends and family behind. Next, having all your replies/comments, likes, and other interactions come back from social silos to your own site as comments along with notifications is incredibly valuable. (These two processes are commonly known as Post On your Own Site, Syndicate Elsewhere (POSSE) and backfeed, and they can typically be done most easily with a free service like Brid.gy.)

Being able to write replies to articles or status updates on your own website and either @mentioning others as a means of notifying them is also very useful. The IndieWeb calls this universal implementation of @mentions that work across website boundaries Webmention and it’s built on an open and straightforward standard so that it can work with any website on the internet. (Remember the telephone analogy above? Now, thanks to Webmentions, everyone can be communicating on the same network.) As an example, imagine for a moment if you could @mention someone on Facebook from Twitter or vice-versa?! What if you could post a reply to a tweet on Twitter with your Facebook account?Using the Webmention spec, independent websites can easily do this now, though it may be quite a while before for-profit corporations support this simple protocol that is now a W3C recommendation.

With some of the basic building blocks out of the way, people tend to spread out a bit in the types of functionalities they’re looking for.  It may range from posting status updatespictures, or video to hosting your own podcast or  or having different user interfaces to post to your own site–Micropub is great for this–to being able to put events on your site and allowing people to RSVP to them easily. Wouldn’t it be nice if you could post an event on your own website and people could use Facebook to RSVP to it? My site allows this possibility. Yours could too.

Everyone’s desires and needs will be different. Work on what you find most interesting and useful first (the IndieWeb calls these itches). Make a list of what you use most often on your old social media silos or wish they had and work on that first. Check out the IndieWeb wiki to see how others have implemented it–there’s no need to reinvent the wheel in darkness. Hop into the IndieWeb chat (there are multiple ways of doing this and interacting) and ask questions. Document what you’ve done in the wiki to make it easier for those who come after you.

Personally, I’ve always just thought about what functions do I use most on social sites and then ask myself how I might be able to do that on my own site. There’s little out there that hasn’t been explored by the bigger community, so searching the wiki for those types of functionality and seeing how others managed it usually makes it far easier. Chatting with folks in the community while I’m working always helps to sharpen my thinking and make me aware of ideas and methods I may have never considered much less come up with on my own.

If you never RSVP for things online or host events, then obviously don’t start there. Do you post photos regularly? Maybe you “like” everything you see online. In my case, I was a heavy user of Goodreads, so I spent parts of the last year working on more easily bookmarking things I’d like to read, posting reading status updates, and keeping notes on what I read, as well as highlights, marginalia, and book reviews after I’d finished reading.

Guiding Philosophy

The IndieWeb effort is different in several ways from previous efforts and communities. In particular it values principles over project-centrism. Other efforts have assumed a monoculture of one project as the ultimate solution for everyone. IndieWeb prefers developing a plurality of projects–why not have the same diversity on the web as we do in real life?

The community prefers chat in combination with a wiki to communicate and document its process. Some may prefer email distribution lists, but why? Who likes to read and respond to long email threads where information is typically locked away from the group, ignored, and simply unread? Instead, we utilize a chat (which has multiple methods of access–plurality, remember?) to host searchable conversations after which the best portions are documented on the wiki to be easily searchable and discoverable to all.

In the early days of social media, many talked, emailed and chatted about what they’d like to see. Sadly not much was done about expanding on these ideas, particularly by companies that all had their own profit-driven motives. As a result, the IndieWeb movement values showing before telling. They prioritize development by encouraging people to scratch their own itches, creating what they want to have and use on their own sites, and then iterating on those pieces to improve and refine them. If you won’t use a feature on your own site, why bother to have it?

IndieWeb puts design first and foremost. Protocols & formats come second. They’d prefer to focus on good user experience and user interaction. Users selfdogfood prototypes on their own sites to create minimum necessary formats & protocols.

Perhaps most importantly, the IndieWeb is people-focused instead of project-focused. The community is rich and diverse and has regular in-person meetups as well as camps across the world where everyone is welcome. The IndieWeb community is inclusive and has a code-of-conduct.

Join the IndieWeb Community

Where do I go from here? You said community in there. Where can I find it? How can I interact, get help, or even contribute back?

Regardless of your level of expertise, there are a huge number of resources, events, and even people available to you in a variety of formats. Whether you choose to meet with friends in person at IndieWebCamps or at regularly scheduled Homebrew Website Club meetups or interact online at a nearly continuous worldwide chat (using either web chat, Slack, Matrix, or IRC) there are many means of getting help and interacting to suit your schedule and needs to help build the personal website you’ve always wanted.

Building the indie web is a continuous process. While attending an IndieWebCamp can be an incredibly inspiring and encouraging event, we need to carry on doing so for more than just a few days a year when we can meet up in real life. We can not only support one another; we can share the best way to do things online. As we discover new ways of doing things, we can document them and share them easily with each other and the growing community.

If you’ve made it this far, I invite you to join us, and get started building the internet you’ve always wanted by building your home on the web first.


Editor’s Note:
As of December 2017, the AltPlatform.org site which originally published this article has shut down. I’ve smartly kept a private archived copy of the original of this post here on my personal site and manually syndicated a copy of it to AltPlatform for just such a possibility. (Hooray for PASTA (Publish Anywhere, Save to (Private) Archive)!) As a result of the shutdown, I’m making the original public here.

If you wish, you can also read a copy of the original as it appeared on AltPlatform on the Internet Archive.

Syndicated copies to:

👓 Signl.fm on making a social media interface for Podcasts. | Matter

Signl.fm on making a social media interface for Podcasts by Kim Hansen (Matter)
An overview of the history of Signl.fm and some of the experiments they've been doing in podcasting, audio, and social.

Continue reading “👓 Signl.fm on making a social media interface for Podcasts. | Matter”

Syndicated copies to:

Tweetstorms, Journalism, and Noter Live: A Modest Proposal

Tweetstorms and Journalism

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


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

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

Technical problems for tweetstorms

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

Noter Live–the solution!

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

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

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

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

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

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

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

References

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

Weird Flickr URL Trick

Weird Flickr URL Trick (CogDogBlog)
I present to you a URL oddity of no significant value. Impress and amaze your friends. And it happened pretty much because of a typo. Ok, here is a URL for one of my recent photos (I kind of like i…
I present to you a URL oddity of no significant value. Impress and amaze your friends.

And it happened pretty much because of a typo.

Ok, here is a URL for one of my recent photos (I kind of like it) (shameless self promotion):

https://www.flickr.com/photos/cogdog/32331643261/

It’s a normal, current flickr page:

Now… add an extraneous extra slash at the end of the same URL:

https://www.flickr.com/photos/cogdog/32331643261//

Woah, it’s the previous flickr design layout!

Note: Logic might assume I could keep slashing back in time to the original white small square design, but alas no.

What use is this? Dunno.

But it is curious. And quirky.

That’s my kind of internet.


Squirtmobile Stunts – 42 flickr photo by rbatina shared under a Creative Commons (BY-NC-ND) license

The post “Weird Flickr URL Trick” was originally thawed from a previous ice age and melted at CogDogBlog (http://cogdogblog.com/2017/01/weird-flickr-trick/) on January 23, 2017.

Source: Weird Flickr URL Trick

Resilient Web Design

Resilient Web Design (resilientwebdesign.com)
The World Wide Web has been around for long enough now that we can begin to evaluate the twists and turns of its evolution. I wrote this book to highlight some of the approaches to web design that have proven to be resilient. I didn’t do this purely out of historical interest (although I am fascinated by the already rich history of our young industry). In learning from the past, I believe we can better prepare for the future.

You won’t find any code in here to help you build better websites. But you will find ideas and approaches. Ideas are more resilient than code. I’ve tried to combine the most resilient ideas from the history of web design into an approach for building the websites of the future.

I hope you will join me in building a web that lasts; a web that’s resilient.
Syndicated copies to:

👓 Chris Aldrich is reading “How to Declutter Your WordPress Administrator Interface”

How to Declutter Your WordPress Administrator Interface by Arnaud Broes (WordPress Plugins)(2016 years 10 months 14 days 4 hours 19 minutes 16 seconds)
The WordPress admin interface is complex and jam-packed with exciting options, which is great for experienced users. But what if you're just starting out?

Meh… not as interesting or detailed as I would have expected from the title.

Syndicated copies to:

Give your web presence a more personal identity

Photos on WordPress with Gravatar

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

but

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

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

Which would you prefer?

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

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

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

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

Another quick example

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

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

How to fix the default avatar problem

What is Gravatar?

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

Gravatar.com

Need some additional motivation? Watch this short video:

Step 1: Get a Gravatar Account

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

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

Step 2: Add an email address

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

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

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

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

Step 4: Fill out the rest of your social profile

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

Step 5: Repeat

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

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

Step 6: Use your email address on your WordPress account

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

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

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

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

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

Administrator Caveats

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

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

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

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

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

 

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

More tips?

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

TL;DR

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

Syndicated copies to: