--- author: email: mail@petermolnar.net image: https://petermolnar.net/favicon.jpg name: Peter Molnar url: https://petermolnar.net copies: - http://web.archive.org/web/20160709135310/https://petermolnar.eu/press-this-indieweb/ lang: en published: '2016-03-10T16:00:51+00:00' summary: I've been able to reply/like/repost with my site for a long while, but is wasn't elegant, fast or slick at all; it was time to fix it. tags: - WordPress title: Extending Press This in WordPress to support indieweb reply, like and repost --- The lazier I want to get the more code I need to write, but in the end, it always worth it. Pfefferle had pre-baked a solution already[^1] but my theme is special[^2] so I had to come up with my own solution. ## Me vs sanity For a long while I manually copy pasted URLs into an additional post meta field in my WordPress, which I called `webmention_url`. When I wanted to reply I: 1. copied the URL 2. went over to my admin area 3. opened a new post 4. copied the URL to a post meta field 5. selected webmention type from the radiobutton 6. posted the reply This was tedious, smelled redundant, and introduced a lot more work. To show the URLs I had to add it in my theme - it wasn't part of `the_content`, so it wasn't showing in the RSS or in the mail I'm sending out to some. I had to hook that post meta field into the webmention plugin and do other magic on it, which made all the things even more complicated. ## Bookmarklets To solve the copy-paste part I turned to Press This[^3] - which I used a long, long time ago, and when I wanted to use it now, it didn't work. Because Firefox[^4]. To solve it: about:config security.csp.enable => false This sacrificed some security, which I'm not proud of, but I'm tired of all the fresh things that break things we're actively using. After this I realized, I need to pass the type of the webmention - so for reply, I added `&type=reply` at the end of the bookmarklet url, which now looks like this: ``` {.javascript} javascript: (function(a, b, c, d) { function e(a, c) { if ("undefined" != typeof c) { var d = b.createElement("input"); d.name = a, d.value = c, d.type = "hidden", p.appendChild(d) } } var f, g, h, i, j, k, l, m, n, o = a.encodeURIComponent, p = b.createElement("form"), q = b.getElementsByTagName("head")[0], r = "_press_this_app", s = !0; if (d) { if (!c.match(/^https?:/)) return void(top.location.href = d); if (d += "&u=" + o(c), c.match(/^https:/) && d.match(/^http:/) && (s = !1), a.getSelection ? h = a.getSelection() + "" : b.getSelection ? h = b.getSelection() + "" : b.selection && (h = b.selection.createRange().text || ""), d += "&buster=" + (new Date).getTime(), s || (b.title && (d += "&t=" + o(b.title.substr(0, 256))), h && (d += "&s=" + o(h.substr(0, 512)))), f = a.outerWidth || b.documentElement.clientWidth || 600, g = a.outerHeight || b.documentElement.clientHeight || 700, f = 800 > f || f > 5e3 ? 600 : .7 * f, g = 800 > g || g > 3e3 ? 700 : .9 * g, !s) return void a.open(d, r, "location,resizable,scrollbars,width=" + f + ",height=" + g); i = q.getElementsByTagName("meta") || []; for (var t = 0; t < i.length && !(t > 200); t++) { var u = i[t], v = u.getAttribute("name"), w = u.getAttribute("property"), x = u.getAttribute("content"); x && (v ? e("_meta[" + v + "]", x) : w && e("_meta[" + w + "]", x)) } j = q.getElementsByTagName("link") || []; for (var y = 0; y < j.length && !(y >= 50); y++) { var z = j[y], A = z.getAttribute("rel"); ("canonical" === A || "icon" === A || "shortlink" === A) && e("_links[" + A + "]", z.getAttribute("href")) } b.body.getElementsByClassName && (k = b.body.getElementsByClassName("hfeed")[0]), k = b.getElementById("content") || k || b.body, l = k.getElementsByTagName("img") || []; for (var B = 0; B < l.length && !(B >= 100); B++) n = l[B], n.src.indexOf("avatar") > -1 || n.className.indexOf("avatar") > -1 || n.width && n.width < 256 || n.height && n.height < 128 || e("_images[]", n.src); m = b.body.getElementsByTagName("iframe") || []; for (var C = 0; C < m.length && !(C >= 50); C++) e("_embeds[]", m[C].src); b.title && e("t", b.title), h && e("s", h), p.setAttribute("method", "POST"), p.setAttribute("action", d), p.setAttribute("target", r), p.setAttribute("style", "display: none;"), a.open("about:blank", r, "location,resizable,scrollbars,width=" + f + ",height=" + g), b.body.appendChild(p), p.submit() } })(window, document, top.location.href, "https:\/\/example.com\/wp-admin\/press-this.php?v=8&type=reply"); ``` The harder part was to catch this in PHP. The initial approach of filling the post meta required the post to be saved first, which made me trying to introduce 3 additional filters to Press This[^5] - 2 of them turned out to be redundant. I used this setup for a little while, but it wasn't as good as I wanted it to. Then I came across how voxpelli[^6] is doing replies on Android: And it hit me: this is how I should be doing it! Inline, nicely integrated with my Markdown format and since I already extend the webmention/pingback URL list with the matches from the content, I wouldn't need to deal with that at all. No more special post meta which can't be accessed with the Android WordPress app either. ## The technical gore I have to give credit to again for helping creating that monster regex. ``` {.php} '> %1$s', 'link' => '', 'embed' => $relation, ); return $default_html; } ``` Presenting this is a little trickier; this is what I use: ``` {.php} __("Sorry, can't make it."), 'yes' => __("I'll be there."), 'maybe' => __("I'll do my best, but don't count on me for sure."), ); $replace = $matches[0][0]; $type = trim($matches[1][0]); $url = trim($matches[2][0]); $data = trim($matches[3][0]); if ( $type == 're' && !empty( $data ) ) $rsvp = ''. $rsvps[ $rsvp ] .''; switch ($type) { case 'like': case 'fav': $cl = 'u-like-of'; $prefix = ''; break; case 'from': case 'repost': $cl = 'u-repost-of'; $prefix = '*reposted from:* '; break; case 're': $cl = 'u-in-reply-to'; $prefix = '**RE:** '; break; default: $cl = 'u-url'; $prefix = '**URL:** '; break; } $title = str_replace ( parse_url( $url, PHP_URL_SCHEME) .'://', '', $url); $r = "\n{$prefix}[{$title}]({$url}){.{$cl}}\n{$rsvp}"; return str_replace ( $replace, $r, $content ); } ``` ## Adding Android Thanks to the long and detailed description of Chris Aldrich[^7] I added this functionality to Android as well, with URL Forward[^8] as: `https://example.com/wp-admin/press-this.php?v=8&type=reply&u=@url` ## Footnotes Automating thins is good for you. [^1]: [^2]: [^3]: [^4]: [^5]: [^6]: [^7]: [^8]: