Troon Brewing, Fleeting Fulfillment, Beer, Glass, Teku

I made some changes to content formatting for the Zapier workflow that pulls in my Untappd check-ins/reviews to my website. My original format attempted to duplicate some of the ways that Untappd displays information on a check-in. I wasn’t satisfied with the way the content was organized and formatted, but at the time didn’t have any good ideas on what to do.

But after thinking about it this week, I have decided that the information should be displayed more like a short narrative. I had all the data elements I needed. I re-arranged them into paragraphs with links back to the major elements — brewery, venue, brewery website, beer name, etc. — available via the Untappd API.

The Orlando Brewing’s I-4 IPA review is an example of the original formatting. The Woodland Empire Ale Craft’s Empowered Hazy IPA (2018) is an example of the new formatting.

The content feels more like a regular post and less like a shopping list. The phrasing still feels a bit mechanical but I think it’s an improvement over the original formatting.

The Zap template code for the body of the post:

<p>I am in <a href="{{29756616__venue__foursquare__foursquare_url}}">{{29756616__venue__venue_name}}</a>, drinking <a href="https://untappd.com/b/{{29756616__beer__beer_slug}}/{{29756616__beer__bid}}" rel="nofollow">{{29756616__beer__beer_name}}</a> by <a href="https://untappd.com/w/{{29756616__beer__brewery__brewery_slug}}/{{29756616__beer__brewery__brewery_id}}" rel="nofollow">{{29756616__brewery__brewery_name}}</a>.  <a href="{{29756616__beer__brewery__contact__url}}"> {{29756616__brewery__brewery_name}}</a> is a {{29756616__beer__brewery__brewery_type}} in {{29756616__beer__brewery__location__brewery_city}}, {{29756616__brewery__location__brewery_state}}. {{29756616__beer__beer_name}} style is  {{29756616__beer__beer_style}}, with an ABV of {{29756616__beer__beer_abv}}% and IBU of {{29756616__beer__beer_ibu}}. I gave {{29756616__beer__beer_name}} a {{29756616__rating_score}} on <a href="https://untappd.com/user/{{29756616__user__user_name}}/checkin/{{29756616__checkin_id}}" class="u-syndication syn-link" rel="syndication nofollow">Untappd's</a> 5 point rating system.</p>

<p>
{{29756616__checkin_comment}}</p>

<h2>Brewer's notes</h2>
<p>{{29756616__beer__beer_description}}</p>

<p> {{29756616__beer__brewery__brewery_description}}</p>

<p><link ref="https://untappd.com/user/{{29756616__user__user_name}}/checkin/{{29756616__checkin_id}}" class="u-syndication syn-link" rel="syndication nofollow">
</p>

Zapier, Screen

I try to follow the tenets of the IndieWeb movement in that I try owning all of my own data and in publishing on my own site and syndicating elsewhere (POSSE). By posting original content first on my site, and then syndicating to silos I reduce decencies on third-party services.

But I can’t always have this kind of control. I can do it on Twitter and Facebook and there is an easy way to automate pushing out links from WordPress to my content. But some services aren’t easy to use in this way.

In the last few years, I have enjoyed drinking some of the fine craft ales that are produced in the USA. I enjoy many different styles but my favourite style is the India Pale Ale (IPA). My favourite type of IPA is the New England IPA. This style of ale is cloudy and has a tropical and fruity aroma. One sip and your senses are overwhelmed with flavours of grapefruit, peach, melon, tangerine with little to no bitterness.

I started using an app, Untappd, to keep track of the ales I drink, rate and comment on them, discover new ales and new breweries, and share and connect with other craft ale fanatics, and checkin to beers and breweries. Untappd also has a gaming element, where I earn a number of cool badges for completing a variety of different criteria. It’s a fun little app.

