Логотип

Как создать сайт

Всё что нужно для создания сайта!

Комментарии для ucoz при помощи виджета вконтакте


Привет, продолжаем серию уроков по созданию сайта на ucoz. Сегодня затронем тему комментарии для ucoz. Дело в том что на сайте ucoz уже присутствует стандартная форма для комментариев, но лично меня она не устраивает.

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

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

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

Всё это работает при условие если комментарий дублируется на странице пользователя который оставляет комментарий. Так что есть смысл установить этот виджет к себе на сайт.

Вы можете оставить старую форму комментариев, стандартную от ucoz, если-же нет тогда мы её сейчас снесём.

Сносим старую форму комментариев

Давайте пройдём на сайт и посмотрим как выглядит стандартная форма комментариев, вот я её сфотографировал.

Она расположена сразу после текста который мы все последние уроки так упорно настраивали. Чтобы снести форму, нужно попасть в хорошо нам известный раздел, который находится в дизайн и управление дизайном.

Откроется страница на которой отыщите модуль онлайн игры. У модуля будет много разделов, нам нужен материал и комментарий к нему.

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

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

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

Виджет из контакта

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

Зайдите в контакт и нажмите кнопку управление.

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

Далее откроется страница на которой нажмите кнопку показать всё.

Откроется страница на которой в меню выберите виджеты для сайтов, а справа откроется страница на которой нажмите на кнопку комментарии.

На следующей странице появится форма с комментариями, которую нужно настроить под себя.

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

Под стрелочкой два, выберите сколько за раз будет показано комментарий на странице, в моём случае 10 штук. Расширенные комментарии я отключил, стрелочка под номером 3, так как не хочу не нужные фотографии и картинки на сайте. И в последнем окне скопируйте полученный код, стрелочка под номером 4.

Полученный код вставляем на сайт

Теперь зайдите на сайт, туда где мы удаляли код старой формы, и в то-же место вставьте полученный код из контакта. Сохраните.

Должно получится вот что.

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

<div style="margin-bottom:30px;"></div>

Вставить его нужно вот сюда, после чего сохранить код.

Разберём код

Это обычный блок див, в который я прописал стили margin-bottom:30px; - это правило говорит браузеру что нужно сделать от этого блока див снизу отступ в 30 пикселей. После чего я этот блок поместил над формой комментариев и комментарии теперь не могут приблизится к этому блоку на 30 пикселей.

Смотрим что получилось.

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

Подсказка:

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

Курс ещё не готов, но подписчики получат его первыми - как только работа будет закончена. На данный момент 17.08.2018 записано 19 теоретических уроков и 0 практических. Теоретический курс Готов! "Как создать, настроить, наполнить и раскрутить сайт на uCoz"