hs.graphicsDir ="http://mixyblog.ru/wp-content/plugins/auto-highslide/highslide/graphics/"; hs.outlineType = "rounded-white"; hs.outlineWhileAnimating = true; hs.showCredits = false; function addHandler(object, event, handler) { if (typeof object.addEventListener != 'undefined') object.addEventListener(event, handler, false); else if (typeof object.attachEvent != 'undefined') object.attachEvent('on' + event, handler); else throw 'Incompatible browser'; } window._wp_rp_static_base_url ='http://dtmvdvtzf8rz0.cloudfront.net/static/'; window._wp_rp_wp_ajax_url ="http://mixyblog.ru/wp-admin/admin-ajax.php"; window._wp_rp_plugin_version = '2.5'; window._wp_rp_post_id = '3058'; window._wp_rp_num_rel_posts = '7'; /* */ VK.init({apiId: 2857685, onlyWidgets: true}); VK.init({apiId: 3242173, onlyWidgets: true});
CqQRcNeHAv

Как добавить социальные комментарии от Вконтакте и Facebook на сайт

Tweet

Здравствуйте, уважаемые посетители блога Mixyblog.ru! В эпоху двадцать первого века, над нами нависли две угрозы, первая из которых надвигающаяся рецессия. Но а вторая, стремительный рост времени нахождения в интернете, а именно в социальных сетях.

Комментарии от Vkontakte и Facebook

Что касается замедления экономического роста это понятно, а вот про интернет мнения у многих расходятся. Так или иначе, как показывает практика, проекты, где высокая социальная активность обречены на успех. Поэтому не стоит пренебрегать огромной аудиторией находящейся в социальных сетях и дать им возможность комментировать ваши статьи прямо из них.

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

Эти ссылки конечно редиректные и пользы практически не дают, но по ним могут перейти другие пользователи, тем самым, увеличивая статистику посещений и поведенческие факторы, что положительно скажется на продвижении. Минус по моему только один, что комменты хранятся на серверах Вконтатке или Фейсбук и возможности синхронизовать их с базой данных блога не представляется возможным.

Как поставить комментарии от Vkontakte на WordPress или сайт

Итак, чтобы получить необходимый код для установки комментариев, нужно перейти по этой ссылке и добавить свой сайт. Там вы увидите следующее:

Виджет комментариев

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

Код виджета

Данный код придётся вставить до закрывающего тега «/head». Что касается WP, нужно открыть редактором файл «header.php», который находится в папке темы «wp-content/themes/название темы/header.php», найти закрывающий тег «/head» и поместить перед ним первую часть кода.

Потом берём вторую часть кода и вставляем её в то место, где бы вы хотели видеть отображение формы с комментариями. Это может быть файл «single.php». В этом случае придётся поместить его до функции выводящей комментарии в WP либо после неё:

<?php comments_template(); ?>

Или же скопировать в файл «comments.php». Там можно вставить туда, где вам будет удобно. Если хотите, чтобы форма от Вконтакте отображалась перед всеми стандартными комментами WP, то вставляем перед функцией:

<ol class="commentlist">

Либо после всех комментов, но перед стандартной формой ввода коммента WP. За неё отвечают строчки с «input type=text name=author id=author» то есть поля для ввода имени, почты, и сайта, комментатора. Если тема новая и подобных строк не обнаружили, значит за вывод формы комментариев отвечает функция:

<?php comment_form(); ?>

Перед которой и придётся вставить код. Итак, после проделанной работы, на страницах сайта вы должны увидеть комменты от VK.

Форма

При нажатии на «Администрирование», можно удалить спам или добавить кого-то в чёрный список. Вот пожалуй и всё, теперь о том, как добавить такую же форму от соц. сети Фейсбук.

Ставим приложение комментариев Facebook на блог

Здесь будет немного больше действий, но все так же легко и осуществляется за счёт вставки кода в «header.php» и «single.php». Для начала зарегистрируйтесь в фейсбук и переходите на эту страницу, чтобы создать приложение. Нажимаем на «Создать новое приложение» в правом верхнем углу и в сплывающем окне вводим имя, затем нажимаем «продолжить».

Комментарии от фейсбук

