Skip to content
 

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. Перед основными комментариями. Сохраняем наши изменения и идем на сайт, любоваться формой комментариев! Описывать пришлось дольше, чем делать. Я думаю, у Вас все получится, если что не ясно, спрашивайте, возможно я не понятно объяснила, тогда после ваших вопросов, постараюсь дополнить описание более детально.

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

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

Я хочу быть в курсе событий на сайте!

Подпишитесь прямо сейчас, и получайте обновления на свой E-Mail:

Ваш E-Mail в безопасности

Google

28 комментариев

  1. Думала, сейчас изучу и поставлю форму у себя на сайте. А как дошла до момента «открываем файл header.php», поняла, что ничего не получится — такие файлы у меня закодированы автором шаблона 🙂

    • Вот это да! Такого не может быть! Как же ты сможешь подтвердить свои права на сайт. Ведь при подтверждении прав, нужно будет вписать определённый код в этот файл. Получается, что ты не хозяйка на своём сайте. А ты не пробовала через FTP соединиться с хостингом?

  2. Весьма интересно, ведь комментарии через вк оставляют чаще, обязательно подключу и к себе такую возможность.

    • У меня в прошлой теме была форма коментериев от социальных сетей, такая, как описано в статье, а в этом шаблоне форма перестала работать, пришлось удалить код, вот никак руки не дойдут установить его обратно, и попробовать разобраться в чём причина сбоя в работе формы.

  3. Поставила я формы (видать, пока сама до этого не дойду, не пойму 🙂 ), только по отдельности. Потом, как будет время, попробую разобраться, как вставить вкладки.

  4. Ох, попугайчик появился! Уже веселее! :mrgreen:

  5. Поняла, что при наличии виджетов от соц.сетей, возникает проблемка с топ-комментаторами. Эти комментарии также не высвечиваются в блоке с последними комментариями (написала сообщение разработкику виджета).

  6. Получается, если кто-то оставит комментарий через форму соц.сетей, я могу об этом даже не узнать… Ладно бы статей было немного…

  7. Кстати, я думала и решила не ставить вкладки (пока.. 🙂 потом может и передумаю). В развернутом виде все смогут увидеть комментарии, а с вкладками не обратить внимания на их наличие.

  8. Ответил разработчик виджета последних комментариев. Написал, что он бы вообще это не затевал, что все эти соц.сети нагружают сайты.

  9. Я вообще решилась на эти виджеты соц.сетей только чтобы облегчить людям возможность комментирования. Может, оно того не стоит? Если человек захочет написать отзыв, он и данные свои вобьет в форму вордпресса, не поленится. А если комментировать нечего, то и формы не помогут 🙂 Что ж, время покажет…

  10. Я не очень ещё освоила работу с соцсетями вообще, чтобы устанавливать их виджеты на сайт. Но знание никогда не повредит ив будущем, потому что развитие соцсетей ещё далеко не в зените. Всё ещё впереди!

  11. Я часто исхожу из принципа, а делаю ли я то-то и то-то. Так вот: я практически никогда не пишу комментарии в формах от соцсетей. Второе: эти комментарии, как тут и писали уже, никак не отслеживаются автором блога (если только он не сидит сутками в данной соцсети), поэтому ни ответить на вопрос, если он будет задан, ни отсечь спам!.. И посетители блога часто просто не вникают, а в какой именно форме они написали комментарий. Еще и претензии выскажут, что в топ не попали 🙂
    И последнее. Ира, ты пишешь: «Формы социальных комментариев на блоге увеличивают посещаемость сайта, из соц. сетей». А ты это исследовала? И вообще, где исследования, которые это подтверждают? Я, например, из соцсетей не получаю никакого отклика и пощу туда скорее по привычке, чем по необходимости.

    • Нина, это уже устарелая информация, когда то действительно был не плохой трафик из соц сетей. А потом как то поубавился. Я и формы комментариев с блога убрала. А статью нужно переделать. Устарела уже.

  12. Ирина спасибо за скрипт,попробую протестировать.
    Подойдет ли к моей тестовой теме и как будет смотреться.

Написать отзыв

;-) :| :x :twisted: :smile: :shock: :sad: :roll: :razz: :oops: :o :mrgreen: :lol: :idea: :grin: :evil: :cry: :cool: :arrow: :???: :?: :!: