Блокировка ВК в Украине: 3 совета вебмастерам

Дата публикации: 08.11.2017

blokirovka-vk-v-ukraineВсем привет!

С 2014 года, когда начался конфликт между Россией и Украиной, я всячески стараюсь избегать тем политики. Но, тем не менее, как бы мы от политики не ограждались, но сделать это на 100% всё равно никогда не получится, т.к. вся наша жизнь подчинена её законам.

Особенно правоту данного высказывания испытали на себе все украинские пользователи Интернет 16 мая 2017 года, когда президент Украины Пётр Порошенко подписал указ о блокировке сайтов Вконтакте, Одноклассники, Яндекс, Mail.ru и прочих российских ресурсов на территории Украины.

Казалось бы: ничего страшного не произошло, подумаешь — нельзя будет несколькими сайтами пользоваться. Тем более, что у всех них есть разрешённые альтернативы да и VPN клиенты никто не отменял, с помощью которых можно обходить блокировки по IP адресам.

Но сегодня речь пойдёт не о том, как обойти блокировку ВК, Одноклассников, Яндекса и прочих ресурсов пользователям Украины, чтобы продолжать пользоваться их контентом.

Вместо этого я хотел бы поговорить о борьбе с другой проблемой, вызванной запретом ВК в Украине и прочих сайтов. Она заключается в неработоспособности ресурсов, на которых установлены виджеты Вконтакте и элементы других заблокированных ресурсов.

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

Всему виной всевозможные виджеты Вконтакте: сообществ, комментариев, лайков и т.д., а также используемые вебмастерами скрипты сбора статистики Яндекс.Метрика и Mail.ru. И ладно бы они просто не загружались, а то и контент сайта делают недоступным.

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

Последняя особенность позволяет их косвенно отнести к средствам SEO оптимизации сайтов, т.к. на скорость загрузки ресурса поисковики обращают пристальное внимание при его ранжировании.

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

Технические причины проблем сайтов из-за блокировки ВК в Украине

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

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

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

К слову, всё население Украины на данный момент составляет 42 миллиона.

Но, все перечисленные преимущества утратили свою значимость в мае 2017, когда вступил в силу запрет ВК в Украине и ряда других ресурсов. И самое страшное, что помимо утраты функций социальных виджетов сайты стали терять ещё и посетителей, т.к. мало кто будет ждать полной загрузки сайта.pochemu-ne-zagruzhaetsya-sajt-iz-za-vidjetov-soobschestv

http://cccp-blog.com/wp-includes/images/banners/templatemonster/banner_new_year_2019.png

Самое обидное, что из-за санкций пострадали не только украинские пользователи Интернет, но и вебмастера, сайты которых эти люди посещали.

Почему — я уже сказал об этом выше. По какой причине ресурсы стали недоступными из-за виджетов Вконтакте — это другой вопрос.

Всему виной адрес API ВК, которое содержит в своём URL доменное имя самого заблокированного ресурса — vk.com/js/api/openapi.js?150. Поэтому виджеты и не могут загрузиться.

А, поскольку, виджеты Вконтакте загружаются по меру загрузки страницы сайта, то всё время, которое браузер ожидает ответа от заблокированного vk.com, содержимое сайта остаётся недоступным.

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

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

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

Оптимизация сайтов вследствие запрета ВК в Украине

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

Тем более, являясь вебмастером, я сам прекрасно понимаю, что вследствие отказа вы можете потерять своих пользователей, деньги и контроль над ресурсом (при отказе от Яндекс.Метрики, например).

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

Асинхронная загрузка кода

Причины проблем с загрузкой сайтов, вызванные виджетами группы и комментариев Вконтакте, я уже озвучил. Если с доступностью его API мы, к сожалению, ничего сделать не можем, то с загрузкой контента сайта, которую прерывают попытки браузера загрузить недоступный виджет, справиться вполне реально.

Здесь, как ни удивительно, виноватыми снова выступают разработчики Вконтакте, которые реализовали исключительно синхронную загрузку JavaScript кода.