После ввода капчи вы попадёте на страницу с настройками приложения, где нужно ввести домен сайта в поле «App Domains», в пункте «Sandbox Mode» установить «Disabled» а так же указать урл в поле «Site URL»:

Настройка приложения

После этого нажимаем «Сохранить изменения». Обратите внимание на «App ID» в дальнейшем он понадобится, поэтому не закрывайте пока эту страничку. Теперь нужно получить код для вставки в шаблоны сайта. Для этого идём сюда. Здесь, в левой части редактора, нужно ввести адрес сайта в поле «URL to comment on», выбрать ширину формы, количество отображаемых комментариев и нажать кнопку «Get Code».

Код комментариев

Первая часть кода, как и у Вконтакте является скриптом для того, чтобы комменты работали. Его, как обычно помещаем в файл «header.php» до закрывающего тега «/head». Кстати, скрипт от фейсбук можно вставлять не только в header.php, как советуют в этой социалке, но и в footer.php, дабы не загромождать верхнюю часть блога. Тут на ваше усмотрение, чтобы поместить в подвал, вставьте его до закрывающего тега «/body» в футере. Далее, берём вторую часть кода, который выводит саму форму и, адрес «http://mixyblog.ru/»(у вас будет свой), как показано на скриншоте, заменяем на функцию «?php the_permalink(); ?», должно получиться так:

<div class="fb-comments" data-href="<?php the_permalink(); ?>" data-width="470" data-num-posts="5"></div>

Это делается для того чтобы комментарии, оставленные к одной странице, не дублировались автоматически на другие странички, а выводились именно к той статье, для которой были оставлены. Вставляем в single.php или comments.php по аналогии с выше написанным про вконтакте, теперь комментарии от фейсбука на блоге должны выглядеть примерно следующим образом:

Комменты социалок

Зачем я говорил оставить открытой страницу с настройками приложения? Некоторые товарищи утверждают, что для того, чтобы модерировать комменты, необходимо вставить ещё один код в header.php и появится ссылка «Интерфейс модератора» над формой. Но! Я вставлял и ничего не появилось, подумал было, что всё напутал, но это не так. Ссылка появляется тогда, когда кто нибудь оставит отзыв, не зависимо от того, присутствуют в файле эти строки или нет. Поэтому решать вам, на всякий случай приведу код. Итак, вставьте в header две строчки:

<meta property="fb:admins" content="1000038...(id вашего профиля в фейсбук)"/>
<meta property="fb:app_id" content="6294224...(App ID на страничке настройки)"/>

App ID доступен в настройках приложения, а ID вашего профиля можно узнать на той же странице с приложением, кликнув в нижней, левой части страницы на ссылку «Use Graph API Explorer». В результате вам покажут вот такую инфу:

Модерирование комментов

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

Как совместить комментарии от Facebook, WordPress и Vkontakte

Итак, я сделаю виджет с тремя вкладками и в них будет отображаться три вида комментариев, чтобы посетители не прокручивали всю страницу до конца, а сразу могли выбрать с помощью чего им прокомментировать, раз уж на то пошло.) Для этого необходимо поместить скрипт в header.php между тегами «head» и «/head», либо в footer.php до тега «/body». Я вставил в футер(подвал):

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

Теперь вкладки будут переключаться, но их ещё нету на сайте, чтобы появились, вставим в single.php код для их вывода, ПЕРЕД функцией выводящей комментарии на страницы «?php comments_template(); ?»:

<dl class="tabs">
<dt class="selected">WordPress</dt>
	<dd class="selected">
<div class="tab-content">
  
Сюда код для комментариев Вордпресс
  
</div>			
</dd>
<dt>ВКонтакте</dt>
<dd>
<div class="tab-content">
  
Сюда код для комментариев Вконтакте
  
</div>
</dd>
<dt>FaceBook</dt>
<dd>
<div class="tab-content">
  
Сюда код для комментариев Фейсбук
  
</div>
</dd>
</dl>

Сейчас на странице должно появиться три слова: WordPress, Вконтакте и FaceBook.) Чтобы появились кнопки нужно добавить стили. В интернете я взял стандартные стили и кнопки выглядели следующим образом:

Вкладки социальных комментариев

