• доступно о веб-разработке
14.03.2013 JavaScript, Wordpress, Технологии, Уроки

Интеграция социальных виджетов

Уважаемые участники проекта ДвижКод!

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

Сегодня мы поговорим об интеграции виджетов из социальных сетей.

Каждая социальная сеть имеет свой API, то есть Application Programming Interface. По-русски это звучит как Интерфейс Программирования Приложений или Эй-Пи-Ай.

Суть его в следующем. Вам предоставляется доступ к информации, хранящейся в социальной сети. Но доступ даётся не всем направо и налево, а тем, кто регистрирует внутри сети приложение и получается специальные ключи доступа.

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

Сейачас же мы поговорим о более простых вещах, которые доступны на уровне внедряемого JavaScript – виджеты.

Как, например, установить комментарии социальной сети ВКонтакте?

У каждого сервиса есть своя страничка — для разработчиков. Ссылка на неё обычно кроется в самом неприметном месте.

Пройдя на страницу, мы ищем на ней заветное слово — Виджеты:

Можно выбрать из списка любые интересующие вас виджеты:

В данном случае мы выбираем — комментарии для сайта.

Обратим внимание на то, что для многих движков, типа того же WordPress, в каталогах дополнений есть специальные плагины, типа vkcomments:

http://wordpress.org/extend/plugins/vkcomments/

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

Все преимущества того или иного виджета подробно описаны на его странице:

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

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

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

Прочитав полные интересных моментов тексты о полезности данных комментариев, переходим к форме получения кода:

Если у вас ещё нет ни одного сайта, то хотя бы один необходимо добавить в самый первый пункт:

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

Далее вы можете настроить комментарии так, как вам потребуется для конкретного сайта:

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

Следующего вида:

<!-- Put this script tag to the <head> of your page -->
<script type="text/javascript" src="//vk.com/js/api/openapi.js?82"></script>

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

<!-- Put this div tag to the place, where the Comments block will be -->
<div id="vk_comments"></div>
<script type="text/javascript">
VK.Widgets.Comments("vk_comments", {limit: 10, width: "496", attach: "*"});
</script>

В принципе, если вы читаете по-английски, то здесь всё написано, что необходимо сделать.

Вот этот кусочек ставим в общий шаблон (для WordPressheader.php):

<script type=»text/javascript» src=»//vk.com/js/api/openapi.js?82″></script>

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

Он нам пригодится и для других виджетов.

А вот этот — в шаблон поста в самый низ (для WordPress single.php):

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

Это уже установка дива для вывода комментариев и конкретный скрипт для его обработки.

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

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

Следующий урок — основные навыки по работе с Git.

Поделиться

Комментарии Правила дискуссии

Читайте ранее:
C 8-ым марта милых дам или как обуздать NetBeans!

httpv://www.youtube.com/watch?v=6I5SG9IZ1ag

Закрыть