Кнопки Класс, Tweet и Нравится
Не так давно задумался о интеграции с соц. сетями. Можно было конечно бы и вставить блок Поделится от Яндекса (кстати, хорошую инструкцию по его добавлению можно найти здесь), но мы не ищем легких путей, да и он мне как то не очень понравился. В этом топике я расскажу как добавить эти кнопки. В итоге получится что то типо такого (но смотря чего каждый выберет, вариантов несколько):

Начнем с Twitter
Вариант №1 — кнопка без счетчика.
Нужно в файле /templates/skin/ваш скин/topic.tpl после строк:
добавить следующее:
Также необходимо добавить файл icon-twitter.gif в папку /templates/skin/ваш скин/images/ —
(после скачивания переименуйте в icon-twitter.gif).
Вариант №2 — кнопка с счетчиком:
Нужно в файле /templates/skin/ваш скин/topic.tpl после строк:
добавить следующее:
Для этого варианта есть конструктор — twitter.com/about/resources/tweetbutton
Теперь перейдем к кнопке Класс от Одноклассников
Большое спасибо alleks37 за этот метод, который я откопал в комментариях. Здесь я немного префразирую его слова.
Чтобы добавить такой блок внизу каждого топика, в файле /templates/skin/ваш скин/header.tpl вставляем между и :
И в файле /templates/skin/ваш скин/topic.tpl после такого (или подобного кода):
Добавить следующее:
Теперь кнопка от ВКонтакте
Вариант 1 — кнопка для отправки на стену
Чтобы добавить блок внизу каждого топика, в файле /templates/skin/ваш скин/header.tpl вставляем между и :
Далее нужно в файле /templates/skin/ваш скин/topic.tpl после строк:
добавить следующее:
Вариант №2 — кнопка Понравилось с счетчиком
Чтобы добавить блок внизу каждого топика, в файле /templates/skin/ваш скин/header.tpl вставляем между и :
Примечание: вместо фразы «ID-APP» вставьте ID вашего приложения. Получить этот код можно здесь.
И в файле /templates/skin/ваш скин/topic.tpl после такого (или подобного кода):
Добавить следующее:
Конструктор кнопок для второго варианта можно найти здесь.
P.S. — все описанное здесь добавляет кнопки в самом топике. Если вы хотите добавить кнопки в списке топиков, то просто то что нужно было добавить в topic.tpl добавьте в topi_list.tpl перед этим:

Начнем с Twitter
Вариант №1 — кнопка без счетчика.
Нужно в файле /templates/skin/ваш скин/topic.tpl после строк:
<li class="author"><a href="{$oUser->getUserWebPath()}">{$oUser->getLogin()}</a></li>
<li class="favorite"><div class="favorite {if $oUserCurrent}{if $oTopic->getIsFavourite()}active{/if}{else}fav-guest{/if}"><a href="#" onclick="lsFavourite.toggle({$oTopic->getId()},this,'topic'); return false;"></a></div></li>
добавить следующее:
<li class="twitter"><a href="http://twitter.com/home?status={$oTopic->getTitle()|escape:'html'}: {$oTopic->getUrl()}" title="Добавить эту статью в Twitter" target="_blank" rel="nofollow"><img src="{cfg name='path.static.skin'}/images/icon-twitter.gif" border="0" ></a></li>
Также необходимо добавить файл icon-twitter.gif в папку /templates/skin/ваш скин/images/ —

