Replied to Show conditional Twitter intents with Eleventy by Sia KaramalegosSia Karamalegos (sia.codes)
Encourage users to retweet or share a post based on whether a Tweet already exists for your blog post.

This reminds me that I had done a portion of this sort of work for my site a while back as a proof of concept and particularly with relation to Threaded conversations between WordPress and Twitter. I had meant to finish the sketch and turn it into a WordPress plugin or possibly roll it up into the Syndication Links plugin. Perhaps that makes sense as I’m already using it to show where I’ve syndicated copies of my content and it will contain the appropriate tweet ID data. Similar UI could be added for content sent to Flickr, Instagram, and Mastodon presuming the provide similar actions. Perhaps this will be a mini project I can circle back around to during the pending holidays?

I love how Sia has implemented it on her static Eleventy site where she’s kept the UI nice and clean. I particularly like the way she’s done the design and layout and made it more like a call to action.

Sia's Twitter call to action showing a Twitter blue bird icon with the text "Join the conversation on Twitter. Or, if you liked this article and think others should read it, please retweet it."

To take the Twitter actions a half-step further, she could URL wrap the word “liked” with the like action on Twitter.

In general, this reminds me a lot of the idea of webactions, though I don’t think that many have been experimenting with them as of late. Perhaps it’s because of the growth of Microsub-based feed readers that have built-in Micropub support?

Hat-tip:

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.