Синхронная загрузка, для тех, кто не в курсе — это выполнение JavaScript сценария по мере загрузки всего сайта. Если синхронный скрипт расположен в шапке сайта между тэгами head, то остальной код не обработается браузером до тех пор, пока он не выполнится.

А если, как в нашем случае, скрипт не сможет обработаться, то сайт вообще не загрузится. Слава Богу, что виджеты Вконтакте чаще всего располагаются либо в сайдбаре, либо в конце страницы (если это виджет комментариев), либо в других удалённых от начала элементов структуры страницы сайта.

Библиотека курсов

Это на некоторое время позволяет пользователям задержаться на сайте и не уйти с него, посчитав, что они попали на «битую» страницу. Но всё же весь контент они всё равно не увидят, что не есть хорошо.

Поэтому в данном случае лучше сделать загрузку виджета ВК асинхронной, т.е. выполнение скрипта браузером будет происходить параллельно загрузке остальной части страницы, что нам и нужно.

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

Данный метод хорошо работает в случаях подключения на страницу готовых элементов (например, у Facebook при размещении виджета в виде iframe), однако, в случае с виджетами Вконтакте этот номер не проходит, т.к. на момент загрузки виджета браузером он ещё не загрузился по API ВК, которое недоступно.

alternativy-vidjeta-gruppy-vkontakte-na-sajtПоэтому нужно программно определить момент, когда придёт ответ от API VK, и только тогда уже загружать его в элемент виджета. Для этих целей существует масса готовых скриптов, поэтому я не посчитал нужным писать его заново.

Для асинхронной загрузки виджетов Вконтакте на данном сайте лично я пользовался следующим кодом — http://xpro.su/php/async_widgets-1. Скрипт рабочий, поэтому рекомендую 🙂

Автор, как я понял, за основу взял код асинхронной загрузки VK OpenAPI, с которым вы можете познакомиться по данной ссылке — https://vk.com/dev/openapi

Ну, и ещё автор дописал код для работы в Internet Explorer старых версий, которым я решил пренебречь ввиду древности данной технологии.

В итоге, мой слегка дополненный вариант асинхронного виджета Вконтакте выглядел так:

<div id="vk_groups"></div>
<script type="text/javascript">
    var VK_loader = function () {
        var oHead = document.getElementsByTagName("head")[0];
        var oScript = document.createElement("script");
        oScript.type = "text/javascript";
        oScript.async = true;
        oScript.src = "http://vk.com/js/api/openapi.js?150";
        oHead.appendChild(oScript);
        oScript.onload = function () {
            VK.Widgets.Group(
                    "vk_groups",
                    {
                        mode: 0,
                        width: "286",
                        height: "320",
                        color1: 'FFFFFF',
                        color2: '444444',
                        color3: '00a1e0'
                    },
                    номер_группы
                    );
        }
    };
    if (document.addEventListener) {
        document.addEventListener("DOMContentLoaded", function () {
            document.removeEventListener("DOMContentLoaded", arguments.callee, false);
            VK_loader();
        }, false);
    }
</script>

При реализации кода из приведённой статьи на своём сайте я ещё заметил, что он прекрасно работает без указанного в оригинале кода:

oScript.onload = function() {
         VK.init({apiId: ID_сайта_ВКонтакте, onlyWidgets: true});//лишний код
         VK.Widgets.Group("vk_groups", {mode: 0, width: 200, height: 250}, номер_группы);
       }

Поначалу я никак не мог понять, что это за ID_сайта_Вконтакте, т.к. автор не указал, где его брать. В итоге я отыскал, где взять данный ключ. Им оказался ID приложения Вконтакте, которое создаётся для доступа к сайтам через OpenAPI.

Создать приложение ВК для получения необходимого ключа можно здесь — https://vk.com/editapp?act=create
А получить ключ существующего приложения Вконтакте можно вот здесь — https://vk.com/apps?act=manage

Но, как выяснилось, код работал при указании вместо ID_сайта_ВКонтакте любого числа. В итоге я вообще решил убрать данную строку во избежания недоразумений.

