Комментарии ВКонтакте на сайте iWeb

Доброго времени суток, дорогие друзья! Сегодня хочу рассказать Вам о том, как добавить виджет комментариев социальной сети «ВКонтакте» на страницы сайта, создаваемого в редакторе Apple iWeb. Данный материал предполагает формат «инструкция в картинках» с краткими пояснениями выполняемых действий там, где это будет необходимо.

Что нам будет нужно? Зарегистрированный аккаунт в социальной сети «ВКонтакте» и сайт, созданный в редакторе Apple iWeb. Сайт, желательно иметь рабочий или, по крайней мере, для него должно быть выкуплено доменное имя (хотя, подойдет и бесплатный домен). Также, будет необходимо иметь возможность выкладывать страницы с готовым виджетом комментариев на каком-либо веб-хостинге: хостинг может быть платным или бесплатным, в данном случае, это не имеет особого значения. Выкладывать страницы будем только c целью тестирования и проверки: я проверял на своем хостинге, на котором размещен данный сайт. Проверить работоспособность комментариев оффлайн не получится: виджет комментариев просто не отображается, если открывать страницу локально.

Регистрация сайта и получение кода системы комментариев ВКонтакте

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

Подключаем свой сайт: для этого выбираем в поле «Сайт/приложение» пункт «Подключить новый сайт» и заполняем «Название сайта» и «Адрес сайта». Поле «Основной домен сайта» проставится автоматически. Нажимаем кнопку «Сохранить». После этого сайт благополучно подключится к вашему аккаунту и появиться в разделе «Приложения» на вашей странице ВКонтакте.

Далее, можете выбрать необходимое в пунктах «Количество комментариев», «Расширенные комментарии» и «Ширина», хотя все эти значения можно будет изменить позже, непосредственно в полученном коде виджета. При желании, можете почитать полную документацию по работе виджета комментариев ВКонтакте. Руководствуясь этим документом можно более гибко настроить виджет под свои нужды.

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

Установка виджета комментариев на страницы сайта

Установку виджета комментариев будем производить методом замены html-кода. Почему нужно использовать именно такой способ я подробно описывал в материале Использование iWeb: Замена html-кода, также этот способ уже неоднократно использовался, например, при установке социальных кнопок на сайт iWeb.

Итак начнем. В нужном месте страницы (там, где в последствии должны будут быть комментарии ВКонтакте) с помощью редактора Apple iWeb создаем текстовое поле, размер которого делаем равным размеру будущего окна для комментариев. В текстовом поле пишем любое слово - пусть это будет слово «vkcomments», желательно не изменять параметры шрифта: оставляем его размер и цвет по умолчанию. Для своего сайта я выбрал размеры 701 на 300 пикселей. Именно такого размера у меня будет окно, содержащее комментарии ВКонтакте.

Публикуем страницу в локальную папку на компьютере и открываем ее в веб браузере. Переводим браузер в режим просмотра исходного кода. С помощью поиска находим нужный участок исходного кода (поисковая фраза - «vkcomments»), копируем его в буфер обмена:

Выделенный участок нам нужно будет заменить кодом окна с вертикальной прокруткой, расположенным чуть ниже. Сделать это можно в любом текстовом редакторе, но лучше делать замену с помощью программы MassReplaceIt. О ее назначении, настройке и использовании достаточно подробно написано в статье MassReplaceIt: жизнь на территории iWeb. Устанавливаем, настраиваем программу и переходим к вкладке ‘Find and Replace’. В поле ‘Find’ вставляем часть кода из буфера обмена, в поле ‘Replace’ - html код окна с прокруткой и сохраняем этот запрос. После нажатия на кнопку ‘Replace’ программа сама найдет и внесет необходимые изменения в исходный код веб страницы.

Как получился такой код? Красным цветом выделена вторая часть виджета комментариев, которую Вы получили на сайте ВКонтакте (замените его на свой вариант, если при получении кода менялись какие-либо параметры). Чтобы было понятней, на скриншоте ниже отмечена эта часть кода (я задавал ширину виджета комментариев 650 пикселей). Черным цветом выделен код, который создает само окно с вертикальной полосой прокрутки.

Немного о значениях параметров width:681px и height:300px в коде окна комментариев. Параметр width:681px равен ширине текстового блока, который мы создавали ранее, минус 30 пикселей (20 пикселей для вертикальной полосы прокрутки и 10 на отступ). Параметр height:300px, соответственно, равен высоте вашего текстового блока.

Итак, первую часть работы мы уже выполнили, осталось еще немного. Если Вы помните, у нас еще осталась «невостребованная» часть кода с сайта ВКонтакте. Эту часть кода нужно будет скопировать и вставить в пределах тега страницы вашего сайта, на которой должно появиться окно с комментариями. Вам необходимо взять свой вариант кода, он будет отличаться от моего идентификатором apiId. Вот как этот код выглядит у меня:

Вставить этот код на ваши страницы можно двумя способами: открыть исходный код страницы в текстовом редакторе (я например, использую TextWrangler), разместить скопированный код перед закрывающим тегом и сохранить изменения. Недостатком данного способа является то, что такую процедуру придется производить каждый раз после того, как Вы переопубликуете данную страницу. При большом количестве страниц это довольно утомительное занятие: проще и быстрее воспользоваться программой iWeb SEO Tool. Я уже описывал как работать с этой программой: в поле «Head code» вставляем скопированный код, нажимаем ‘Apply’, далее кнопку ‘Re-apply Saved Tags’ - iWeb SEO Tool сама внесет необходимые изменения. Естественно, делать это нужно непосредственно перед размещением своих страниц на хостинге.

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

Окно с комментариями «ВКонтакте», которое получилось у меня, Вы можете найти чуть ниже - не стесняйтесь воспользоваться им и оставить свои комментарии .

Created by Apple iWeb • Library for Me