Единый форум поддержки

Информация о пользователе

Привет, Гость! Войдите или зарегистрируйтесь.


Вы здесь » Единый форум поддержки » Вопросы по оформлению форума » Виджеты на форуме


Виджеты на форуме

Сообщений 1 страница 20 из 100

1

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

Виджеты для сайтов

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

    Сообщества
    Виджет тесно свяжет сайт с группой или официальной страницей ВКонтакте. В виджете отображаются новости сообщества или фотографии участников.

    «Мне нравится»
    Виджет позволит пользователям выразить отношение к статье одним кликом или поделиться ссылкой на неё с друзьями.

    Рекомендации
    Виджет позволит посетителям быстро найти самые популярные материалы на Вашем сайте. Используются данные виджета «Мне нравится».

    Опросы
    Виджет позволит организовать любое голосование на Вашем сайте и обеспечить вирусное распространение Вашего опроса по всему интернету.

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

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


ссылка - http://vk.com/developers.php?o=-1&p=Сайты

начнём например с виджета Комментарии, предполагается, что он даёт возможность незарегистрированному на форуме пользователю прокомментировать ту или иную статью, тем самым привлечь к статье и форуму в целом своих друзей,
заходим на страницу создания и настройки виджета - http://vk.com/developers.php?oid=-1&p=Comments
вписываем данные своего форума в форму
http://uploads.ru/i/7/T/I/7TIG1.png
при заполнении обратите внимание на пункт - Основной домен сайта рекомендую в конце отображаемого основного домена убрать лишний слэш /,
иначе вместо идентификатора форума может в коде быть просто apiId: API_ID

http://uploads.ru/i/w/z/P/wzPGk.png

после заполнения всех пунктов формы и нужных нам настроек жмём Сохранить
и получаем примерно вот такой код

Код:
<!-- 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: "*"});

в итоге всё выглядеть должно так
http://s1.uploads.ru/t/0MnrL.png

ПРИМЕР работы


на сайте с примером я применил 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>

+2

2

Romych
Мне нравится от Яндекса все в одном: http://api.yandex.ru/share/ - называется, выбирай какая нужна соцсеть и устанавливай..Удобно)) И код маленький))

+1

3

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

http://www.snapsnap.ru/i/20121019003227.png

http://www.snapsnap.ru/i/20121019003302.png

Отредактировано Геннадий Эдуардович (Пт, 19 Окт 2012 01:33:31)

0

4

Геннадий Эдуардович написал(а):

После установки вот так вообще тишина, нигде и ничего не отображается...


я же говорил что:

Romych написал(а):

виджеты подгружаются в div блоки

вы куда поместили <div id="vk_comments"></div> ?

у меня в моём примере, через скрипт он помещён аккурат перед формой ответа:

Код:
$('div#pun-viewtopic div.linksb').after('<div id="vk_comments"></div>');

там и отображается

0

5

http://www.snapsnap.ru/i/20121019085425.png

http://www.snapsnap.ru/i/20121019085734.png

http://www.snapsnap.ru/i/20121019085909.png

0

6

kolobdur74 написал(а):

Мне нравится от Яндекса все в одном: http://api.yandex.ru/share/ - называется, выбирай какая нужна соцсеть и устанавливай..Удобно)) И код маленький))

я тоже пользуюсь этим на своём основном форуме, только у виджета от вКонтакте фича "Мне нравится" отображает тех кому понравилось при наведении курсора
в этом то и принципиальное отличие
http://s1.uploads.ru/t/2AxY7.png

0

7

Геннадий Эдуардович
вы на каком форуме испытываете? в том который у вас в профиле в упор этих скриптов не вижу

0

8

http://www.snapsnap.ru/i/20121019092620.png

http://www.snapsnap.ru/i/20121019093005.png

Извините не доглядел, как гость вижу, может всё таки можно сделать под каждым постом комментарий...Заранее спасибо, с уважением... :writing:

Отредактировано Геннадий Эдуардович (Пт, 19 Окт 2012 10:35:17)

0

9

Геннадий Эдуардович написал(а):

может всё таки можно сделать под каждым постом комментарий..

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

вот ваш вариант:

Код:
<script type="text/javascript">
$('div#pun-viewtopic div.linksb').after('<div id="vk_comments"></div>');
VK.init({apiId: 3185341, onlyWidgets: true});
VK.Widgets.Comments("vk_comments", {limit: 5, width: "auto", attach: "*"});
</script>

+1

10

Romych написал(а):

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

вот ваш вариант:

Прошу прощения, благо сейчас меня не видят мои ученики, а то сгорел бы со стыда, благодарю, насчёт под каждым постом понял...Один вопрос, лимит 5 - это для одного участника или для всех желающих написать...

0

11

Romych написал(а):

я тоже пользуюсь этим на своём основном форуме, только у виджета от вКонтакте фича "Мне нравится" отображает тех кому понравилось при наведении курсора
в этом то и принципиальное отличие

Ага, мне по той же причине нравится от гугла родной))

0

12

Виджет для авторизации будет у нас работать? (не пашет, проверил)

Отредактировано BANNED (Пт, 19 Окт 2012 20:40:12)

0

13

Геннадий Эдуардович написал(а):

Один вопрос, лимит 5 - это для одного участника или для всех желающих написать...

из документации по виджету:

limit: количество комментариев на странице (целое число 5-100)

т.е. для всех пользователей

0

14

Romych написал(а):

т.е. для всех пользователей

Ясненько, спасибо Romych...Ещё одна просьба вы где-то выкладывали скрипт про Л.С. с аватаром не могли бы повторить сбросить его сюда...)))

0

15

Геннадий Эдуардович написал(а):

Ясненько, спасибо Romych...Ещё одна просьба вы где-то выкладывали скрипт про Л.С. с аватаром не могли бы повторить сбросить его сюда...)))

Система оповещения о личных сообщениях (NEW)

+1

16

Спасибо огромное... :cool:

0

17

вот интересная подробная статья про виджеты - http://b-red.ru/social-buttons

0

18

По умолчанию виджет показывается слева, а как сделать, чтобы был справа?

Код:
<script type="text/javascript" src="//vk.com/js/api/openapi.js?88"></script>

<!-- VK Widget -->
<div id="vk_subscribe"></div>
<script type="text/javascript">
VK.Widgets.Subscribe("vk_subscribe", {}, 99192045);
</script>

Отредактировано LandWaterSun (Ср, 17 Апр 2013 10:14:54)

0

19

По умолчанию виджет показывается слева, а как сделать, чтобы был справа?

http://s3.uploads.ru/GJz9o.png

0

20

<!-- VK Widget -->
<script type="text/javascript" src="//vk.com/js/api/openapi.js?88"></script>
<div  style="display:inline-block;float:right"><div id="vk_subscribe"></div></div>
<script type="text/javascript">VK.Widgets.Subscribe("vk_subscribe", {}, 99192045);</script>

Отредактировано Deff (Чт, 18 Апр 2013 14:58:42)

0


Вы здесь » Единый форум поддержки » Вопросы по оформлению форума » Виджеты на форуме