Недавно я использовал расширение для браузера DuckDuckGo, которое дает мне оценку конфиденциальности веб-сайта, а также количество трекеров (заблокированных) на веб-сайте, и мне нравится получать информацию о том, что было заблокировано.

Наблюдение за появлением трекеров таким образом заставило меня понять, что, добавив фразу «вот я в Твиттере» в мой собственный блог, я невольно предоставил Твиттеру возможности отслеживания с моего собственного сайта. Что интересно, я никогда не подозревал, что добавление этого виджета на мой сайт даст Twitter такую ​​власть над моими ничего не подозревающими посещениями. И это вроде не нормально.

В своем рефакторинге программного обеспечения для блога я решил сохранить функциональность, позволяющую людям подписываться на меня, видеть количество моих подписчиков и сохранять стиль, но отказаться от нежелательного отслеживания.

Разбираем виджет на части

При запуске сетевой трассировки, когда виджет Twitter встроен в «альтернативный» домен twimg.com, вы обнаружите, что существует запрос JSONP, который выглядит следующим образом:

Таким образом, cURL to the info.json дает довольно полезную информацию, хотя он выглядит как статический URL-адрес, но определенно выглядит достаточно динамичным, чтобы предоставлять контент для виджета Twitter:

[
  {
    "following": false,
    "id": "648873",
    "screen_name": "rem",
    "name": "@rem",
    "protected": false,
    "followers_count": 49961,
    "formatted_followers_count": "50K followers",
    "age_gated": false
  }
]

Мы могли бы сохранить запрос в клиенте и воспользоваться поддержкой info.json JSONP (и проверить сетевой запрос, в запросе не происходит обмена файлами cookie, поэтому технически «безопасно»)… но я не фанат лишнего JavaScript. Таким образом, это отличный кандидат для единственного запроса на стороне сервера во время сборки.

Переход на сервер

Что нас интересует, так это количество подписчиков. Поскольку эти числа не сильно меняются, не имеют большого значения и в конечном итоге скрыты в округлении - одна сборка (для меня) каждые две недели вполне подходит (я публикую как минимум два сообщения в блоге в месяц). Хотя вы можете запланировать перестройку своего сайта один раз в день с помощью других сервисов (я начал с cron.jobs для выполнения аналогичных задач, но это еще далеко не публично).

Теперь этот процесс является частью моей статической сборки, которая создается в Netlify, а затем я предоставляю доступным способом необработанные значения Twitter.

На моем сайте используется специальная система, но, допустим, вы использовали что-то вроде 11ty, вы можете включить в свою сборку package.json следующее:

"scripts": {
  "prebuild": "curl https://cdn.syndication.twimg.com/widgets/followbutton/info.json?lang=en&screen_names=rem > _data/twitter.json"
  "build": "eleventy"
}

Согласно 11ty’s data docs, статистика Twitter будет доступна в глобальном свойстве twitter в ваших шаблонах.

Теперь нужно реализовать внешний вид.

Смотреть и чувствовать

Предупреждение: здесь больше HTML, чем я мог бы включить, но я поднял его прямо из виджета, чтобы я мог полностью повторно использовать стили Twitter (хотя и слегка измененные):

<div class="twitter-badge ltr ready hcount count-ready">
  <div class="btn-o">
    <a
      class="btn"
      id="follow-button"
      href="https://twitter.com/intent/user?screen_name={{ twitter.screen_name }}"
      ><i></i><span class="label" id="l">Follow&nbsp;<b>@{{ twitter.screen_name }}</b></span></a
    >
  </div>
  <div class="count-o" id="c">
    <i></i><u></u
    ><a
      class="note"
      id="count"
      href="https://twitter.com/intent/user?screen_name={{ twitter.screen_name }}"
      >{{ twitter.formatted_followers_count }}</a
    >
  </div>
</div>

Я полагаю, что пустые элементы <i> и <u> используются для стилизованных блоков - хотя я бы хотел полностью удалить их, если это возможно.

Теперь немного CSS, не то чтобы этот синтаксис меньше - в данном случае это CSS с вложением, и помимо &.<selector>, где & относится к текущему селектору с ограниченной областью видимости, это должен быть довольно обычный CSS - предоставляется в качестве загрузки для краткости .

Незначительная корректировка, которую я внес в существующий виджет Twitter CSS, - это сделать синий цвет из «follow @rem», а белый цвет имеет более высокий контраст для лучшей доступности цвета (текущее значение по умолчанию не работает, что я быстро могу увидеть с помощью инструментов разработчика Chrome инспектор):

Я сместил синий цвет на #31759f, и это небольшое изменение также дает мне больше контроля, поскольку я управляю CSS, который отображает виджет Twitter. И это действительно так.

На один трекер на моем сайте меньше для посетителей.

Изначально опубликовано в B: log Реми Шарпа