
В большинстве случаев блогеры размещают форму комментариев вконтакте и facebook в таком виде:

В этом посте я покажу вам как сделать “скомбинированные” комментарии от Вконтакте и FaceBook, которые будут занимать минимальное место на странице и при этом будут легкодоступны.
Вот так:


Удобно? Не правда ли?
Итак, начнем.
Создание виджета со вкладками
Создавать виджет со вкладкми мы будем простым добавлением трех элементов кода к нашему блогу.
В примерах я ставлю комментарии вконтакте на сайт wordpress. Думаю для других движков процедура аналогична.
1. Вставьте приведенный ниже код между тегами HEAD/HEAD (в вордпресс вы можете найти этот тег в файле header.php)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<style type="text/css"> body {background:#fff;color:#000;font-family:sans-serif;line-height:1.6;} #page {width:70%;margin:10px auto;} .tabs {width:100%;overflow:hidden;font-size:0.9em;margin:2em 0;zoom:1;padding:1px;position:relative;} .tabs dt {float:left;line-height:2;height:2em;background:#e8f0f5;border:1px solid #e8f0f5;border-bottom:0;padding:0 1em;position:relative;left:35px;margin-right:1px;cursor:pointer; -webkit-border-top-left-radius:10px; -webkit-border-top-right-radius:10px; -moz-border-radius-topleft:10px; -moz-border-radius-topright:10px;} .tabs dt:hover {background-color:#bfdff4;} .tabs dt.selected {border-color:#b0d0e9;background:#fff;z-index:3;cursor:auto;} .tabs dd {background:#fff;display:none;float:right;width:100%;margin:2em 0 0 -100%;position:relative;z-index:2;} .tabs dd.selected {display:block;} .tabs .tab-content {border:1px solid #b0d0e9;padding:20px; -webkit-border-radius:20px; -moz-border-radius:20px;} </style> |
Этот код еще можно вставить в файл style.css, но я решил, что мы обойдемся бес сложностей.
2. Теперь подключаем скрипт. Вставьте приведенный ниже код между тегами HEAD/HEAD
1 2 3 4 5 6 7 8 9 10 |
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> <script type="text/javascript"> $(function(){ $('dl.tabs dt').click(function(){ $(this) .siblings().removeClass('selected').end() .next('dd').andSelf().addClass('selected'); }); }); </script> |
3. Теперь осталось только добавить на страницу саму форму. Делается это нижеприведенным кодом (данный код вставьте туда где бы вы хотели выводить комментарии от соц. сете, например я вставил свой код в файл single.php)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<dl class="tabs"> <dt class="selected">ВКонтакте</dt> <dd class="selected"> <div class="tab-content"> Код комментариев Вконтакте </div> </dd> <dt>FaceBook</dt> <dd> <div class="tab-content"> Код комментариев FaceBook </div> </dd> </dl> |
У вас должна получиться пустая форма.

Добавление комментариев от Вконтакте
1. Переходим по этой ссылке – http://vkontakte.ru/developers.php?oid=-1&p=Comments
2. Заполняем все необходимые поля



1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
<dl class="tabs"> <dt class="selected">ВКонтакте</dt> <dd class="selected"> <div class="tab-content"> <div id="vk_comments"></div> <script type="text/javascript"> VK.Widgets.Comments("vk_comments", {limit: 10, width: "692", attach: "graffiti,photo,audio"}); </script> </div> </dd> <dt>FaceBook</dt> <dd> <div class="tab-content"> Код комментариев FaceBook </div> </dd> </dl> |
Добавление комментариев от FaceBook
Теперь давайте поставим на блог форму комментариев facebook. С комментариями от FaceBook немного сложнее. Перед тем как мы будем устанавливать код выполните вход в свой профиль на FaceBook.
1. Переходим на страницу разработчиков в FaceBook – http://www.facebook.com/developers
2. Нажимаем кнопку “Создать новое приложение”


5. Вводим номер своего телефона , после получения проверочного кода вставляем его в необходимое поле
6. После того как вы ввели проверочный код, вы попадете на страницу приложения. На этой странице ОБЯЗАТЕЛЬНО скопируйте ID приложения


9. Теперь переходим по этой ссылке – http://developers.facebook.com/docs/reference/plugins/comments/
10. Заполняем все необходимые поля, нажимаем кнопку “Get Code”


Ваш код должен выглядеть так:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
<dl class="tabs"> <dt class="selected">ВКонтакте</dt> <dd class="selected"> <div class="tab-content"> <div id="vk_comments"></div> <script type="text/javascript"> VK.Widgets.Comments("vk_comments", {limit: 10, width: "692", attach: "graffiti,photo,audio"}); </script> </div> </dd> <dt>FaceBook</dt> <dd> <div class="tab-content"> <div class="fb-comments" data-href="http://gavrilov.enterbook.ru>" data-num-posts="5" data-width="690"></div> </div> </dd> </dl> |
Если у вас блог на движке WordPress, то вносим в коде еще одно изменение. Вместо адреса вашего сайта вставляем строчку –
1 |
<?php the_permalink(); ?> |
Теперь ваш код должен выглядеть так
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
<dl class="tabs"> <dt class="selected">ВКонтакте</dt> <dd class="selected"> <div class="tab-content"> <div id="vk_comments"></div> <script type="text/javascript"> VK.Widgets.Comments("vk_comments", {limit: 10, width: "692", attach: "graffiti,photo,audio"}); </script> </div> </dd> <dt>FaceBook</dt> <dd> <div class="tab-content"> <div class="fb-comments" data-href="<?php the_permalink(); ?>" data-num-posts="5" data-width="690"></div> </div> </dd> </dl> |
Ну вот в принципе и все, теперь на вашем блоге установлена красивая форма комментариев от социальных сетей.
Источник: http://gavrilov.enterbook.ru