Adding Simple Twitter Response Buttons to WordPress Posts

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

Web Actions

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

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

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

Example

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

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

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

Displaying responses

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

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

Future Improvements

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

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

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

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

Try it yourself

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

Published by

Chris Aldrich

I'm a biomedical and electrical engineer with interests in information theory, complexity, evolution, genetics, signal processing, IndieWeb, theoretical mathematics, and big history. I'm also a talent manager-producer-publisher in the entertainment industry with expertise in representation, distribution, finance, production, content delivery, and new media.

57 thoughts on “Adding Simple Twitter Response Buttons to WordPress Posts”

  1. I’m writing this reply from my own site while I wait for my Twitter client to update and reload everything. One more advantage to the Indieweb. Anyway, I think having functionality like this inside either the Post Kinds or Bridgy Publish plugins would be great, and possibly have the advantage of wider user adoption. Press This is a feature that’s been removed from current WordPress Core and separated out into a plugin, due to the general lack of bookmarklet use. I happen to be a fan of WordPress’s post formats feature, but am now wishing they would just incorporate microformats 2 so that they conform to indieweb post kinds where possible. I think WordPress should possibly keep the “Aside” format as a longer form of status, or that there should be an indieweb equivalent of this.

    Might help if I include the correct microformats 2 markup. 🙂 It occurred to me after I wrote my original reply that there’s also a webactions plugin for WordPress that these could be added to, along with other webactions. I haven’t played with this plugin a lot, although I do have it installed on my sites. I should dig into this.

    1. Amanda, I suspect for you I may be preaching to the choir, but for the benefit of others who are following along… Many WordPress themes have both an “Aside” and “Status” post format available. In my experience, few if any, WordPress themes ever did much differentiation between an aside and a status. As a result I typically view them as the same for all intents and purposes. In fact, other than Matt’s blog, I don’t think I’ve run across another aside in the wild in the past year. I once added microformats to my theme’s handling of post formats, but doing that will only get you so far–I quickly realized why David Shanske essentially started from scratch. I think that the Post Kinds Plugin does a much better job of differentiating the types of posts one would/could want to make, so I now rely on that for most of my content. It also has the benefit of being more extensible than post formats have been.

      More often than not it always seems when I hear about Post Formats, it’s a mention that they’re eventually going away and may not be supported in the future. It always felt to me that they were thrown into core just to compete with Tumblr. Instead of building on them and continuing to innovate, WordPress has left them to rot on the vine. If they had kept up with them, I suspect they’d have something much more akin to what the Post Kinds Plugin is now. (And if they added webmentions, they’d now be stealing serious market share from Twitter and Facebook.)

      Like you, my fervent wish is that WordPress core supported all of the more modern Microformats version 2 vocabulary instead of relying on themes to implement them (often improperly). As an aside (pun intended!), I’ll also add my regular public service reminder/admonishment to those who write CSS to never target microformats classes in their themes! Microformats are there for semantic use only and not for CSS or other use!

      1. Chris, One of the things I like about post formats is how easy it is to create template parts for them in most themes, (I’m excluding theme frameworks here, Genesis, for example). I haven’t had time to dig into this but I’d like to explore creating templates or template parts for post kinds. Another thing I’d like to do is to have a separate UI for each kind. So, for example, under posts, (and let’s just change this to “content”), you could have “Add new article”, which is a screen with appropriate meta boxes, then “Add new note” (same kind of screen, except we now need to look at Gutenberg and maybe just make these blocks instead of full-on edit screens with meta boxes of their own), and for each “add new” we’d also have “All articles” “All notes” ETC. Having separate UIs for each kind would mean that, if you’re working with your content on mobile, you could load a very simple screen with some edit fields or checkboxes for each type, instead of having to type content, then scroll down and choose a post kind, then fill in post properties, ETC, and so you’d have a more streamlined posting experience. There are supposed to be accessibility improvements coming to the micro.blog app, and once those happen, I should be able to use that with VoiceOver to simply post to my site without a cluttered interface. I’m also looking at Quill, but I believe it’s written in either Ruby or Python, so submitting pull requests to fix accessibility issues with its UI will be a trial-and-error process, with a local copy installed for me to back up and then break while I dive deeper into its code.

  2. Twitter Response Buttons

    Syndicated copies:

  3. Chris is the expectation that the person visiting the website wants to leave a comment and once clicking the link to reply via Twitter that the entire conversation moves to Twitter?

    Syndicated copies:

    1. Khürt, The expectation is certainly not that the entire conversation moves to Twitter.

      I’m doing this mostly to smooth the transition for the next generations of users who are still heavily reliant on Twitter and other social silos. In some sense, by seeing what is capable on my site, they may realize that it’s not quite as hard to own their own data and online conversations on their own sites. I’m doing it so that those who don’t have their own sites yet, can more easily be a part of the conversation. If they choose to participate via Twitter, why shouldn’t that be an option? I don’t feel like I need to dictate how others use the internet, but I can still enjoy using it and interacting on it in a way that feels far more natural to me. (As an example, I often notice that you use multiple modalities to interact with my site: sometimes you reply directly from yours with webmention; sometimes you use the native WordPress comment box; sometimes you use Twitter; and sometimes you use more than one of these! And honestly, why shouldn’t you be able to choose what’s most comfortable or expedient for you?)

      Allowing a part of the conversation to originate from Twitter also allows the easier flow of ideas for those who are following them via that network. This isn’t much different than if everyone were actually using their own website to carry on the conversation, it’s only the mechanism that has changed slightly. They could also manually log in on my site to leave a reply almost as easily, but perhaps they don’t want to take the extra steps? Perhaps they don’t want to give out their email address? Or perhaps they want that added network effect that Twitter allows them?

      For the most part I’m trying to lower the barrier to participate in the conversation, and doing so wasn’t very difficult on my part.

      While their small portion of the conversation may live on Twitter (this is probably better semantically than saying it “moved to Twitter”), through backfeed via webmention, all of the conversation is still staying on my own website. There’s a mirrored copy of it in both places to some extent. I suspect that many will see the limiting nature of Twitter and that they’re potentially missing out on flexibility as well as the rest of the conversation that does live on my own site. As a case in point, I’m posting this reply into the thread and syndicating the reply to Twitter where I know you’ll see it within the same thread you started. The conversational loop has closed for you within Twitter while also being closed on my site at the same time. The bigger difference is that I’m not limited by characters on my own site.

      Perhaps one day all sites will support webmention organically, and all of this becomes moot, but in the erstwhile doing this effectively lowers the barrier for those who don’t have their own sites while still allowing me to participate the way I want.

      Syndicated copies:

      1. Chris, the other person “…. potentially missing out on …. the rest of the conversation that does live on my own site” was what I was alluding to. I didn’t anticipate that you, as the originator of the post, closed the loop for yourself by syndicating your reply to Twitter. I’lll need to think more about how you are doing all of this so I can see how to do this for myself. Clever.

        Syndicated copies:

  4. Aixa says:

    That was so easy to implement I’m pretty new to Twitter and was wondering how it is better than the Twitter share button?

    1. I wouldn’t categorize it as better than the Twitter share button, it just provides different and additional functionality. While sharing my content is certainly nice, I’d much rather people engaged with it directly by commenting or replying.

      I think it’s a shame that far too many people have share buttons on their sites (which I find in practice aren’t very often used), instead of engagement buttons.

      Syndicated copies:

      1. It is awesome isn’t it?! It currently says there are 25 thoughts, and this count also includes the “likes”, “reposts”, and other interactions as well as the comments/replies. (The likes and reposts are facepiled at the bottom.)

        Syndicated copies:

      2. @muchospanish Instagram doesn’t have the extensive API (esp. write API) that Twitter does. Though on my site’s photo posts, I do include a syndication link to the copy on Instagram. One could click on that to comment/like, and those come back to my site the same way. 🙂

        Syndicated copies:

    1. If you’re at IndieWebCamp West this weekend, let’s talk about it and see if we can help you get it working for yourself!

      Syndicated copies:

Leave a Reply

Your email address will not be published. Required fields are marked *