I didn’t have a way to re-create my Untappd content on my WordPress website. Until recently I had been uploading my images and creating a post by manually copying and linking to the post on Untappd. It worked but it was a painful process. Here’s one post for the Neshaminy Creek Mango Shape of Haze to Come.

Part of the pain is self-imposed. I love photography and I love beer. Combine the two and you have beertography. I stage my shots, usually using natural light, and I post process them in Adobe Lightroom. It’s what I do. But it means that my Untappd check-in isn’t instant. And then I have to spend time creating the blog post. I wish it was more like the process I used when I used the now dead Pressgram app.

But … as I dig deeper into making my WordPress website more a part of the IndieWeb, I started to think about how I could integrate Untappd content. I looked at the Untappd API but quickly realized that POSSE would not work. But what about PESOS?

In IndieWeb lingo, PESOS is an acronym/abbreviation for Publish Elsewhere, Syndicate (to your) Own Site. The publishing workflow starts with posting to a 3rd party service such as Foursquare, then using some infrastructure backend magic an archive copy if created under on your site.

Untappd allows the syndication of check-ins to Foursquare so I tried using IFTTT to pull the Foursquare content back to WordPress. It worked. But it wasn’t what I wanted. I wanted all of the information that was siloed in Untappd — the ratings, the toasts, the badges. All of those things are lost from the Foursquare entry.

So I looked at Zapier. Zapier provides similar automation functionality to IFTTT but has more involved workflow features to control the data with actions and triggers. Zapier allows me to chain together input and output from multiple web apps. It’s like IFTTT for programmers. After a week of frustration, I finally have a working method for pulling my Untappd check-ins back to my WordPress website.

Here’s the workflow I created.

  • The Untappd Checkin action connects to Untappd and pull data from the most recent check-in.
  • The Upload Featured Image action uploads the image from the Untappd check-in data to WordPress
  • The Create Post with Featured Image actions creates a new post on WordPress and links the uploaded image to the post as a featured image.

There are few things I needed to resolve before this worked. When the Zapier action uploads the image from the check-in, it needs to give the WordPress image a unique name. I used the name of the beer and the check-in ID as a unique name for the image.

{{29756616__beer__beer_slug}}_{{29756616__checkin_id}}.jpg

The image I chose to upload from the Untappd API is {{29756616__media__items[]photo__photo_img_og}}.

When the Zapier action uploads the image it creates a temporary object with a unique identifier, {{29831497__attachment_id}}. The attachment ID is made available to the next action.

The post title is set using the name of the brewery and the beer.

{{29756616__brewery__brewery_name}}'s {{29756616__beer__beer_name}}

The main body of the post is created using the following template. I wanted to capture as much of the original Untappd checkin as I could and I also wanted to link back to the original post. The Check-in via <a href="https://untappd.com/user/{{29756616__user__user_name}}/checkin/{{29756616__checkin_id}}" class="u-syndication" rel="syndication">Untappd</a> code takes care of that.

<p>I am drinking {{29756616__beer__beer_name}} by {{29756616__brewery__brewery_name}} at  {{29756616__venue__venue_name}} {{29756616__venue__location__venue_city}}.</p>

<p>{{29756616__checkin_comment}}</p>

<p>
Name: <a href="https://untappd.com/b/{{29756616__beer__beer_slug}}/{{29756616__beer__bid}}" rel="nofollow noopener">{{29756616__beer__beer_name}}</a><br/>
Brewery: <a href="https://untappd.com/w/{{29756616__beer__brewery__brewery_slug}}/{{29756616__beer__brewery__brewery_id}}" rel="nofollow noopener">{{29756616__brewery__brewery_name}}</a><br/>
Location: {{29756616__beer__brewery__location__brewery_city}}, {{29756616__brewery__location__brewery_state}}<br/>
Style: {{29756616__beer__beer_style}}<br/>
Alcohol by volume (ABV): {{29756616__beer__beer_abv}}%<br/>
IBU: {{29756616__beer__beer_ibu}}<br/>
My rating: {{29756616__rating_score}}/5<br/>
Brewer's notes: {{29756616__beer__beer_description}}<br/>
</p>