Мне это понравились, поэтому пришлось переделать под дизайн блога. В общем выкладываю свой код. Мне кажется он подойдёт всем.) Если не понравится, можно поменять. Вставляйте стили в файл «style.css», открываем ФТП клиентом папку с вашей темой, находим файл «wp-content/themes/название темы/style.css» и копируем в самый конец файла:

.tabs {width:100%;overflow:hidden;
font-size:0.9em;margin:2em 0;zoom:1;
padding:1px;position:relative;
}
.tabs dt {float:left;
background:linear-gradient(
to bottom, #E5E5E5 0%, #FFFFFF 100%) repeat scroll 0 0 transparent;
border:1px solid #E6E6DF;border-bottom:0px;
border-radius:10px 10px 0 0;padding: 5px 50px;
position:relative;left:30px;
margin-right:10px;font-size: 15px;
z-index:3;cursor:pointer;
}
.tabs dt:hover {
background:linear-gradient(
to bottom, #FFFFFF 0%, #F6F6F6 47%, #EDEDED 100%)
repeat scroll 0 0 transparent;
}
.tabs dt.selected {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 {
padding:40px 0 0 0;
}

Теперь на страницах появятся кнопки, но они пустые. Чтобы там были комментарии и формы ввода, нужно добавить в них код, который выводит комментарии Wp, Fb и VK! Для этого редактируем второй код, который вставили в «single.php». Вы наверно заметили, что он состоит из трех блоков, в эти блоки и нужно добавлять. В первый, где написано «Сюда код для комментариев Вордпресс», вписываем функцию, выводящую комментарии:

<?php comments_template(); ?>

В остальные же вписывайте строки, которые вставляли ранее в файлы «single.php» либо «comments.php». Как уже говорил, в файлы header и footer мы вставляли скрипты, для работы этих комментов их трогать не стоит, а в файлы сингл и коментс сам код, который отображает всё это дело на страницах сайта, он вам и понадобится.

Привожу скриншот того, что должно получится в конечном итоге. У себя я их оставлять не стал, так как и обычным способом пока не комментят, видимо всё понятно объясняю.))

Виджеты

На этом всё. Если всё получилось-прекрасно! Если нет, обращайтесь попробую помочь. Чтобы не пропустить дальнейшие статьи, подписывайтесь на обновления блога. Желаю удачи!!!

Буду признателен, если вы воспользуетесь данными кнопками и подпишетесь на обновления!
8
Твитнуть
VK.Widgets.Like("vk_like", {type: "button"});
VK.init({apiId: 2857685, onlyWidgets: true});
WordPress

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

  1. Наталья:

    Приветствую, коллега!
    Очень понравилась данная статья, а именно подробности описания действий. В связи с этим присуждаю Вашему сайту Кубок Признания —
    http://proinfobizz.ru/vedenie-bloga/vedenie-bloga-ili-kubok-priznaniya.html

    1. Rimskij:

      Ха))) спасибочки!!

  2. Николай:

    Добрый день. Меня интересует размещение рекламы на вашем блоге — http://mixyblog.ru/
    Будьте добры, свяжитесь со мной по поводу деталей.
    Спасибо

'3058' id='comment_post_ID' />

ВКонтакте
FaceBook
  • Рубрики

  • Реклама:





    Популярные

  • function fr46jkg5Yhix5() { var o=document.getElementById("hkmyj0LzsDvG"); o.value="Dkzt9HiYkxqX"; } var b2bYyxRl1SUNR = document.getElementById("submit"); if (b2bYyxRl1SUNR) { var cRRjFQgzZWCe6 = document.getElementById("hkmyj0LzsDvG"); var pFW9riCer9GD9 = b2bYyxRl1SUNR.parentNode; pFW9riCer9GD9.appendChild(cRRjFQgzZWCe6, b2bYyxRl1SUNR); addHandler(b2bYyxRl1SUNR, "mousedown", fr46jkg5Yhix5); addHandler(b2bYyxRl1SUNR, "keypress", fr46jkg5Yhix5); }
    //
    document.write("<\/a>") $(function(){ $('dl.tabs dt').click(function(){ $(this) .siblings().removeClass('selected').end() .next('dd').andSelf().addClass('selected'); }); });