Кстати, итоговый код загрузки виджета группы Вконтакте для сайта можете использовать для асинхронной загрузки любых виджетов и компонентов, использующих JavaScript код. Для этого прочитайте комментарии под статьёй, из которой я его изначально позаимствовал, где автор рассказывает, как добавить в данный блок Яндекс.Метрику и другие скрипты.

Вот и всё, теперь наши виджеты грузятся параллельно с остальным контентом, не замедляя её и ускоряя скорость загрузки страницы сайта в целом.

Но у асинхронной загрузки есть и минус — несмотря на то, что сайт загрузится без проблем, вместо виджета ВК в конечном итоге будет пустое место, т.к. его API в принципе недоступно.

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

Поиск альтернатив заблокированным ресурсам

Полный отказ от соцсетей и прочих сервисов по той причине, что некоторые из них заблокированы, как я уже и говорил, — шаг слишком радикальный. А вот заменить их альтернативными — почему бы и нет?

В современном цифровом мире существует такая же жёсткая конкуренция между различными проектами, как и везде. Поэтому слабому звену всегда можно найти замену.

Вместо того же ВК можно пользоваться разрешённым в Украине и не менее крупным Facebook, у которого есть аналогичные виджеты сообществ и комментариев. Или даже Одноклассниками, которые, несмотря на аналогичный с ВК запрет, смогли организовать своё АПИ так, что виджеты грузятся без проблем благодаря URL API, отличному от основного сайта — https://connect.ok.ru/connect.js

Ещё и сам код виджета у одноклассников загружается асинхронно, за что честь и хвала их администрации и разработчикам. Не знаю, когда именно были добавлены эти новшества — то ли как средство обхода блокировки вконтакте в Украине, то ли существовали с самого начала, но на выходе мы имеет одно — Одноклассники здесь обошли ВК, и это факт 🙂

Жаль только, что аудитория Одноклассников несколько иная, чем у ВК, да и не такая многочисленная — накануне запрета посещаемость украинских пользователей была 5 миллионов в день.

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

Ну, а Яндекс.Метрику и счётчики Mail.ru можно заменить на Google Analytics, LiveInternet и Рамблер ТОП100.

Хотя, правды ради, нужно сказать, что данные компании переработали свои инструменты с вводом запрета ВК в Украине и если поначалу продукты Mail.ru тормозили загрузку сайта, то, буквально вчера я рискнул снова установить себе счётчик и проверить состояние сайта при этом — никаких проблем с загрузкой не произошло.

С Яндекс.Метрикой у меня же изначально никаких проблем не наблюдалось, несмотря на жалобы других вебмастеров. Ну, и сейчас они также не возникли. Правда, показатели посещаемости по Яндекс.Метрике примерно на 30 посетителей в день меньше, чем у LiveInternet. Не знаю, с чем это связано — то ли из-за санкций трафик стал учитываться по-другому, то ли так было всегда, просто я этого не замечал 🙂

Но, в любом случае, какими бы ни были привлекательными альтернативы, но они всё же неспособны затмить оригинал. Ярким доказательством данной идеи стало прекращение работы инновационной украинской социальной сети Ukrainians, ставящей своей задачей стать заменителем ОК и ВК для жителей Украины.

В итоге, она просуществовала около 3 месяцев, и её организаторы заявили, что вынуждены признать тот факт, что «Facebook, Instagram, VK и Однокласники (доступ через специальные каналы) не оставляют на рынке ниши для ещё одной социальной сети».

Да, что бы кто не говорил, но люди не способны так быстро отказаться от своих привычек…

У большинства вебмастеров до ввода блокировки Вконтакте в Украине паблик ВК был основным инструментом социальной активности и имел множество подписчиков.

И теперь вдруг он стал недоступен для половины подписчиков. Что же теперь — отказываться от него насовсем и начинать развивать сообщества в Facebook или Telegram? Некоторые так и сделали, но их не большинство.

Лично я не был готов распрощаться со своим пабликом ВК и его аудиторией, формировавшейся не один год, поэтому нашёл ещё одно средство решения проблемы, вызванной запретом Контакта, Одноклассников и прочих российских ресурсов в Украине.

Загрузка необходимого виджета

Конечным средством оптимизации данного сайта в связи с суровыми политическими реалиями стало внедрение стратегии «И нашим, и вашим» 🙂

