inkognitod 16.02.2014

Социальные комментарии на сайте

Привет! Сегодня на сайт одного клиента устанавливал комментарии соц.сетей. Есть куча плагинов, возможно есть более удобные чем мой способ. Но... Я стараюсь использовать как можно левых плагинов, так как это нагружает сайт и появляется вероятность вместе с плагином еще и вирус установить) Вот код моей версии соц. комментов вконтакте и фэйсбук:
<div style="width: 960px; display: block; margin:0 auto;">
		<div style="float: left;margin: 10px;">
		<!-- Put this script tag to the <head> of your page -->
<script type="text/javascript" src="//vk.com/js/api/openapi.js?105"></script>

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

<!-- 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: "420", attach: "*"});
</script>
</div>
<div  style="float: left;margin: 10px;">
<div id="fb-root"></div>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/ru_RU/all.js#xfbml=1&appId=512468255540892";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<div class="fb-comments" data-href="http://www.facebook.com/moystartup" data-width="420px" data-numposts="10" data-colorscheme="light"></div>
</div>
		</div>
Теперь разберем. Создал div чтобы они были одним блоком (display: block;). Задал ему параметры ширины (width: 960px;) и центровки по середине экрана (margin:0 auto;). Код для вконтакте брал с официальной странички для разработчиков vk.com/dev/Comments Код для фэйсбука брал так же с офф.сайта developers.facebook.com/docs/plugins/comments/ Прямо на этих страницах настраивается вид комментариев, т.е. количество отображаемых комментариев страницы и к какой соц. странице она относится. Полученный код я разместил в шаблон сайта сразу после материала. В принципе этот код можно добавить в любое место сайта, хоть напрямую в материале, благо редакторы сейчас это позволяют. Если понравилась статья жми лайк! Жду комментарии и вопросы)