Как я боролся с адблоком

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

Зайдя на сайт, я не увидил блока с кнопками. Я, конечно, полез в html инспектор и увидел вот такую картину:

Долго я пытался понять какого хера происходит. Проверял не поломалось ли что на сайте, может не прогрузились стили или ещё какой косяк. И только, наверное, через пол часа до меня дошло, что это адблок заблочил виджет.

Самое интересное, мой виджет- это просто прибитый div с сылками. 0 жабаскрипта, никаких внешних, подключаемых скриптов и стилей, даже картинок не было, каждая кнопка- это просто кнопка. Выясняем причину блокировки

Первым делом, я убрал ссылки на соцсети из всех кнопок, не помогло. Затем, изменил название классов c "socialbar*" на "asd*". Виджет появился, но кнопка facebook осталась заблокированной:

Затем убрал из кнопки alt="Share on facebook", потом класс "fb-button", кнопка появилась. Затем удалил только класс, а аль оставил- кнопка осталась.

Рекомендации по построению виджета соц сетей:

В итоге, чтобы оно заработало мы должны:

• НЕ использовать классы созвучные с social**
• НЕ использовать классы вида "fb-button" или "vk-button"
• НЕ указывать прямых ссылок на соцсети

Первые два пункта- это херня, просто изменяем имена классов и всё возвращается на свои места:

А вот с ссылками придётся повозится. Первым делом, давайте попробуем сделать редирект через жабаскрипт:

...
<a class="asd-button kk-button" onClick="kk_button(`<?php echo $url; ?>&title=<?php echo $title; ?>&description=<?php echo $description; ?>&image=<?php echo $image; ?>`)" alt="Share on VKontakte" href="">vk</a>
...
<script>
function kk_button(sParams) {
  let win = window.open(`https://vk.com/share.php?url=${sParams}`, '_blank');
  win.focus();
}
</script>

И сразу же бинго! Кнопка заработала. Следом делаем то же самое с остальными кнопками:

<a class="asd-button kk-button" onClick="kk_button(`<?php echo $url; ?>&title=<?php echo $title; ?>&description=<?php echo $description; ?>&image=<?php echo $image; ?>`);" alt="Share on VKontakte" href="">vk</a>

    <a class="asd-button bb-button" onClick="bb_button(`<?php echo $url; ?>`);" href="" alt="Share on facebook">f</a>

    <a class="asd-button ww-button" onClick="ww_button(`<?php echo $url; ?>&text=<?php echo $description; ?>`);" href="" alt="Share on Twitter">tw</a>

    <a class="asd-button nn-button" onClick="nn_button(`<?php echo $url; ?>&title=<?php echo $title; ?>`);" href="" alt="Share on linkedin">in</a>

    <a class="asd-button email-button" href="mailto:?subject=<?php echo $title; ?>&body=<?php echo $description . "
" . $url; ?>" target="_blank" alt="Share via Email">@</a>
...
<script>
function kk_button(sParams) {
  let win = window.open(`https://vk.com/share.php?url=${sParams}`, '_blank');
  win.focus();
}

function bb_button(sParams) {
  let win = window.open(`https://www.facebook.com/sharer.php?u=${sParams}`, '_blank');
  win.focus();
}

function ww_button(sParams) {
  let win = window.open(`https://twitter.com/share?url=${sParams}`, '_blank');
  win.focus();
}

function nn_button(sParams) {
  let win = window.open(`https://www.linkedin.com/shareArticle?url=${sParams}`, '_blank');
  win.focus();
}
</script>

Ну а пока работает JS редирект, то так всё и оставим, а редиректы через сервер хэдеры когда-нить потом запилим.

Заключение

Конечно, адблок уже перегибает палку. Блокировать безобидные ссылки, это уже слишком. Но и без адблока выходить в интернет не вариант. К счастью нам получилось его обмануть, да ещё и без особых телодвижений.