Tag: PESOS

Untappd PESOS content formatting

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>

Experiment with Untappd and WordPress

Up until the discovery of the #IndieWeb #WordPress plugins, most of my syndication was done manually. #PESOS

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>[exif id="{{29831497__id}}"]</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.

IndieWeb on WordPress

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, then to WordPress.com. But it wasn't until Tuesday, 24 October 2006, 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 a choice, and WordPress and a hosting provider gave me that choice. The site has moved around a bit regarding where it's hosted. It was initially hosted on a low-cost 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, PHP, etc. (and Perl where needed) from the source. Nonetheless, 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 syndicate my content elsewhere. I want my website to be the original source of my content and have that content shared with 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. 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 IndieWebCamp and W3C proposals for indie microblogging, such as Webmention and Micropub. I just paid more attention to that recently. I started following some of the posts 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, "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 plug-in . The IndieWeb plug-in Getting Started page suggested that I install additional plug-ins. I was excited about sending and receiving comments and liked using my site. I installed the following without 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 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 plug-in 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 plug-ins 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 plug-in.

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 plug-ins sooner. When I tweet a link to a post, and someone tweets a response, the tweet is imported to my originating post. My tweet response to that tweet is also imported. That is useful and just darn cool. There are a few challenges, however.

The conversation needs to be 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 will 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 plug-in acquired information. Chris helped me work through some of these early problems.

With Bridgy, my website can discover the post and allow end users to comment on those sites as a way of replying.

POSSE and PESOS

Instagram and Flickr

For Instagram and Flickr, I had yet to find a 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 plug-in to embed Instagram and Flickr content on 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 made the mistake of removing images from Flickr only to discover that I had used the embed in a blog post. Whenever Instagram changed their terms of service to something I disagreed with, I would delete my account. I am on my third Instagram account. I have a lot of image posts on my blog with missing images.

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 would like a better result. The check-ins are poorly 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 some themes.

I 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 used the NextScripts: Social Networks Auto-Poster WordPress plug-in. I configured the SNAP plug-in to automatically publish posts from my blog to my Instagram, Flickr, Facebook, Twitter, Google+(Google Plus), Flipboard and WordPress. Publishing to Google+, Flipboard, and Instagram requires 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 a 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. I subscribed for 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 microformats 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 try to review Akismet, skipping past the hundreds of spam 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 plug-ins, 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 plug-ins 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 plug-in that seems geared towards a commercial framework, Genesis is mentioned.

I know GWG is working on improvements to the IndieWeb plug-in, but right now it's emphasized in the wiki. It just directs people to download 10 more plug-ins without doing anything. The ala carte plug-ins 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 plug-ins for Webmentions doesn't make sense.

Currently, SemPress is the only theme in the WordPress repository that is entirely microformats2 compliant. Independent Publisher has been updated to include basic microformat2 and webmention display support, but I'm not too fond of the design and how it handles image posts and some microformat entities.

The display issue was that some h-cards were displayed in HTML. It could be more 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 interest in learning enough CSS to build my own theme. However, I would be OK with using my knowledge of PHP to do some WordPress tweaking. But the IndieWeb ecosystem of plug-ins needs to work out of the box with the most 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 set the IndieAuth WordPress plug-in , the Lightroom export plug-in started throwing errors and failed to export to WordPress. Exporting to my other WordPress blogs worked fine. After enabling and disabling plug-ins, I determined 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 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, 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.