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.

A reply to Aaron Davis on setting up IndieWeb replies in WordPress

Replied to a tweet by Aaron DavisAaron Davis (Twitter)


Aaron, there are a couple of different ways to set up IndieWeb replies in WordPress (or even on other platforms like Known).

Known has a simple reply mechanism, but isn’t always good at including the original context for the reply making the individual post as stand-alone as one might like. Known includes the URL of the post it’s a reply to, but that’s about it. It’s contingent upon the user reading the reply clicking on the link to the original post to put the two together. This is pretty simple and easy when using it to reply to posts on Twitter, but isn’t always as flexible in other contexts.

One of the added values of replies in WordPress is that there’s a bit more flexibility for including a reply context to the post. You’ll note that this reply has some context at the top indicating exactly to what it is I’m replying.

Manual Replies

The first way to generically set up a reply on almost any platform that supports sending Webmentions is to write your reply and and include some simple semantic HTML along with the URL of the post you’re replying to that includes a class “u-in-reply-to” within the anchor tag like so:
<div class="h-entry">
<a class="u-in-reply-to" href="http://example.com/note123">The post you're replying to</a>
<div class="p-name p-content"> Good point! Now what is the next thing we should do?</div>
</div>

Some of this with additional information is detailed in the reply page on the IndieWeb wiki.

If you’re using WordPress, you can do this manually in the traditional content block, though you likely won’t need the div with h-entry as your theme more likely than not already includes it.

More automated replies

If you’d like a quicker method for WordPress, you can use a few simple plugins to get replies working. Generally I recommend David Shanske’s excellent and robust Post Kinds Plugin which handles both reply contexts as well as all of the required markup indicated in the manual example above. Naturally, you’ll also want to have the Webmention Plugin for WordPress installed as well so that the reply is sent via Webmention to the original post so that it can display your reply (if it chooses to–many people moderate their replies, while others simply collect them but don’t display them.)

A few weeks ago I wrote about configuring and using the Post Kinds Plugin in great detail. You should be able to follow the example there, but just choose the “reply” kind instead of the “read” example I’ve used. In the end, it will look a lot like this particular reply you’re reading right now, though in this case, I’ve manually included your original tweet in the body of my reply. A more native Post Kinds generated reply to a tweet can be seen at this example: http://boffosocko.com/2016/08/17/why-norbert-weiner/

Syndicating Elsewhere

Naturally, your next question may be how to POSSE your replies to other services like Twitter. For that, there’s a handful of methods/plugins, though often I suggest doing things manually a few times to familiarize yourself with the process of what’s happening. Then you can experiment around with one or more of the methods/plugins. In general the easier the plugin is to set up (example: JetPack), the less control you have over how it looks while the more complicated it is (example: SNAP), the more control you have over how the output looks.

Experiment

If you’d like, feel free to experiment sending replies back to this post while you try things out. If you need additional help, do join one or more of us in the IndieWeb chat.