Самым простым решением является использование варианта в форме комментария.
С другой стороны, у ряда крупных социальных сетей есть возможность устанавливать виджеты отзывов на сторонний сайт. Объединить обе формы комментариев мне не удалось, а вот совместить их вполне возможно. Результат моих изысканий вы можете посмотреть в Приложении 1.
Содержание.
- Кнопка скрыть/показать.
- Как добавить комментарии "В Контакте" на блог.
- Как добавить комментарии "Facebook" на блог.
Кнопка скрыть/показать.
Перед установкой сторонних комментариев нужно создать кнопку "скрыть/показать" для существующей формы отзывов. Здесь я предлагаю внести пару изменений.
В пункте "Шаг. 4" использовать код:
<button onclick='new Effect.toggle("poyavlyayushchiesya","appear"); return false' type='submit'><b:if cond='data:post.numComments == 0'>
<h4>Нет комментариев.</h4>
<b:else/><h4>
<b:if cond='data:post.numComments > 20'>
<data:post.numComments/> <script>
if(<data:post.numComments/> / 10 % 10 == 1) document.write("комментариев"); else
switch(<data:post.numComments/> % 10){
case 1: document.write("комментарий"); break;
case 2:
case 3:
case 4: document.write("комментария"); break;
default: document.write("комментариев");
}
</script><noscript><data:commentLabelPlural/></noscript>
<b:else/>
<b:if cond='data:post.numComments == 1'>
<data:post.numComments/> комментарий
<b:else/>
<b:if cond='data:post.numComments < 5'>
<data:post.numComments/> комментария
<b:else/>
<data:post.numComments/> комментариев
</b:if></b:if></b:if></h4></b:if></button>
Для того, чтобы за кнопкой скрывалась и форма отправки комментария, увеличиваем область действия тега DIV в пункте "Шаг. 5".
<b:includable id='comments' var='post'>
..........
<div id='poyavlyayushchiesya' style='display: none;'>
<b:if cond='data:post.commentPagingRequired'>
<span class='paging-control-container'>
..........
</span>
</b:if>
..........
<p class='comment-footer'>
..........
</p>
</div>
..........
</b:includable>
Как добавить комментарии "В Контакте" на блог.
Шаг 1. Как узнать свой API_ID.
- Заходим на страницу "Создать приложение".
- Заполняем данные графы: "Название" и "Тип"-"Веб-сайт".
- Жмём кнопку "Перейти к загрузке приложения".
- На вкладке "Редактирование"-"Настройки" заполняем строчки "Адрес сайта" и "Базовый домен".
- Там же указан ID приложения. Или его можно узнать из строки браузера: http://vkontakte.ru/apps.php?act=edit&id=0000000. Нули это и есть ваш номер API_ID.
 |
| Узнать свой API_ID В Контекте. |
Шаг 2. Заполнение формы виджета.
На странице "Виджет для комментариев" указан код для вставки.
 |
| Код добавления виджета "В Контакте". |
После
<head>пишем:
<script src="http://userapi.com/js/api/openapi.js?20" type="text/javascript"></script>После кода:
<h4>
<b:if cond='data:post.numComments == 1'>
1 <data:commentLabel/>:
<b:else/>
<data:post.numComments/> <data:commentLabelPlural/>:
</b:if>
</h4>указываем:<script type='text/javascript'>
VK.init({apiId: API_ID, onlyWidgets: true});
</script>
<button onclick='new Effect.toggle("poyavlyayushchiesya_kontact","appear"); return false' type='submit'><h4><span style='font-family: tahoma, arial, verdana, sans-serif, Lucida Sans; font-weight: bold; color:#45688E; '><img src='http://vkontakte.ru/images/widget_logo.gif'/> Комментарии</span></h4></button>
<div id='poyavlyayushchiesya_kontact' style='display: none;'>
<div id='vk_comments'/>
<script type='text/javascript'>
VK.Widgets.Comments("vk_comments", {limit: 5, width: "480", attach: "*"});
</script></div>, где API_ID - это ваш идентификационный номер. Как его узнать рассказано выше.в тег <button>...</button> включены код изображения (
) и слово "Комментарии". Это содержимое кнопки, их вы можете поменять на свой вкус.в тег <div id='poyavlyayushchiesya_kontact' style='display: none;'>...</div> включен скрипт формы отзывов "В Контекте", чтобы данный блок исчезал/появлялся.
 |
| Как добавить комментарии "В Контакте" на блог Blogger. |
Как добавить комментарии "Facebook" на блог.
- На странице "Comments" заполняем форму.
- Нажав на кнопку "Get code", копируем полученный код.
- Первую часть которого
<div id="fb-root"></div><script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script>
вносим в шаблон Blogger на вкладке "Дизайн"-"Изменить HTML" сразу после<body>
в некоторых шаблонах код может выглядить иначе, например:
<body expr:class='"loading" + data:blog.mobileClass'>:
- Во второй части
<fb:comments href="http://shpargalkablog.ru/" num_posts="10" width="500"></fb:comments>
адрес блога href="http://shpargalkablog.ru/" заменяем на переменное значение
<fb:comments expr:href='data:post.url' num_posts="10" width="500"></fb:comments>
Если нужно добиться выплывающего эффекта, то окончательный вид будет следующим:
<button onclick='new Effect.toggle("poyavlyayushchiesya_facebook","appear"); return false' type='submit'><h4><span style='font-family: tahoma, arial, verdana, sans-serif, Lucida Sans; font-weight: bold; color:#45688E; '><img src='http:https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjVooVsKlpxd8pWY0PsacJja0msT8gElKcrYKSi4lKpBUjs89GqKwQlKPftj8GExtf7p6h4hk55NCMGHEjMYfLe1UWrD3Gilg_wwrwi20Fr0cmoNloAwDQW-jXv0NriN3SoigWQ4SwjDEAm/s1600/facebook.png'/> Комментарии</span></h4></button> <div id='poyavlyayushchiesya_facebook' style='display: none;'><fb:comments expr:href='data:post.url' num_posts="10" width="500"></fb:comments></div>
Скорректированный код добавляем после
<h4> <b:if cond='data:post.numComments == 1'> 1 <data:commentLabel/>: <b:else/> <data:post.numComments/> <data:commentLabelPlural/>: </b:if> </h4>
- И, последнее. Указываем перед </head> с помощью мета-тегов администратора комментариев
<meta property="fb:app_id" content="{YOUR_APPLICATION_ID}"/>- Обязательно добавить слэш (символ /).
- Для того, чтобы узнать {YOUR_APPLICATION_ID} переходим на эту страницу.
- Кнопка справа сверху "Создать новое приложение".
Здесь могут попросить подтверждение на телефон. Отправляем номер и несколько часов ждём смс с подтверждающим кодом.
Отправить комментарий