предлагаю в этой теме обсудить виджеты предлагаемые популярными соц.сетями и их применение на форумах,
я видел что вопросы по этой теме неоднократно возникали в разных местах ТП, поэтому делаю попытку все вопросы собрать в одной теме,
начнём с виджетов которые предлагает популярная социальная сеть ВКонтакте
список:
Виджеты для сайтов
Комментарии
Виджет предоставляет возможность за несколько минут установить на сайт полнофункциональный блок для комментирования.Сообщества
Виджет тесно свяжет сайт с группой или официальной страницей ВКонтакте. В виджете отображаются новости сообщества или фотографии участников.«Мне нравится»
Виджет позволит пользователям выразить отношение к статье одним кликом или поделиться ссылкой на неё с друзьями.Рекомендации
Виджет позволит посетителям быстро найти самые популярные материалы на Вашем сайте. Используются данные виджета «Мне нравится».Опросы
Виджет позволит организовать любое голосование на Вашем сайте и обеспечить вирусное распространение Вашего опроса по всему интернету.Авторизация
Виджет позволит пользователю авторизоваться при помощи кнопки «Войти через ВКонтакте» и покажет его друзей, которые заходили на Ваш сайт.Подписаться на автора
Виджет позволит посетителям Вашего сайта в один клик подписаться на заданного Вами пользователя или группу, а также легко поддерживать информацию об авторах на Вашем сайте в актуальном состоянии.
ссылка - http://vk.com/developers.php?o=-1&p=Сайты
начнём например с виджета Комментарии, предполагается, что он даёт возможность незарегистрированному на форуме пользователю прокомментировать ту или иную статью, тем самым привлечь к статье и форуму в целом своих друзей,
заходим на страницу создания и настройки виджета - http://vk.com/developers.php?oid=-1&p=Comments
вписываем данные своего форума в форму
при заполнении обратите внимание на пункт - Основной домен сайта рекомендую в конце отображаемого основного домена убрать лишний слэш /,
иначе вместо идентификатора форума может в коде быть просто apiId: API_ID
после заполнения всех пунктов формы и нужных нам настроек жмём Сохранить
и получаем примерно вот такой код
<!-- Put this script tag to the <head> of your page -->
<script type="text/javascript" src="http://userapi.com/js/api/openapi.js?49"></script>
<script type="text/javascript">
VK.init({apiId: 2949933, 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>давайте разберём его по пунктам, вот эта часть, из коментария видно что она должна находиться в голове (head) сайта
<!-- Put this script tag to the <head> of your page -->
<script type="text/javascript" src="http://userapi.com/js/api/openapi.js?49"></script>
комментарии нам не нужны, нам нужен только скрипт работы с виджетами, он для всех виджетов один и тот же, и при создании нового, он присутствует в выдаваемом коде, т.е. дублируется для каждого виджета, поэтому ставим его в html-верх нашего форума и больше не трогаем и не дублируем
далее в выданном нами коде присутствует скрипт
<script type="text/javascript">
VK.init({apiId: 2949933, onlyWidgets: true});
</script>
в данном скрипте нашему форуму присваивается идентификационный номер и активируется работа виджетов (при добавлении на этот же форум другого виджета этот номер будет так же дублироваться в выдаваемом коде, так что мы будем вычленять нужные строки из выдаваемого кода, чтоб избежать лишних дубликатов и путаницы) ставим скрипт в html-низ
так же рассмотрим в выданном нам коде строку отвечающую за настройки виджета комментариев
VK.Widgets.Comments("vk_comments", {limit: 10, width: "496", attach: "*"});
в этой строке такие параметры как ограничение отображаемых комментариев (например не больше 10)
так же ширина блока, в котором отображаются комментарии по теме и которое содержит само поле для комментария, лично я предпочёл сделать блок по ширине всего моего форума, поскольку я не в курсе у кого какое-разрешение экрана, так правильным считаю автоматическое растягивание блока на всю ширину
VK.Widgets.Comments("vk_comments", {limit: 10, width: "auto", attach: "*"});
в итоге всё выглядеть должно так
ПРИМЕР работы
на сайте с примером я применил 4 виджета от ВКонтакте это:
Комментарии, Сообщества, Опросы, «Мне нравится»
и я не стал плодить все выдаваемые скрипты от производителя, а только выделил нужные мне строки из них, и объединил под одним скриптом вот так:
<script type="text/javascript">
$('div#pun-viewtopic div.postlink').append('<div id="vk_like" style="top: -18px;"></div>');
$('div#pun-viewtopic div.linksb').after('<div id="vk_comments"></div>');
$('div.topic li.pa-fld2').append('<div id="vk_subscribe"></div>');
VK.init({apiId: 2940503, onlyWidgets: true});
VK.Widgets.Like("vk_like", {type: "mini"});
VK.Widgets.Poll("vk_poll", {width: "300"}, "35501112_8d9049fb01e39ed1f2");
VK.Widgets.Group("vk_groups", {mode: 0, width: "200", height: "290"}, 2561432);
VK.Widgets.Comments("vk_comments", {limit: 10, width: "auto", attach: "*"});
</script>в первых двух строках я разместил блоки от ВКонтакте у себя на форуме, там где мне это удобнее (виджеты подгружаются в div блоки)
<div id="vk_poll" align="center"></div> - опрос в Объявление форума на главной странице,
туда же и сообщество - <div id="vk_groups"></div>
блок "Мне нравится" в верху каждой темы - <div id="vk_like" style="top: -18px;"></div>
блок Комментарии под сообщениями - <div id="vk_comments"></div>