<p><a href="https://untappd.com/user/{{29756616__user__user_name}}/checkin/{{29756616__checkin_id}}" class="u-syndication syn-link" rel="syndication nofollow noopener">Untappd</a>.</p>

<div></div>

I set the excerpt for the post to something that would work well for syndicating to twitter.

I am drinking {{29756616__beer__beer_name}} by {{29756616__brewery__brewery_name}} at  {{29756616__venue__venue_name}} {{29756616__venue__location__venue_city}}.

The date of the WordPress post is set to the same date as the Untappd check-in.

{{29756616__created_at}}

So with a bit of persistence, I have a way to get the best of both worlds. I can check-in using the native Untappd app. I will have an entry on my blog with the details of that check-in.

The title of the post was inspired by Chris Aldrich, who used the hashtag on a comment to one of my posts.

Montgomery Township, New Jersey, United States of America
 

some rights reserved, flag, united states flag

I have had a web presence since about 2001. Initially, I set up a blog using Radio Userland but quickly abandoned that when Google launched Blogger. I then jumped to Tumblr then back to Blogger. But it wasn’t until 2005 that I finally registered a domain, islandinthenet.com, and started hosting my online presence, my “house”, on WordPress.

The reasons were many but mainly I wanted to control all the various aspects of my “house”. I wanted to choose where it was constructed. I wanted to choose what materials were used to build it. I wanted to choose the paint on the walls and the furniture etc.

On Tumblr and Blogger, I was limited to what the landlord allowed me to use. On those platforms, I get to choose the address but little else. I wanted choice and WordPress and a hosting provider gave me that choice. The site has moved around a bit in terms of where it’s hosted. It was originally hosted on a cheaply shared hosting provider but a few years ago I switched to a virtual private server ( I wanted more control ). Back in the day, when I had much free time, I compiled my instance of Apache, and PHP, etc. (and Perl where needed) from source but since my family became a priority, I’ve just settled on securely configuring and securing the default builds provided with the VPS.

I have always wanted to post first on my own site and syndicated my content elsewhere. I want my website to be the original source of my content and have that content shared to third-party sites like Google+, Facebook, Twitter, Instagram, and Flickr with a link back to the source. But I didn’t know how. Unless the launch of JetPack I manually posted links to Twitter, Facebook, Linkedin, and Google+. JetPack saved me from the manual effort of posting links to social media silos. However, JetPack couldn’t post to Instagram or Flickr.

Up until recently I just went about doing my thing. Then recently I discovered the IndieWeb via a Kickstarter project.

Micro.blog and IndieWeb

Last year I backed Manton Reece’s micro.blog project on Kickstarter. Something about the project’s goal resonated with me.

Do you remember how the web used to work? How was the web supposed to work?

In the earlier days of the web, we always published to our own website. If you weren’t happy with your web host, or they went out of business, you could move your files and your domain name, and nothing would break.

Today, most writing instead goes into a small number of centralized social networking sites, where you can’t move your content, advertisements and fake news are everywhere, and if one of these sites fails, your content disappears from the internet. Too many sites have gone away and taken our posts and photos with them.

I want to encourage more independent writing. To do that, we need better tools that embrace microblogs and the advantages of the open web. We need to learn from the success and user experience of social networking but applied to the full scope of the web.

Micro.blog Kickstarter project page mentioned something about IndieWebCamp and W3C proposals for indie microblogging, such as Webmention and Micropub but I didn’t pay much attention to that until recently. I started following some of the post on micro.blog and stumbled onto a post by Chris Aldrich that had me reading a lot of Chris’s post on the IndieWeb one of which linked back to a introduction to the IndieWeb on AltPlatform. After reading that post I visited the IndieWeb wiki and went down a rabbit hole of information. As I read, I kept nodding my head, “Yes, we need this. I have to do this.“

