Мультимедийные фишки для вашего интернет бизнеса

Приветствую.

Ух, наверное в этом посте будет большое количество кода, но, поверьте мне, оно того стоит.

Я часто посещаю блоги различных блогеров, известных и не очень, и вижу у них виджеты комментариев от социальных сетей Вконтакте и Facebook. Да и у вас, наверное такие виджеты есть.

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

При таком расположении виджетов страница блога растягивается на “километры”, что очень сильно затрудняет доступ к основным комментариям. А это “не есть ГУД”.

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

Вот так:

Как вы видите на одной вкладке виджета комментарии от Вконтакте, на другой от FaceBook (возможно вы заметили, что в комментариях от FaceBook присутствует “Интерфейс модератора”, я расскажу вам как это можно сделать).

Удобно? Не правда ли?

Итак, начнем.

Создание виджета со вкладками

Создавать виджет со вкладкми мы будем простым добавлением трех элементов кода к нашему блогу.

В примерах я ставлю комментарии вконтакте на сайт wordpress. Думаю для других движков процедура аналогична.

1. Вставьте приведенный ниже код между тегами HEAD/HEAD (в вордпресс вы можете найти этот тег в файле header.php)

<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

<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)

<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. Заполняем все необходимые поля

3. Копируем верхнюю часть кода и вставляем ее между тегами HEAD/HEAD

4. Копируем нижнюю часть кода и вставляем ее в первое поле созданного ранее виджета со вкладками

Таки образом код вывода комментариев должен выглядеть так:

<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. Нажимаем кнопку “Создать новое приложение”

3. Придумываем имя приложения, соглашаемся с условиями использования, нажимаем кнопку “Продолжить”

4. Вводим проверочный код, нажимаем кнопку “Отправить”

5. Вводим номер своего телефона , после получения проверочного кода вставляем его в необходимое поле

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

7. Внизу страницы нажмите на поле “Сайт” и введите адрес своего сайта

8. Нажмите кнопку “Сохранить изменения”

9. Теперь переходим по этой ссылке – http://developers.facebook.com/docs/reference/plugins/comments/

10. Заполняем все необходимые поля, нажимаем кнопку “Get Code”

11. Копируем код из первого поля и вставляем его в блог между тегами BODY/BODY

12. Копируем код из второго поля и вставляем его во второе поля созданного ранее виджета со вкладками.

Ваш код должен выглядеть так:

<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, то вносим в коде еще одно изменение. Вместо адреса вашего сайта вставляем строчку –

<?php the_permalink(); ?>

Теперь ваш код должен выглядеть так

<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>

Ну вот в принципе и все, теперь на вашем блоге установлена красивая форма комментариев от социальных сетей.

Понравилась статья? Впереди еще много интересной информации, так, что подписывайтесь на RSS ленту, а также на мой канал на YOUTUBE.

Если вы не смогли установить комментарии себе на блог, то смотрите видео инструкцию.

ВИДЕО ВЕРСИЯ ПОСТА