NASCAR

(Внимание: эту статью надо читать до конца, прежде чем делать)

На многих сайтах есть целый арсенал кнопок в конце страницы: поставить +1 на гуглплюсе, пошэрить в твиттере, расшарить в фейсбуке. Это довольно удобно, когда хочется поделиться постом, чтобы не копировать ссылку вручную.

Обычный вариант, которые предлагают сервисы, — добавить к себе на сайт их джаваскрипт, который нарисует кнопки, но тогда а) дизайн этих кнопок определяется сервисами, б) сервисы получают информацию о том, кто посещает твой сайт (если человек залогинен в сервис), в) для каждого сервиса нужно добавлять свой джаваскрипт.

Огромное количество разномастных кнопок создаёт так называемую NASCAR problem, где сайт становится похожим на гоночную машину с десятком логотипов брендов.

Илья Бирман создал «Лайкли», небольшую библиотеку/виджет, которая умеет рисовать такие кнопки для нескольких сервисов в едином стиле.

Но во всех таких кнопках прописаны урлы Твиттера, Фейсбука, ВК, что делать, когда у каждого читателя есть свой сайт? Не добавишь же миллион кнопок. Нужна одна кнопка, которая для каждого читателя превратится в ссылку на личный интерфейс для постинга.

Эту проблему можно решить, добавив уровень indirection. Это мог бы быть какой-то отдельный, централизованный сервис, который бы редиректил пользователей на их сайты. Но в 2014 году на IndieWebCampUK придумали и спрототипировали неожиданное решение, в виде кастомной схемы урлов!

В целом, «поделиться», «лайкнуть», «репостнуть» и прочие действия в вики называют web actions.

У Аарона Пареки есть видео, как эта штука работала. В ней несколько составляющих:

• способ постить: вероятнее всего, Micropub,
• URL для интерфейса постинга,
• особый джаваскрипт на сайте, чьей статьёй хочется поделиться,
• инди-конфиг, который расскажет этому сайту, где находится интерфейс для постинга.

Инди-конфиг — это страница на твоём сайте (например, где-нибудь в админке), которая вызывает window.parent.postMessage и передаёт туда JSON-конфигурацию, самые частые поля которой это reply — урл для ответов, и like —  урл для лайков. То есть, примерно такой config.html:

И нужно подключить эту страницу как обработчик схемы web+action:

window.navigator.registerProtocolHandler('web+action', 'https://marinintim.com/friendware/config.html?url=%s', 'Tim Marinin');

Если открыть страницу в браузере, то появится предложение зарегистрировать обработчик.

Сайт, на котором есть кнопка «Поделиться», загружает айфрейм с адресом web+action:load и подписывается на сообщение, которое отправит config.html, из которого достаёт нужные урлы и открывает их, заменяя {url} на урл, которым хочется поделиться.

В начале статьи я предупредил, что нужно дочитать до конца, прежде чем начать делать. Дело в том, что это работало в 2014, но не работает сейчас — и Хром, и Файрфокс не дают загрузить айфрейм со своей схемой (Файрфокс просто, Хром жалуется на CSP). В принципе, сейчас может сработать вариант просто делать ссылку для лайка как кастомную схему, например, web+like://url-to-like, но у такого варианта нет фолбэка: если читатель не зарегистрировал обработчик, то он увидит не очень дружелюбную ошибку:

У варианта из 2014, если не получалось достать конфиг из айфрейма, можно было перенаправить на какой-то вариант по умолчанию, например, твиттер.

Но мне нравится ключевая идея: дать возможность лайкать и отвечать на своём сайте, не отходя от кассы. Так что я думаю сделать свой подход к этой проблеме.

Пока только обрисую детали, подробности расскажу на HWC.

1. Кнопка ведёт на урл, общий для всех (как в случае с твиттером): например https://intent.marinintim.com/like?url=тут-лайкаемый-урл
2. intent.marinintim.com смотрит в localStorage, если там сохранён урл личного сайта, идём на шаг 4
3. intent.marinintim.com предлагает лайкнуть в твиттере/фейсбуке/етц или ввести свой урл
4. intent.marinintim.com замещает свой фрейм нужным урлом
5. Нужный урл принимает урл в виде параметра и происходит лайк

В этой схеме есть очевидная централизация (впрочем, intent.marinintim.com может быть не единственным интент-сервером), зато а) https, который поддерживается всеми браузерами, б) есть фолбэк, на случай если у читателя ещё нет своего сайта с микропабом.

Один из плюсов Индивеба-как-движения — если хочется попробовать что-то новое, то можно взять и сделать, не нужно ничьего разрешения, в сообществе принято «show, don't tell». Поэтому первый сырой прототип:

Лайкнуть

Кстати! Аарон сделал IndieWeb Events, который агрегирует события про Индивеб. Там есть и наша встреча. Приходи, даже если не получилось отправить RSVP.