Setup

I started where it made sense to start. On the Getting Started on WordPress page. I was well established for an out of the box WordPress setup. I read the section about microformats and themes and about IndieMark and installed the IndieWeb plugin. The IndieWeb plugin Getting Started page suggested that I install additional plugins. I was excited about the prospect of sending and receive comments and likes using my own site. I installed the following without quite understanding how they worked but they were listed as required.

  • Webmention (Required) – allows you to send and receive by adding webmention support to WordPress. Mentions show up as comments on your site.
  • Semantic Linkbacks (Required) – makes IndieWeb comments and mentions look better on your site.
  • Post Kinds – Allows you to reply/like/RSVP etc to another site from your own, by adding support for kinds of posts to WordPress.
  • Bridgy

Sending and Receiving responses

It took me a few weeks of experimentation to understand that I could post a response to someone else’s blog post by writing a post on my own website, and then linking the the response back to their post by either posting a link to my response into the Webmention comment field on the other person website, or using Webmention plugin to do that for me when I write my response. My WordPress site already used the built-in pingback and trackbacks but the Webmention and Semantic Linkbacks plugins bring this to a new level.

  • Bridgy Publish – Adds a user interface for using Bridgy to publish to other sites
  • Syndication Links – Adds fields to a post to allow manual entry of syndication links as well as automatically from a supported syndication plugin.

The first time I saw the result of the combination of Webmentions, Semantic Linkbacks, Bridgy and Post Kinds I was hooked. I wish I had discovered these plugins sooner. When I tweet out a link to a post and someone tweets a response to that post, the tweet is imported to my originating post. My tweet response to that tweet is also imported. I find that useful and just darn cool. There are a few challenges, however.

The conversation is not threaded and sometimes tweets are duplicated. Using Webmentions also means disabling the Jetpack Comments system I had been using on my blog. I suspect this is going to create a problem for people who are used to leaving comments on my blog using their WordPress.com, Google+, Twitter and Facebook profiles. The other problem I ran into was that certain characters broke the way that the Semantic Linkbacks plugin acquired information. Chris helped me work through some of these early problems.

With Bridgy my website is able to discover the post as well as for end users to comment on those sites as a way of replying.

POSSE and PESOS

Instagram and Flickr

For Instagram and Flickr I had no solution. I have been posting content on Flickr and Instagram independently of what was posted on my site. At one point I started using a plugin to embed Instagram and Flickr content to my site. But I eventually abandoned that. Posting on Instagram or Flickr first and then embedding into my site made my site dependent on those services. I have made the mistake of removing images from Flickr only to find out that I had used the embed in a blog post. Each time Instagram changed their terms of service to something with which I disagreed, I would delete my account. I am on my third Instagram account. I have a lot of image posts with missing content.

I set up Ownyourgram and OwnYourCheckin to push my Instagram posts and FourSquare check-ins back to my website. The idea was to use the Instagram and Foursquare apps as mobile publishing clients for my website. It works but I am not happy with the result. The check-ins are badly formatted and the image size is too small for the design of my blog (width of 1200px) and the URL slugs were ugly: e.g.

https://islandinthenet.com/33409-2/

. Foursquare images are 584 x 274. That looks fine in Independent Publisher but looks like shit on wider themes.

I also sometimes get weird and random errors from OwnYourCheckin and OwnYourGram has been pushing old posts back to my website. I have disabled both services.

Instead, I opted to use the NextScripts: Social Networks Auto-Poster WordPress plugin. I configured the SNAP plugin to automatically publishes posts from my blog to my Instagram, Flickr, Facebook, Twitter, Google+(Google Plus), Flipboard and WordPress. Publishing to Google+, Flipboard and Instagram require a paid subscription to an API service. That’s a potential downside but for now, it works and works well. When I write a new post a nicely formatted announcement with backlink is published to all my configured social networks. I configured a filter so that only image posts are sent to 500px, Flickr and Instagram. Honestly, I subscribed to the ability to post to Instagram.

