<--
-->

добавление кнопок социальных сетей и комментариев Вконтакте api без использования плагинов wordpress

Опубликовано 23 Ноя 2012. В рубриках: wordpress, программирование. Просмотров: 2 300.

Хочется добавить кнопки для социальных сетей «поделиться» (вконтакте,  одноклассники, гугл+ и т.д.), использовать чьи то плагины не хочется — поэтому будем что то придумывать сами.

Не умея (пока ещё) писать плагины, но умея редактировать темы и разбираясь в php коде, будем всё это встраивать в код темы.

Для добавления кнопок «Поделиться в соц. сетях» был выбран сервис яндекса http://api.yandex.ru/share/. Даже регистрация на яндексе не нужна.  Выбираем понравившиеся соц. сети и внешний вид блока.  Появляется код для вставки, который пока оставим.

Получение кода кнопки поделиться Яндекс

Получение кода кнопки поделиться Яндекс

Дальше переходим к Вконтакте. (для незарегистрированных — нужно зарегистрироваться 🙂 ). Для комментирования наших записей нужно создать новое приложение типа «сайт». Переходим по ссылке http://vk.com/developers.php?oid=-1&p=Comments

Регистрация сайта Вконтакте api

Регистрация сайта Вконтакте api

Заполняем необходимые поля, получаем код для вставки комментариев на сайт. (заметка: когда я сегодня проделывал этот манёвр в коде было apiId: nikmih.ru  и соответственно ничего не работало, поэтому проверьте чтобы apiId: xxxxxxx было числом)

Получение кода для вставки комментирования Вконтакте api

Получение кода для вставки комментирования Вконтакте api

Все преимущества виджета для комментариев ВКонтакте (спойлер)

1. Масштаб. Необходимость регистрации является дополнительной преградой при оставлении комментария, в результате чего общение часто приобретает анонимный или ограниченный характер. ВКонтакте зарегистрированы практически все пользователи Рунета, поэтому любой читатель сможет сразу прокомментировать Ваш материал от своего настоящего имени – с фотографией и ссылкой на подробную информацию о себе.

2. Вирусность. Каждый комментарий, оставленный через виджет, может автоматически транслироваться на страницу прокомментировавшего, а также попадает в Новости для его друзей. Такой комментарий всегда содержит ссылку на исходную статью. В результате о комментарии и существовании статьи узнают друзья комментатора, которые смогут присоединиться к дискуссии. Об их комментариях в свою очередь будут оповещены уже их друзья – и так далее. Дальше информация может распространяться лавинообразно.

3. Многомерность. Виджет ВКонтакте предусматривает возможность ответа на комментарии, причем ответы одновременно появляются как на странице статьи, так и на странице автора комментария, а также в новостях у его друзей. Автоматическая синхронизация ответов на комментарии приводит к тому, что Ваш материал обсуждается сразу на нескольких площадках, каждая из которых приносит внимание новых пользователей к исходной статье.

4. Скорость. В отличие от других возможностей социализации, виджет ВКонтакте очень прост в установке и может быть внедрен на все страницы Вашего сайта в течение 5 минут. Для достижения высокой скорости установки и работы виджета мы применили новейшие технологии и задействовали десятки наиболее мощных серверов ВКонтакте.

5. Контроль. Администратор сайта, устанавливающий код виджета, имеет возможность модерировать дискуссию прямо со страниц своего ресурса, удаляя нежелательные комментарии. Администратор также может назначать любое количество дополнительных модераторов, которые смогут обеспечивать порядок через удобный интерфейс.

6. Цитируемость. Каждый комментарий может становиться статусом пользователя ВКонтакте и содержит ссылку на Ваш ресурс. Комментарий появляется не только в новостях у друзей пользователя, но и в поиске по статусам ВКонтакте. Благодаря партнерству между ВКонтакте и Яндексом данные статусы в течение месяца будут индексироваться в поиске Яндекса в режиме реального времени, что станет источником дополнительной посещаемости для сайтов, разместивших виджет.

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

8. Гибкость. Предложив ряд уникальных преимуществ, мы постарались сделать виджет комментариев максимально привлекательным для администраторов и пользователей сайтов. Однако мы понимаем, что российские новостные и развлекательные ресурсы могут нуждаться в дополнительных возможностях настройки виджета. Мы всегда готовы пойти навстречу владельцам сайтов. Для реализации конкретных интересных предложений, пожалуйста, обращайтесь в нашу пресс-службу press@vkontakte.ru.

свернуть

Всё оба кода у нас есть. Как бонус можно приделать ещё и кнопочку «лайка» по ссылка  http://vk.com/developers.php?oid=-1&p=Like

Получение кода для вставки лайка Вконтакте api

Получение кода для вставки лайка Вконтакте api

Сейчас переходим к редактированию шаблона сайта.

В моём шаблоне есть два файла functions.php и single.php. Первый содержит код функций, используемых шаблоном, второй каркас страницы используемой для вывода одиночной записи блога. Они то нам и нужны… 🙂

Открываем в редакторе single.php и ищем вызов вывода штатных комментариев

1
<?php comments_template(); ?>

закомментируем её и после добавим вызов своей функции для вывода комментариев с  Вконтакте. (кто хочет оставить штатное комментирование — могут не отключать comments_template() )

1
<?php comments_template_my(); ?>

Сохраняем. Переходим к редактированию single.php.  Добавим в него функцию которую описали выше.

1
2
3
4
5
function comments_template_nikmih()
{
add_social_buttons();
add_vkontakte_comment();
}

И код этих функций, полученный в первых шагах.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
function add_vkontakte_comment()
{
?>
<script src="http://userapi.com/js/api/openapi.js" type="text/javascript" charset="windows-1251"></script>

<script type="text/javascript">
VK.init({apiId: ваш_id, onlyWidgets: true});
</script>

<div id="vk_like"></div>
<script type="text/javascript">
VK.Widgets.Like("vk_like", {type: "full"});
</script>

<br>

<div id="vk_comments"></div>
<script type="text/javascript">
VK.Widgets.Comments("vk_comments", {limit: 10, attach: "*"});
</script>

<?php
}

function add_social_buttons()
{
?>
<script type="text/javascript" src="//yandex.st/share/share.js" charset="utf-8"></script>
<div data-yashareL10n="ru" data-yashareType="link" data-yashareQuickServices="vkontakte,odnoklassniki,moimir,yaru,facebook,twitter,lj,gplus"></div>
<br>
<?php
}

Примечания:

  • в VK.init специально убран параметр width, чтобы окно было по ширине страницы (кому — как).
  • порядок вывода штатных комментариев, комментариев Вконтакте, кнопок соц. сетей устанавливается порядком вызова соответствующих функций.

Читайте также: