Внимание! Чтобы просмотреть виджеты от ВКонтакте читайте первую часть.
Итак решил создать новую тему по поводу виджетов от социальных сетей.
ВКонтакте: https://forum.mybb.ru/viewtopic.php?id=31719

Одноклассники
Виджеты которые предоставляет эта социальная сеть:

1. Авторизация через страницу на Одноклассниках
Я описать не смогу пробуйте сами: http://dev.odnoklassniki.ru/wiki/pages/ … d=12878032

2.Социальные виджеты
Как видно из описания если этот код вставить в место на форуме где поддерживается HTML.
Ну приступим.
1. Способ. Любительский
Берем например этот код:

<div id="ok_group_widget"></div>
<script>
!function (d, id, did, st) {
  var js = d.createElement("script");
  js.src = "http://connect.ok.ru/connect.js";
  js.onload = js.onreadystatechange = function () {
  if (!this.readyState || this.readyState == "loaded" || this.readyState == "complete") {
    if (!this.executed) {
      this.executed = true;
      setTimeout(function () {
        OK.CONNECT.insertGroupWidget(id,did,st);
      }, 0);
    }
  }}
  d.documentElement.appendChild(js);
}(document,"ok_group_widget","50582132228315","{width:250,height:335}");
</script>

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

Как получить ID своей группы:
1. Вы должны быть администратором группы.
2. Зайдите в свою группу.
3. Слева под аватаркой группы в меню есть опция "изменить настройки". Выберите ее.
4. Внизу открывшейся страницы, найдите надпись "ID этой группы на Одноклассниках:".
5. Скопируйте указанное ID, и подставьте в код встраивания виджета.

2.Способ. Простой и для новичков.
http://dev.odnoklassniki.ru/wiki/pages/ … d=20676726 - заходим сюда и настраиваем в окошке все как хотим.

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

Дальше Кнопка Класс. Про нее вы наверное знаете, повторятся не буду.
Способ только один. Через визуальный настройщик
Пример базового кода:

<div id="ok_shareWidget"></div>
<script>
!function (d, id, did, st) {
  var js = d.createElement("script");
  js.src = "http://connect.ok.ru/connect.js";
  js.onload = js.onreadystatechange = function () {
  if (!this.readyState || this.readyState == "loaded" || this.readyState == "complete") {
    if (!this.executed) {
      this.executed = true;
      setTimeout(function () {
        OK.CONNECT.insertShareWidget(id,did,st);
      }, 0);
    }
  }};
  d.documentElement.appendChild(js);
}(document,"ok_shareWidget","http://dev.ok.ru","{width:125,height:25,st:'oval',sz:12,ck:1}");
</script>

Но можно отредактировать ширину(width) и высоту(height) кнопки(в px разумеется), а также url своего сайта. 
Также на заметку - название ссылки скрипт берет из тега title а описание из meta-тега description
На этом у Одноклассников все. Переходим к...

FaceBook
Что есть у Fac"а: 

Щелкайте по названиям, я не могу рассказать, все на английском. Но там по-моему все и так понятно, без знания английского.

Twitter
Напоследок Твиттер...

Также щелкаем и смотрим.

Share от Яндекс и кнопки от сервиса "Plus"
Для того чтобы собрать все "Мне нравиться" "Класс" "Твитнуть" и т.д.
Можно воспользоваться двумя сервисами Яндекс.API. и сервисом Pluso
С Яндексом все понятно (надеюсь)

[b]Базовый код:[/b] 
<script type="text/javascript" src="//yandex.st/share/share.js"
charset="utf-8"></script>
<div class="yashare-auto-init" data-yashareL10n="ru"
 data-yashareType="button" data-yashareQuickServices="yaru,vkontakte,facebook,twitter,odnoklassniki,moimir"

></div>

А сервис Pluso стоит поподробнее рассмотреть: (ноу реклама я о нем только сегодня узнал)

<script type="text/javascript">(function() {
  if (window.pluso) if (typeof window.pluso.start == "function") return;
  var d = document, s = d.createElement('script'), g = 'getElementsByTagName';
  s.type = 'text/javascript'; s.charset='UTF-8'; s.async = true;
  s.src = ('https:' == window.location.protocol ? 'https' : 'http')  + '://share.pluso.ru/pluso-like.js';
  var h=d[g]('head')[0] || d[g]('body')[0];
  h.appendChild(s);
})()
</script>
<div class="pluso" data-background="#ebebeb" data-options="big,square,line,horizontal,counter,theme=04" data-services="vkontakte,odnoklassniki,facebook,twitter,google,moimir,email,print"></div>

Вверху это базовый код.
--
А что вообще там можно:
Сделать кнопки БОЛЬШИМИ, СрЕдНиМи, и маленькими.
Мне понравилось что можно сделать фон под кнопки, сделать их круглыми, и вертикальными (как лестница)
Так-же можно со счетчиком и без (резуьтат от всех соц.сетей суммируется) в одну и две строки.

Ну думаю все.
Просмотреть в действии:
Одноклассники: (и виджет и кнопка) http://corp.mybb.ru/
Pluso: (маленькие кнопки с фоном и без счетчика) http://es.sybb.ru/ (это короткий адрес с него перенаправит на основную версию)

Гость,надеюсь тебе это поможет!