Добавление комментариев Vkontakte и Facebook (xslt)

Задача: Есть необходимость добавить возможность пользователям оставлять комментарии на Вашем сайте через социальные сети Facebook или Vkontakte.

Решение: Данный функционал появился в версии 2.8.4.4 и выше. В этой статье будет описан метод по добавлению комментариев для xslt шаблонизатора.

1. Для начала необходимо перейти в настройки модуля "Комментарии", там есть блоки "Комментарии Вконтакте" и "Комментарии Facebook", в этих блоках должны быть поставлены галочки "Включить комментарии Вконтакте" и "Включить комментарии Facebook" соответственно. В блоке "Комментарии Вконтакте" необходимо также прописать Ваш API-id. Как получить Api-ID: нажимаем на "Разработчикам" на сайте ВКонтакте на своей странице.

Нажимаем подключить сайт.

Заполняем необходимые поля.

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

Далее, в новом окне мы получаем ID приложения (apiID).

2. Далее, создаем xsl шаблоны, для отображения наших комментариев. Создадим 2 xsl файла по пути ~xsltTpls/modules/comments/. Эти файлы будут называться common.xsl и comments-list.xsl (если у Вас эти файлы есть можно просто отредактировать их, чтобы содержимое файла common.xsl было такое:

<xsl:stylesheet	version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">

	<xsl:include href="comments-list.xsl" />

	<xsl:template match="udata[@method = 'countComments']">
		<xsl:param name="link" />
		<a href="{$link}#add-comment" class="comments">
			<xsl:text>&no-comments;</xsl:text>
		</a>
	</xsl:template>

	<xsl:template match="udata[@method = 'countComments'][. &gt; 0]">
		<xsl:param name="link" />
		<a href="{$link}#comments" class="comments">
			<xsl:text>&comments; </xsl:text>
			<strong>
				<xsl:value-of select="concat(' (', ., ')')" />
			</strong>
		</a>
	</xsl:template>

</xsl:stylesheet>

а содержимое файла comments-list.xsl должно быть:

  <?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE xsl:stylesheet SYSTEM	"ulang://i18n/constants.dtd:file">

<xsl:stylesheet	version="1.0"
				xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
				xmlns:umi="http://www.umi-cms.ru/TR/umi"
				xmlns:xlink="http://www.w3.org/TR/xlink"
				xmlns:fb="http://www.facebook.com/2008/fbml"
				exclude-result-prefixes="xsl umi xlink fb">

	<xsl:template match="udata[@module = 'comments' and @method = 'insert']">
		<hr /><a name="comments" />
		<h4>
			<xsl:text>&comments;:</xsl:text>
		</h4>
		<div class="comments" umi:module="comments" umi:add-method="none" umi:region="list" umi:sortable="sortable">
			<xsl:apply-templates select="items/item" mode="comment" />
			
			<xsl:choose>
				<xsl:when test="$user-type = 'guest'">
					<xsl:apply-templates select="add_form" mode="guest" />
				</xsl:when>
				<xsl:otherwise>
					<xsl:apply-templates select="add_form" mode="user" />
				</xsl:otherwise>
			</xsl:choose>
		</div>
		<xsl:apply-templates select="document('udata://comments/insertVkontakte')" />
		<xsl:apply-templates select="document('udata://comments/insertFacebook')" />
	</xsl:template>

	<xsl:template match="udata[@module = 'comments' and @method = 'insert' and not(items)]">
		<xsl:apply-templates select="document('udata://comments/insertVkontakte')" />
		<xsl:apply-templates select="document('udata://comments/insertFacebook')" />
	</xsl:template>

	<xsl:template match="udata[@module = 'comments' and @method = 'insertVkontakte' and @type='vkontakte']">
		<script type="text/javascript" src="http://userapi.com/js/api/openapi.js?34"></script>
		<script type="text/javascript"><![CDATA[VK.init({apiId: ]]><xsl:value-of select="api" />
<![CDATA[, onlyWidgets: true});]]></script>
		<hr /><a name="comments" />
		<h4>
			<xsl:text>Комментарии ВКонтакте:</xsl:text>
		</h4>
		<div id="vk_comments"></div>
		<script type="text/javascript"><![CDATA[
		VK.Widgets.Comments("vk_comments", {limit: ]]><xsl:value-of select="per_page" /><![CDATA[, width: "]]>
<xsl:value-of select="width" /><![CDATA[", attach: "]]><xsl:value-of select="extend" /><![CDATA["});
		]]></script>
	</xsl:template>

	<xsl:template match="udata[@module = 'comments' and @method = 'insertVkontakte' and not(@type)]"/>

	<xsl:template match="udata[@module = 'comments' and @method = 'insertFacebook' and @type='facebook']">
		<xsl:variable name="href" select="concat('http://', $domain, $lang-prefix, $request-uri)" />
		<hr /><a name="comments" />
		<h4>
			<xsl:text>Комментарии Facebook:</xsl:text>
		</h4>
		<div id="fb-root"></div>
		<script src="http://connect.facebook.net/ru_RU/all.js#xfbml=1"></script>
		<fb:comments href="{$href}" num_posts="{per_page}" width="{width}" colorscheme="{colorscheme}"></fb:comments>
	</xsl:template>

	<xsl:template match="udata[@module = 'comments' and @method = 'insertFacebook' and not(@type)]" />

	<xsl:template match="udata[@method = 'insert']/add_form" mode="guest">
		<a name="add-comment" />
		<form method="post" action="{action}">
			<div class="form_element">
				<label>
					<span>Заголовок комментария:</span>
					<input type="text" name="title" class="textinputs" />
				</label>
			</div>
			<div class="form_element">
				<label>
					<span>Ваш ник:</span>
					<input type="text" name="author_nick" class="textinputs" />
				</label>
			</div>
			<div class="form_element">
				<label>
					<span>Ваш e-mail:</span>
					<input type="text" name="author_email" class="textinputs" />
				</label>
			</div>
			<div class="form_element">
				<label>
					<span>Текст комментария:</span>
					<textarea name="comment"></textarea>
				</label>
			</div>
			<div class="form_element">
				<xsl:apply-templates select="document('udata://system/captcha/')/udata" />
			</div>
			<div class="form_element">
				<input type="submit" class="button" value="Добавить комментарий" />
			</div>
		</form>
	</xsl:template>
	
	<xsl:template match="udata[@method = 'insert']/add_form" mode="user">
		<a name="add-comment" />
		<form method="post" action="{action}">
			<div class="form_element">
				<label>
					<span>
						<xsl:text>&comment-body;:</xsl:text>
					</span>
					<textarea name="comment" />
				</label>
			</div>
			<div class="form_element">
				<input type="submit" class="button" value="&comment-submit;" />
			</div>
		</form>
	</xsl:template>

	<xsl:template match="item" mode="comment">
		<div class="item" umi:element-id="{@id}" umi:region="row">
			<div class="descr" umi:field-name="message" umi:delete="delete" umi:empty="&empty;">
				<xsl:value-of select="." disable-output-escaping="yes" />
			</div>

			<div class="date">
				<xsl:apply-templates select="document(@xlink:author-href)" />
				
				<xsl:text> (</xsl:text>
				<span umi:field-name="publish_time">
					<xsl:call-template name="format-date">
						<xsl:with-param name="date" select="@publish_time" />
					</xsl:call-template>
				</span>
				<xsl:text>)</xsl:text>
			</div>
		</div>
	</xsl:template>
</xsl:stylesheet>

3. Если у Вас уже были указанные файлы, и Вы использовали их на сайте, то можно просто перейти к пункту 4. Если Вы не использовали эти файлы, то необходимо подключить их в основном xsl шаблоне, подключение происходит, таким образом:

<xsl:include href="modules/comments/common.xsl" />

4. Далее, прописываете вызовы

<xsl:apply-templates select="document('udata://comments/insertFacebook')" />
            <xsl:apply-templates select="document('udata://comments/insertVkontakte')" />

в том месте шаблона сайта, где Вы хотите чтобы отображались формы для добавления комментариев, и сами комментарии на Вашем сайте.