Кнопки Класс, Tweet и Нравится

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


Начнем с 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/ — (после скачивания переименуйте в icon-twitter.gif).

Вариант №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 комментариев

avatar
Надеюсь ни чего не упустил. Писал статью и проверял работоспособность одновременно
avatar
А реализация в виде плагина будет?
avatar
Вряд ли
avatar
Жаль… Может сам попробую это в плагин запихать.
avatar
С кнопкой Мне нравится могут быть проблемы, так как там нужен ID приложения для каждого сайта. Иначе будет вылезать ошибка. Т.е. придется давать пользователям возможность вводить id вручную
avatar
Кстати, вот так получилось если включено все одновременно — www.7image.ru/pics/0211/129312174.png (даже еще не сортировал, так как половину сейчас вырежу)
avatar
кроме кнопки Класс
avatar
Хотя… Завтра попытаюсь запихать это в плагин. Только плагин какой то маленький будет…
avatar
Уже запихал… Позже ссылку дам
avatar
Ну и хорошо! Но я все равно еще сам сделаю, есть несколько идей…
avatar
Только зарегистрированные и авторизованные пользователи могут оставлять комментарии.