Вариант №2 — кнопка с счетчиком:
Нужно в файле /templates/skin/ваш скин/topic.tpl после строк:
<li class="author"><a href="{$oUser->getUserWebPath()}">{$oUser->getLogin()}</a></li>
<li class="favorite"><div class="favorite {if $oUserCurrent}{if $oTopic->getIsFavourite()}active{/if}{else}fav-guest{/if}"><a href="#" onclick="lsFavourite.toggle({$oTopic->getId()},this,'topic'); return false;"></a></div></li>
добавить следующее:
<a href="http://twitter.com/share" class="twitter-share-button" data-count="horizontal">Tweet</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
Для этого варианта есть конструктор — twitter.com/about/resources/tweetbutton
Теперь перейдем к кнопке Класс от Одноклассников
Большое спасибо alleks37 за этот метод, который я откопал в комментариях. Здесь я немного префразирую его слова.
Чтобы добавить такой блок внизу каждого топика, в файле /templates/skin/ваш скин/header.tpl вставляем между и :
<!-- odnoklassniki klass -->
{literal}
<link href="http://stg.odnoklassniki.ru/share/odkl_share.css" rel="stylesheet">
<script src="http://stg.odnoklassniki.ru/share/odkl_share.js" type="text/javascript" ></script>
{/literal}
<!-- odnoklassniki klass -->
И в файле /templates/skin/ваш скин/topic.tpl после такого (или подобного кода):
<li class="author"><a href="{$oUser->getUserWebPath()}">{$oUser->getLogin()}</a></li>
<li class="favorite"><div class="favorite {if $oUserCurrent}{if $oTopic->getIsFavourite()}active{/if}{else}fav-guest{/if}"><a href="#" onclick="lsFavourite.toggle({$oTopic->getId()},this,'topic'); return false;"></a></div></li>
Добавить следующее:
<!-- odnoklassniki klass -->
<div style="float: left; padding-left: 5px;">
{literal}<a class="odkl-klass-stat" href="" onclick="ODKL.Share(this);return false;" onload="ODKL.init();" ><span>0</span></a>
{/literal}
</div>
<!-- odnoklassniki klass -->
Теперь кнопка от ВКонтакте
Вариант 1 — кнопка для отправки на стену
Чтобы добавить блок внизу каждого топика, в файле /templates/skin/ваш скин/header.tpl вставляем между и :
<script type="text/javascript" src="http://vkontakte.ru/js/api/share.js?9" charset="windows-1251"></script>
Далее нужно в файле /templates/skin/ваш скин/topic.tpl после строк:
<li class="author"><a href="{$oUser->getUserWebPath()}">{$oUser->getLogin()}</a></li>
<li class="favorite"><div class="favorite {if $oUserCurrent}{if $oTopic->getIsFavourite()}active{/if}{else}fav-guest{/if}"><a href="#" onclick="lsFavourite.toggle({$oTopic->getId()},this,'topic'); return false;"></a></div></li>
добавить следующее:
<li class="vkontakte">{literal}<script type="text/javascript"><!--
document.write(VK.Share.button(false,{type: "link", text: "Поделиться ВКонтакте"}));
--></script>{/literal}</li>
Вариант №2 — кнопка Понравилось с счетчиком
Чтобы добавить блок внизу каждого топика, в файле /templates/skin/ваш скин/header.tpl вставляем между и :
<!-- vk.com header -->
{literal}
<script type="text/javascript" src="http://userapi.com/js/api/openapi.js?22"></script>
<script type="text/javascript">
VK.init({apiId: <b>ID-APP</b>, onlyWidgets: true});
</script>
{/literal}
<!-- end vk.com header -->
<!-- end vk.com header -->
Примечание: вместо фразы «ID-APP» вставьте ID вашего приложения. Получить этот код можно здесь.
И в файле /templates/skin/ваш скин/topic.tpl после такого (или подобного кода):
<li class="author"><a href="{$oUser->getUserWebPath()}">{$oUser->getLogin()}</a></li>
<li class="favorite"><div class="favorite {if $oUserCurrent}{if $oTopic->getIsFavourite()}active{/if}{else}fav-guest{/if}"><a href="#" onclick="lsFavourite.toggle({$oTopic->getId()},this,'topic'); return false;"></a></div></li>
Добавить следующее:
<!-- vk.com like -->
{literal}
<div id="vk_like"></div>
<script type="text/javascript">
VK.Widgets.Like("vk_like", {type: "full"});
</script>
{/literal}
<!-- vk.com like end -->
Конструктор кнопок для второго варианта можно найти здесь.
P.S. — все описанное здесь добавляет кнопки в самом топике. Если вы хотите добавить кнопки в списке топиков, то просто то что нужно было добавить в topic.tpl добавьте в topi_list.tpl перед этим:
{hook run='topic_show_info' topic=$oTopic}
11 комментариев