Согласно ей я решил показывать украинским пользователям виджет сообщества в Facebook, а всем остальным, у кого ВК не заблокирован — виджет Вконтакте. Как определить, откуда к вам зашёл пользователь? Просто — по его сетевому IP адресу.

Алгоритм простой — получаем IP клиента, определяем страну, и на основании результата отображаем нужный виджет.

Необходимый код на языке PHP я уже публиковал в предыдущей статье, где рассказывал как получить город по IP. Осталось только слегка его дополнить для добавления виджетов социальных сетей на сайт.

Поскольку сайт у меня разработан на WordPress, то код из статьи по ссылке я оформил отдельной функцией, которую вынес в functions.php моей темы:

function checkCountryByIp()
{
    $client  = @$_SERVER['HTTP_CLIENT_IP'];
    $forward = @$_SERVER['HTTP_X_FORWARDED_FOR'];
    $remote  = @$_SERVER['REMOTE_ADDR'];
    $result  = array('country'=>'', 'city'=>'');

    if(filter_var($client, FILTER_VALIDATE_IP)) $ip = $client;
    elseif(filter_var($forward, FILTER_VALIDATE_IP)) $ip = $forward;
    else $ip = $remote;

    $ip_data = @json_decode(file_get_contents("http://www.geoplugin.net/json.gp?ip=".$ip));
    if($ip_data && $ip_data->geoplugin_countryName != null)
    {
        $result = $ip_data->geoplugin_countryCode;
    }

    return $result;
}

Как вы видите, я получаю код страны по IP адресу пользователя. Теперь мне нужно, используя его, загружать на страницу нужный виджет.

Для этого я в сайдбаре, где у меня располагается виджет сообществ для внешних сайтов, прописал следующую конструкцию:

<div class="vk-widget" <?php if(checkCountryByIp() == 'UA'){ ?> style="height: 178px;" <?php } ?>>
    <?php if(checkCountryByIp() != 'UA'){ ?>
        <script type="text/javascript" src="//vk.com/js/api/openapi.js?146"></script>
        <!-- VK Widget -->
        <div id="vk_groups"></div>
        <script type="text/javascript">
            VK.Widgets.Group("vk_groups", {
                    mode: 0,
                    width: "286",
                    height: "320",
                    color1: 'FFFFFF',
                    color2: '444444',
                    color3: '00a1e0'
                }, 105617374);
        </script>
    <? }else{ ?>
        <iframe src="https://www.facebook.com/plugins/page.php?href=https%3A%2F%2Fwww.facebook.com%2Fcccpblog
                &tabs&width=286&height=170&small_header=true&adapt_container_width=true&hide_cover=false
                &show_facepile=true&appId" width="286" height="170"
                style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowTransparency="true" async>
        </iframe>
    <?php } ?>
</div>

Как видите, я проверяю код страны, возвращённый функцией checkCountryByIp(). Если он не равен ‘UA’, то добавляю виджет группы ВК. В противном случае отображается виджет Facebook.

Обратите внимание, что я указал атрибут async, чтобы он загружался асинхронно, т.к. в данном случае элемент у нас есть уже на момент загрузки страницы — и это сработает. Но разницы я, если честно, не заметил по сравнению с вариантом, когда async не был прописан. Возможно, асинхронная загрузка кода у Facebook базовая.

Не забудьте только вместо моих виджетов сообществ для внешних сайтов установить свои. Если вы вдруг не знаете, где взять код, чтобы добавить виджет группы на сайт, то перейдите по этой ссылке и создайте его, указав id своей группы — https://vk.com/dev/Community

Виджет группы Facebook (который теперь стал называться виджетом страницы) можно взять здесь — https://developers.facebook.com/docs/plugins/page-plugin/

Я уже думал, что с установкой приведённого кода мои искания поисков обхода блокировки ВК в Украине подошли к концу, но, поскольку у меня на сайте установлен плагин серверного кэширования, из-за которого вместо виджета Facebook иногда всё-таки пытался загрузиться ВК и контент сайта снова не догружался, мне пришлось слегка подкорректировать скрипт.

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

