Блог ☯

суббота, 11 февраля 2017 г.

Как сделать интеграцию блога или сайта с ВК и какая от неё польза?

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

Как сделать интеграцию блога или сайта с ВК и какая от неё польза?

Моё мнение что ВК лучше ФБ и уж точно лучше чем какой-нибудь Твиттер или Гугл плюс.

Писал об этом вот тут: Убогий дизайн Фейсбук

В принципе сделать интеграцию с ВК довольно просто, я сейчас сделал для моего в блога (blogger) минут за 10. Если вы не можете разобраться в официальной документации, то есть множество статей про это, нужно только загуглить.

Я кратко рассажу как это можно добавить, но вообще вы просто получаете код вот тут: https://vk.com/dev/widgets_for_sites и вставляете его.

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

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

Существует множество инструментов, которые предоставила команда Вконтакте для подобной интеграции.

Как сделать интеграцию блога с ВК



Какие конкретно выбрать воля ваша. Сейчас я поставил:

  • Мне нравиться;
  • Комменты;
  • Виджет сообщества;
  • Обзор комментариев.

Моё мнение что вам нужно выбрать вначале одну платформу для сайта или блога и сделать полноценную интеграцию с ней. Это не обязательно может быть ВК, например для blogger довольно удобно делать интеграцию с Google+ по многим причинам, однако этой соц сетью в России и СНГ пользуется очень мало людей.

Для России и СНГ ВК - это идеальная и самая приоритетная платформа / соц сеть.

Ваши задачи и цели при подобной интеграции такие:

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

Конечно, для СЕОшника ВК может быть не идеально. Например "мне нравиться" не пойдёт в сниппет выдачи в отличие от звёздочек оценки. Гугл недолюбливает ВК, да и кстати даже Яндекс. Это может негативно повлиять на вес и скорость сайта. 

Тем не менее ВК на мой взгляд чертовски удобен и красив.

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

В принципе при любой подобной интеграции с любой системой задача одна: 

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

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

Тем не менее ставить сразу например 3 виджета из Твиттера, ФБ и ВК может быть ошибкой. Тут будет и медленно грузиться, да и вообще вам придётся всё постить везде, хотя и в твитере это не проблема. 

Далее я всё таки сделаю простенький гайд о том как сделать интеграцию блога с ВК.



Как сделать интеграцию блога или сайта с ВК?


Как я и сказал, я делал 4 вещи:

  • Мне нравиться;
  • Комменты;
  • Виджет сообщества;
  • Обзор комментариев.

И у меня лично блог на blogger, но в принципе это значения не имеет, html он везде html.

"Мне нравиться" как поставить?

Это будет примерно вот так: 

Как сделать интеграцию блога или сайта с ВК и какая от неё польза



Заходите вот сюда, настройка там элементарная, получаете html код. 

Что там непонятного?

Как сделать интеграцию блога или сайта с ВК и какая от неё польза

Непонятно куда код для вставки вставить?

Вот эта хрень:
<!-- НАДПИСЬ -->
Это комментарий в коде. Аналогично в GM //

Там 2 комментария и 3 куска кода, абзацами.

Первые два куска кода вы помещаете там где у вас <head>

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

Где её надо?

Ну а где вам её надо?

Если вам надо в конце статьи, то ищите примерно вот такое:
post-footer
Вот после этого примерно. Просто вставляйте код и обновляйте всё. Смотрите куда вставилось. Потом двигайте его куда надо, пробуйте другое.

Если вам не надо что-бы эта кнопка и что-то еще показывалось на главной, а показывалось только когда открывают конкретный пост, можно любой код помещать в:

<b:if cond='data:blog.pageType == &quot;item&quot;'> 
ВАШ КОД 
</b:if>
Я на самом деле не знаю что это за херня тут, где-то взял. Но вроде как это обычное условие IF что мол показывать только на страницах и всё.

Оке. Лайк поставили, как комменты?

Абсолютно так-же.

Идёте в документацию и берёте там код.

Будет как-то так:

Как сделать интеграцию блога или сайта с ВК и какая от неё польза

Там тоже два куска кода и я тоже вам советую сразу два куска вставить сразу туда, где вы хотите комменты.

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

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

С виджетом паблика всё совсем просто и абсолютно так-же.

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

<!-- Put this script tag to the <head> of your page -->
<script type="text/javascript" src="//vk.com/js/api/openapi.js?ХХХ"></script> 
<script type="text/javascript">
  VK.init({apiId: ХХХХХХХ, onlyWidgets: true});
</script>

Х - ваш ID который вам выдаст ВК

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

Короче точно вам не скажу, но варианта два. Либо делайте как они говорят, либо как я.

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

В принципе ничего особо сложного. Идёте в виджеты ВК - комменты. А там нажимайте переход к подробной документации виджета. Ищите 6 - Обзор комментариев.

Там есть пример кода:

<div id="vk_comments_browse"></div>
<script type="text/javascript">
window.onload = function () {
 VK.init({apiId: ХХХХХХХ, onlyWidgets: true});
 VK.Widgets.CommentsBrowse('vk_comments_browse', {width: 500, limit: 5, mini: 0});
}
</script>
Всё что вам нужно это заменить ХХХХХХХ на ваше ID, которое вам уже выдали ранее. Оно есть в коде на любой другой виджет. А тут его не дали и видимо это 90% людей обломало и они не поняли что надо делать.

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

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

Будет что-то такое, если это криво вставить:


Как сделать интеграцию блога или сайта с ВК и какая от неё польза


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

Да и вообще это можно не делать. 

Тут еще проблема что минимальная ширина для сайтбара 300, иногда хочется уже.

Вот в принципе и всё. Если какие-то вопросы, спрашивайте в комментах.