Комментарии ВКонтакте на сайте iWeb | Интернет интересности и полезности

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

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

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

 

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

Рейтинг@Mail.ru

Как будет выглядеть виджет комментариев? Тут стоит немного остановиться. Дело в том, что использование редактора Apple iWeb подразумевает создание веб-страниц с фиксированными размерами: ширину и высоту контента мы задаем самостоятельно. Соответственно, каждый блок на странице (текст, изображения, окна и т.д.) имеет свои конечные размеры, из которых и складывается размер страницы. Сейчас же, у нас стоит задача расположить на странице динамический контент: ведь виджет комментариев может изменять свои размеры по высоте — при увеличении количества комментариев блок будет увеличивать свой вертикальный размер и перекрывать своим содержимым все, что расположено ниже него или вообще выходить за пределы веб-страницы. Избежать этого можно, разместив блок комментариев в окне фиксированного размера с прокруткой вертикального содержимого: полоса прокрутки позволит просматривать содержимое такого окна от начала до конца. Похожие окна с виджетом комментариев системы Disqus Вы уже видели на моем сайте. Сейчас мы попробуем создать тоже самое для виджета комментариев социальной сети ВКонтакте.

Как получить код системы комментариев ВКонтакте

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

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

 

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

 

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

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

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

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

 

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

 

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

<div style=»width:681px;height:300px;overflow-x:hidden;overflow-y:auto;position:relative;

padding:10px;border: 1px solid #999999;»>

<div id=»vk_comments»></div>

<script type=»text/javascript»>

VK.Widgets.Comments(«vk_comments», {limit: 10, width: «650», attach: «*»});

</script>

</div>

 

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

 

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

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

Вот как этот код выглядит у меня:

 

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

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

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