Блокування ВК в Україні: 3 ради вебмастерам

1. Технічні причини проблем сайтів через блокування ВК в Україні
2. Оптимізація сайтів внаслідок заборони ВК в Україні

Всім привіт!

З 2014 року, коли почався конфлікт між Росією і Україною, я всіляко намагаюся уникати тим політики. Але, тим не менш, як би ми від політики не захищали, але зробити це на 100% все одно ніколи не вийде, тому що вся наша життя підпорядковане її законам.

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

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

Але сьогодні мова піде не про те, як обійти блокування ВК, Однокласників, Яндекса і інших ресурсів користувачам Україна, щоб продовжувати користуватися їх контентом.

Замість цього я хотів би поговорити про боротьбу з іншою проблемою, викликаної забороною ВК в Україні та інших сайтів. Вона полягає в непрацездатності ресурсів, на яких встановлені віджети Вконтакте і елементи інших заблокованих ресурсів.

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

Всьому виною всілякі віджети Вконтакте: спільнот, коментарів, лайків і т.д., а також використовувані веб-майстрами скрипти збору статистики Яндекс.Метрика і Mail.ru. І якби ж то вони просто не завантажувалися, а то і контент сайту роблять недоступним.

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

Остання особливість дозволяє їх побічно віднести до засобів SEO оптимізації сайтів , Тому що на швидкість завантаження ресурсу пошуковики звертають пильну увагу при його ранжируванні.

Але перед тим, як ми почнемо, я хотів би приділити увагу технічних моментів виникає явища.

Технічні причини проблем сайтів через блокування ВК в Україні

Установка віджетів соціальних мереж на сайті - це відмінний засіб, що дозволяє досягти вебмастерам відразу кількох цілей:

1. Зручність використання ресурсу користувачами - досягається за допомогою віджетів коментарів і авторизації, завдяки яким ваші відвідувачі, які мають акаунти в соціальних мережах, можуть залишати відгуки без необхідності заповнення контактної інформації та внутрішньої реєстрації на вашому сайті.
2. Соціальна активність - за допомогою віджетів спільнот можна ділитися з вашими передплатниками найрізноманітнішої інформацією, не публікується на сайті, в тому числі організовувати в спільнотах опитування та обговорення, ділячись їх результатами через віджети.
3. Збільшення аудиторії сайту - завдяки віджетів, що дозволяє поділитися сторінками вашого сайту в соціальних мережах з іншими користувачами.

І, чим більше соціальна мережа, тим більшою мірою перераховані функції віджетів виконуються. Наприклад, Вконтакте, як найпопулярніша вітчизняна соціальна мережа в день її заборони на території України мала відвідуваність 18 мільйонів українських користувачів в день.

До слова, все населення України на даний момент складає 42 мільйони.

Але, всі перераховані переваги втратили свою значущість травнем 2017, коли вступив в силу заборона ВК в Україні та ряду інших ресурсів. І найстрашніше, що крім втрати функцій соціальних віджетів сайти стали втрачати ще й відвідувачів, тому що мало хто буде чекати повного завантаження сайту.

Найприкріше, що через санкції постраждали не тільки українські користувачі Інтернет, але і веб-майстра, сайти яких ці люди відвідували.

Чому - я вже сказав про це вище. З якої причини ресурси стали недоступними через віджетів Вконтакте - це інше питання.

Всьому виною адресу API ВК, яке містить в своєму URL доменне ім'я самого заблокованого ресурсу - vk.com/js/api/openapi.js?150. Тому віджети і не можуть завантажитися.

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

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

З цієї ж причини раніше спостерігалися проблеми із завантаженням сайтів, які використовують лічильники відвідуваності від mail.ru, але хлопці, на відміну від ВК зреагували на цю проблему і усунули її.

Але не час сумувати за загальною доступності заблокованих ресурсів, а потрібно враховувати реалії і вчитися існувати в сучасних умовах. Тому я приведу вам кілька способів, як можна зберегти працездатність ресурсів і навіть збільшити її, незважаючи на блокування ВК в Україні.

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

Відразу скажу, що при перерахуванні заходів оптимізації серед них ви не зустрінете саму радикальну - відмова від подібних сервісів взагалі. Вихід є завжди 🙂

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

Так що будемо обходитися малою кров'ю. Тим більше, що це можливо.

Асинхронна завантаження коду

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

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

Синхронна завантаження, для тих, хто не в курсі - це виконання JavaScript сценарію в міру завантаження всього сайту. Якщо синхронний скрипт розташований в шапці сайту між тегами head, то решті код не буде опрацьовано браузером до тих пір, поки він не виконається.

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

Це на деякий час дозволяє користувачам затриматися на сайті і не піти з нього, вважаючи, що вони потрапили на «биту» сторінку. Але все ж весь контент вони все одно не побачать, що не є добре.

Тому в даному випадку краще зробити завантаження віджета ВК асинхронної, тобто виконання скрипта браузером буде відбуватися паралельно завантаженні решти сторінки, що нам і потрібно.

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

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

Тому потрібно програмно визначити момент, коли прийде відповідь від 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') {?&gt; 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') {?&gt; 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 я при його розробці не використовував.

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

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

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

А складного тут абсолютно нічого немає - змінити url API і зробити редіректи зі старих посилань на нові, щоб користувачі, які використовують старий url, змогли отримати доступ до АПІшке за новою адресою.

Але розробники ВК чомусь досі нічого цього не зробили, незважаючи на те, що, регулярно випускають нові версії API.

Як на мене, цей факт характеризує адміністрацію даного ресурсу не з найкращого боку. І на їх місці я б що-небудь та зробив, поки вони не втратили певний відсоток своїх користувачів, які є українськими веб-майстрами, назавжди.

На цьому у мене все. Пишіть свої відгуки про статтю в коментарях і діліться нею зі своїми друзями в соціальних мережах за допомогою кнопочок під публікацією. Сподіваюся, що матеріал був вам корисний 🙂

До нової зустрічі!

PS: якщо вам потрібен сайт або необхідно внести правки на існуючий, але для цього немає часу і бажання, можу запропонувати свої послуги.

Більше 5 років досвіду професійної розробки сайтів. Робота з PHP, OpenCart, WordPress, Laravel, Yii, MySQL, PostgreSQL, JavaScript, React, Angular і іншими технологіями web-розробки.

Досвід розробки проектів різного рівня: Лендінзі, корпоративні сайти, Інтернет-магазини, CRM, портали. У тому числі підтримка і розробка HighLoad проектів. Надсилайте ваші заявки на email [email protected] .

І з друзями не забудьте поділитися 😉