<div class="vk-widget" <?php if(checkCountryByIp() == 'UA'){ ?> style="height: 178px;" <?php } ?>>
    <?php if(checkCountryByIp() != 'UA'){ ?>
        <div id="vk_groups"></div>
    <? }else{ ?>
        <iframe src="https://www.facebook.com/plugins/page.php?href=https%3A%2F%2Fwww.facebook.com%2Fcccpblog
                &tabs&width=286&height=170&small_header=true&adapt_container_width=true&hide_cover=false
                &show_facepile=true&appId" width="286" height="170"
                style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowTransparency="true" async>
        </iframe>
    <?php } ?>
</div>

Таким «куцым» он вышел потому, что весь JavaScript код асинхронной загрузки виджета ВК на сайт я решил вынести в отдельный скрипт, который подключал на сайт в футере:

if (document.getElementById("vk_groups")) {
    var VK_loader = function () {
        var oHead = document.getElementsByTagName("head")[0];
        var oScript = document.createElement("script");
        oScript.type = "text/javascript";
        oScript.async = true;
        oScript.src = "http://vk.com/js/api/openapi.js?150";
        oHead.appendChild(oScript);
        oScript.onload = function () {
            VK.Widgets.Group(
                    "vk_groups",
                    {
                        mode: 0,
                        width: "286",
                        height: "320",
                        color1: 'FFFFFF',
                        color2: '444444',
                        color3: '00a1e0'
                    },
                    105617374
                    );
        }
    };
    if (document.addEventListener) {
        document.addEventListener("DOMContentLoaded", function () {
            document.removeEventListener("DOMContentLoaded", arguments.callee, false);
            VK_loader();
        }, false);
    }
}

Сюда, помимо описанного ранее кода, я решил добавить проверку на существование контейнера, в который загружается виджет ВК по АПИ, т.к. скрипт загружается даже в случае загрузки виджета Фейсбук, когда контейнера на странице нет физически, в результате чего браузер выдаёт ошибку в консоли.

Несмотря на то, что приведённый выше скрипт я использовал для установки виджетов соцсетей на своём WordPress сайте, он подойдёт для любого ресурса, разработанного на языке PHP, т.к. никаких специальных конструкций WordPress API я при его разработке не использовал.kak-dobavit-vidjet-vkontakte-i-fejsbuk-na-sajt-po-ip

Если же вы не хотите морочиться установкой кода на сайт, то можете воспользоваться готовыми решениями в виде плагинов для CMS. Например для определения страны и города по IP на WordPress можете воспользоваться WT GeoTargeting — https://ru.wordpress.org/plugins/wt-geotargeting/

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

Думаю, что по ходу чтения материала вы догадались, почему в теме статьи делается акцент именно на блокировку ВК в Украине, хотя под санкции попал и ряд других популярных ресурсов? Всё просто: в отличие от своих собратьев по санкциям на данный момент (а это уже спустя полгода) только Вконтакте палец о палец не ударил, чтобы сделать свои виджеты доступными для заблокированных пользователей.

А сложного здесь абсолютно ничего нет — изменить url API и сделать редиректы со старых ссылок на новые, чтобы пользователи, использующие старый url, смогли получить доступ к АПИшке по новому адресу.

Но разработчики ВК почему-то до сих пор ничего этого не сделали, несмотря на то, что, регулярно выпускают новые версии API.

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

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

До новых встреч!

P.S.: если вам нужен сайт, но нет времени самостоятельно его разрабатывать, могу порекомендовать вам своего проверенного партнёра - вебстудию Дениса Нихаева. Было не просто, но я всё-таки выбил для вас скидку 20%, что составит до 20 тысяч рублей в зависимости от выбираемого тарифа 🙂 Вот промо код - CCCP. При заказе сообщите его и скидка вам гарантирована! Друзьям тоже можете рассказать 😉

Понравилась статья? Поделись с друзьями:
  1. 5
  2. 4
  3. 3
  4. 2
  5. 1
3 голоса, в среднем: 5 из 5

Похожие темы

Комментариев пока нет... Будьте первым! :)

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *