Комментарии Вконтакте и кнопка «Мне нравится» на главной DLE: проблемы и их решения.

Рубрикатор статьи

Доброго времени суток, друзья. Сегодня на sdelaemblog.ru, поговорим о взаимодействии часто используемых виджетов Вконтакте с движком DLE. То есть виджет комментариев и кнопка «Мне нравится».

Комментарии Вконтакте и кнопка "Мне нравится" на главной DLE: проблемы и их решения.

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

Как добавить кнопку Мне нравится Вконтакте в blogger?

Видеокурс "Технические секреты групп Вконтакте" доступен для скачивания!

Не получается сделать меню в группе Вконтакте? Устали платить другим за добавление меню в Вашу группу? Хотели бы научится всем техническим тонкостям и экономить свои деньги? Тогда скачайте курс прямо сейчас!

Согласитесь, это не то, что мы ожидали увидеть, добавляя виджет :mrgreen:

Комментарии Вконтакте и кнопка «Мне нравится» на главной странице DLE: Проблема.

В чем же заключается данная проблема? Если обратиться к документации к виджетам Вкоктакте. То при внимательном прочтении, в глаза бросается то, что id элемента, который используется, для вывода виджета. Должен быть уникальным и использоваться только один раз на странице. То есть, когда мы добавляем кнопку в статью. Данный id является уникальным на странице и используется только один раз. Поэтому в полной новости подобных проблем с виджетами не возникает.

А когда мы пытаемся добавить тот же виджет на главную страницу сайта. То получается, что данная кнопка присваивается к каждой ссылке на полную статью. Тем самым у нас получается не одна кнопка на странице и соответственно id, который в полной записи уникален. Здесь теряет свою уникальность. И именно по этой причине все кнопки выстраиваются в ряд, так как id виджета в каждом анонсе одинаков. А согласно документации виджета id должен быть уникален. То есть разный для каждого анонса.

Комментарии Вконтакте и кнопка «Мне нравится» на главной странице DLE: Решение проблемы.

Решение данной проблемы довольно простое. Достаточно просто каждому блока назначить уникальный id. Но обо всем по порядку.

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

Как добавить кнопку Мне нравится Вконтакте в blogger?

Затем, необходимо подтвердить действие. Для этого, нужно ввести код, который придет в виде смс на телефон. Чтобы получить код, просто жмем на кнопку «Получить код».

Как добавить кнопку Мне нравится Вконтакте в blogger?

После отправки кода, сайт будет подключен к API Вконтакте. Кроме того, мы можем настроить наше подключение, если есть такая необходимость.

Теперь, переходим на страницу с виджетами Вконтакте, то есть сюда. И выбираем виджет, который хотим внедрить на сайт. Например, кнопка «Мне нравится».

Выбираем сайт, который только что подключили. Настраиваем внешний вид кнопки. И копируем первую часть кода, которую необходимо вставить между тегами <head> и </head>. Она находится между:

1
<!-- Put this script tag to the <head> of your page -->

И

1
<!-- Put this div tag to the place, where the Like block will be -->

Комментарии Вконтакте и кнопка "Мне нравится" на главной DLE: Решение проблемы.

Теперь, переходим в админку DLE. Выбираем «Список всех разделов». После чего, выбираем раздел «Шаблоны сайта». В левой колонке находим файл main.tpl и жмем на него. После этого, в правой колонке должен появиться код главной страницы сайта DLE. Вставляем, скопированный код между тегами <head> и </head>. Например, непосредственно перед закрывающим тегом </head>

[box_green]Эти действия можно совершать не только в админке сайта. Но и используя ftp-клиент FileZilla и текстовый редактор NotePad. Но это кому как удобно :-)[/box_green]

Комментарии Вконтакте и кнопка "Мне нравится" на главной DLE: Решение проблемы.

Сохраняем файл и переходим ко второй части добавления виджета на сайт DLE.

Теперь, копируем вторую часть кода виджета. Которая находится после:

1
<!-- Put this div tag to the place, where the Like block will be -->

Комментарии Вконтакте и кнопка "Мне нравится" на главной DLE: Решение проблемы.

В админке DLE, в разделе «Шаблоны сайта» выбираем файл shortstory.tpl, который отвечает за вывод анонса новости на сайте. И вставляем скопированный код в нужное место. Куда именно я не могу сказать, так как все зависит от ваших потребностей. Поэтому, поэкспериментируйте с необходимым местом для кнопки. Я, в данном примере, вставлю кнопку непосредственно в теле самого анонса. То есть, после {short-story}.

В этот момент и появляется проблема с выводом виджета Вконтакте. То есть размножение кнопки. Перейдем непосредственно к решению данной проблемы.

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

Если заглянуть в документацию движка DLE. То можно заметить, что для идентификации статей движок просто присваивает каждой статье уникальный номер, используя тег {news-id}. Чем мы и можем воспользоваться, для решения нашей проблемы.

Во второй части кода, вместе с идентификатором vk_like, мы воспользуемся {news-id}. После чего id блока с кнопкой станет уникальным для каждой статьи. Для этого, код:

1
2
3
4
<div id="vk_like"></div>
<script type="text/javascript">
VK.Widgets.Like("vk_like", {type: "button"});
</script>

Поправим так, чтобы он стал выглядеть так:

1
2
3
4
<div id="vk_like-{news-id}"></div>
<script type="text/javascript">
VK.Widgets.Like("vk_like-{news-id}", {type: "button"});
</script>

После чего, каждому блоку с кнопкой будет присваиваться уникальный id, за счет номера новости, который будет добавляться в конце. И кнопка будет находиться там, где нужно. То есть у каждой статьи DLE будет своя кнопка «Мне нравится».

Комментарии Вконтакте и кнопка "Мне нравится" на главной странице DLE: Решение проблемы.

Что касается комментариев Вконтакте на главной странице сайта DLE. То нужно проделать точно такие же действия, что и с кнопкой. Отличаться будет только название блока виджета. То есть не vk_like, а vk_comments.

Вот такой не хитрый способ решения проблемы. На этом у меня все. Если остались вопросы, задавайте в комментариях.

Удачи!

Видеокурс "Технические секреты групп Вконтакте" доступен для скачивания!

Не получается сделать меню в группе Вконтакте? Устали платить другим за добавление меню в Вашу группу? Хотели бы научится всем техническим тонкостям и экономить свои деньги? Тогда скачайте курс прямо сейчас!

VN:F [1.9.22_1171]
Оценка статьи: 9.0/10 (4 голосов)
Автор: Михаил Веб Дата публикации: 24.04.2013