One unexpected benefit is that SNAP auto-imports comments and replies from Facebook and Twitter as WordPress Comments.

Error
Undefined property: stdClass::$checkins

Microformats

The wiki suggested that setting up micro formats would help so I installed David Shanske’s WordPress microformats2 plug-in to add o markup structured information into my sites HTML.

Early Problems

I reached out to Chris Aldrich for help and also to test some of the new functionality of my website. Most of Chris’s responses/webmentions went to spam. I have used Akismet for years and it has reliably blocked all spam while allowing legitimate comments. I do not want to put in the effort to review Akismet, skipping past the hundreds of spam just to clear webmentions.

Themes

I had some problems that I might have expected had I first read this bit of text by Michael Bishop.

The gist of my observation in setting up WP is that the lack of mf2 and emphasis on theme supporting them. I approached setting WP up as a new user, and what my goal would be, POSSE to a silo (Twitter) probably would be the 1st step. Installed the webmention plugins, set up bridgy, and it failed due to lack of mf2 support(latest WP theme, 2016). If I wasn’t already familiar with these steps, it would be discouraging, and some (most?) might delete the plugins and move on, not knowing why it didn’t post to Twitter. The failure was fairly silent without reading the raw JSON on bridgy.

Currently, the theme section is way down the page and doesn’t emphasise the importance of mf2. Only one theme is linked, along with a plugin that seems geared towards a commercial framework, Genesis is mentioned.

I know GWG is working on improvements to the IndieWeb plugin, but right now it’s emphasized in the wiki. It just directs people to download 10 more plugins, without doing anything. The ala carte plugins might be great for a seasoned user who wants choices to build IndieWeb into their existing site, but for someone just setting up WP, it’s overwhelming. 2 plugins for Webmentions doesn’t make sense.

Currently, SemPress is the only theme in the WordPress repository that is fully microformats2 compliant. Independent Publisher has been updated to include basic microformats2 and webmention display support but I don’t like the design and how it handles image posts and some microformat entities.

The display issue was that some h-cards displayed in HTML. Hardly conducive to the polished look I want for my website. SemPress doesn’t work for needs. I want my featured images displayed large along with the remainder of my post images. Independent Publisher is a beginner theme at best. I have only a passing interested in learning enough CSS to build my own theme. However, I wouldn’t mind using my knowledge of PHP to do some WordPress tweaking. But the IndieWeb ecosystem of plugins needs to work out of the box with the majority of popular WordPress themes. Not just two.

IndieAuth

I ran into an issue using IndieAuth. I have been using an Adobe Lightroom plug-in from Automattic to export images directly from Lightroom to this self-hosted WordPress blog. It worked flawlessly up until recently. Shortly after I installed and setup the IndieAuth WordPress plugin, the Lightroom export plugin started throwing errors and failed to export to WordPress. Exporting to my other WordPress blogs worked fine. After enabling and disabling plugins I determined that the issue was with the IndieAuth plug-in. That made sense because that was the latest WordPress plug-in I installed and enabled. When I disabled the IndieAuth WordPress plug-in, the Lightroom plug-in exported images without issues. I don’t see anything in the apache error logs. I would really like to use IndieAuth. What can I do to troubleshoot this?

Next Steps

I also want to post my Untappd check-ins first to my site — image, text, location, rating, etc. — and have my site create the Untappd entries along with images and other relevant information.

Syndication

  • Syndicating content to Mastodon, an alternative to Twitter.

Mastodon is a free, open-sourced messaging platform that’s decentralized in the extreme (more on that later) and, since it lacks an SMS heritage, does not have a 140-character limit — 500 characters are just fine. It also offers public accounts, lots of post-level privacy controls and fully chronological timelines.