2 виджета комментариев социальных сетей в одной форме

Для чего нужны формы социальных комментариев на блоге?commentarii

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

Ну и наконец, это один из многих способов раскрутки и продвижения сайта.  Не всем нравиться заполнять обычную форму, вводя свои данные. Это относится скорее к тем посетителям, которые не имеют своих сайтов, а пользуются только социальными сетями. Давно собиралась установить формы социальных комментариев на блоге. И вот сегодня наконец-то «дошли» руки и до комментариев. У многих на блогах есть виджеты от ВКонтакте, или Facebook. Такими формами уже никого не удивишь, но если устанавливать виджеты от двух социальных сетей, да плюс еще стандартная форма комментарий, то получается слишком много форм.

А устанавливая форму одной соц. сети, теряются комментарии от другой, а значит и потенциальные посетители, которые могли бы прийти на блог по комментариям. Что же делать? А выход есть, можно установить два виджета комментариев в одной форме. Так сказать два в одном! Они занимают мало места, и пользователи смогут самостоятельно выбрать, в какой из социальных сетей отобразиться их комментарий. Обычным переключением кнопок сверху формы.

Удобно и красиво. Решила сразу описать все свои действия. Во-первых, это может пригодиться Вам, а во-вторых, для себя.  Ведь при смене темы придется все делать заново, и нужно, чтобы пошаговое описание было под рукой. Итак приступим.

commentariiДля начала нужно подготовить все коды, для вставки на блог.

Установка виджетов социальных сетей на блог

Чтобы не копаться в редакторе, по десять раз добавляя куски кода в основной код файлов на блоге, и сохраняя это безобразие, нужно сразу подготовить готовые коды для вставки в файлы на сайт.

Для этого открываем любой текстовый редактор (я пользовалась Notepad++),

копируем туда вот этот код и скрипт:-

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

 Здесь Вставим первую часть кода ВКонтакте

Оставляем свободное место, для добавления первой части кода виджета из ВКонтакта. Сразу хочу посоветовать, измерьте ширину вашего текстового пространства, то есть место, от начала странички, до сайтбара (боковой колонки). Чтобы точно знать, какую ширину формы указывать при создании виджетов.

Я измеряла ширину страницы при помощи экранной линейки (программа FastStone Capture). Ширина моей страницы 700 пикселей. Значит мне нужно делать форму комментарий чуть меньше, я взяла для внешнего размера формы ширину 600 пикселей. Это значение нужно указать в коде. Смотрим 4 строчку сверху↑ вот как она выглядит:

.tabs {width:100%;overflow:hidden;font-size:0.9em;margin:2em 

В этой строчке значение 100% поменяла на 600 пикселей, получилось так:

.tabs {width:”600”;overflow:hidden;font-size:0.9em;margin:2em 

У Вас может быть другое значение (меньше или больше). Можно попробовать оставить как есть, ничего не меняя, но у меня при значении100%, форма разъезжалась на всю страницу, выталкивая боковую колонку в подвал. А как только значение поменяла, все встало на свои места. Размещаем в блокноте (через отступ) второй код который нужно будет дополнить.

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

Теперь идем собирать недостающие части кодов на Facebook и ВКонтакт. Начнем пожалуй с ВКонтакта:-

http://vk.com/developers.php?oid=-1&p=Comments

переходим по ссылке, заполняем все поля. forma_commentarija

Ширину формы ставьте на 50 пикселей меньше, чем указали в коде, так как это будет ширина внутренней формы. То есть если я в верхнем коде указала ширину «600», то в форме для ВКонтакте ставлю «550». Когда все поля заполнили, аккуратно копируйте верхнюю часть кода.Вставляем её сразу после первого кода, (где Вы оставили место).forma_commentarija

forma_commentarija

Копируем вторую часть кода и вставляем её во второй код, вместо слов «Код комментариев ВКонтакте (2 часть)», аккуратно удаляйте эту надпись, и вставляйте код. Теперь пора прогуляться на Facebook. Переходим на страницу разработчиков в FaceBook – http://www.facebook.com/developers

жмем «приложения» — «создать  новое приложение». forma_commentarija

forma_commentarija

Придумайте и впишите название приложения, «продолжить». Вводим проверочный код, «отправить», номер телефона, ждем смс, вводим код. Попадаем на страницу приложения. Записываем свое ID. Это значение Вам не раз ещё понадобиться, так, что запишите его, и сохраните так, чтобы оно было под рукой. В графе «сайт», вводите адрес сайта, жмете «сохранить». Дальше идем сюда:-

http://developers.facebook.com/docs/reference/plugins/comments/

Заполняйте таблицу,commentarii_fecebook

адрес сайта, количество комментариев,  размер ставьте такой же, как ВКонтакте. У меня «550». Жмем «получить код».

commentarii_fecebook

Копируем код №2, и вставляем его во вторую формулу вместо слов: «Код комментариев в Facebook (2 часть)». Первую часть кода скопируем чуть позже. Вот теперь можно идти в «редактор».

Заходим в административную панель WordPres сайта «внешний вид» — «редактор», Открываем «Заголовок» файл header.php. Перед закрывающим тегом </head> вставляем все части нашего первого кода.  У меня он выглядит так:

<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:"600";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>
<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>
<script type="text/javascript" src="//vk.com/js/api/openapi.js?96"></script>

<script type="text/javascript">
 VK.init({apiId: 3502130, onlyWidgets: true});
</script>

У Вас последняя часть данного кода, взятая из контакта, будет с вашими данными. В этом же файле после тега <body> ( он идет сразу за тегом </head>), вставляем код №1 из окошка на Facebook. Я надеюсь Вы не закрыли эту вкладку?

Идем туда, копируем код №1, который мы ещё не копировали, вставляем после <body>, и жмем кнопку «обновить» файл. Теперь копируем второй сборный код нашей формы. У меня он выглядит так: —

<dl class="tabs">
<dt class="selected">ВКонтакте</dt>
<dd class="selected">
<div class="tab-content"><!-- 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: "550", attach: "*"});
</script></div>
</dd>
<dt>FaceBook</dt>
<dd>
<div class="tab-content"><div class="fb-comments" data-href="<!--?php the_permalink(); ?-->" data-width="550" data-num-posts="10"></div></div>
</dd>
</dl>

У Вас он будет с Вашими значениями, и Вашим адресом сайта. Вставляем код  туда, где Вы хотите поместить форму комментариев. Размещение данного кода зависит от вашей темы на блоге. В разных темах разные файлы. Можно разместить в файле single.php (Одна запись).

Но в моей теме удобнее было вставить этот код в Комментарии, файл comments.php. Перед основными комментариями. Сохраняем наши изменения и идем на сайт, любоваться формой комментариев! Описывать пришлось дольше, чем делать. Я думаю, у Вас все получится, если что не ясно, спрашивайте, возможно я не понятно объяснила, тогда после ваших вопросов, постараюсь дополнить описание более детально.

Жду Ваших отзывов. Буду безмерно благодарна, если Вы нажмете на кнопки социальных сетей, и поделитесь с друзьями. Может быть, им также пригодится эта информация. Подписывайтесь на блог «Создание и продвижение сайта. От чайника до профи», и вы первыми узнаете о выходе новых статей. Я стараюсь писать в блог только ту информацию, которая необходима для создания и продвижения сайтов.

С уважением, Ирина Баталова.

Ссылка на основную публикацию