Кнопки социальных сервисов и закладок устанавливаются практически на все блоги. Это позволяет увеличить посещаемость блога / сайта и помогает сохранять ссылки читателей на ваши материалы. На движке wordpress создать кнопки социальных сервисов после поста в блоге очень просто. На своем примере я покажу как можно изменить нижнюю часть записи, создав панель кнопок или текста, на движке movable type, которым я и пользуюсь.
Чтобы изменить нижную часть записи, в которой можно разместить коды кнопок, определенный текст с ссылками или баннер, необходимо добавить сам код в шаблон. Получившийся результат вы можете видеть в этом блоге после каждого поста. Я создал довольно простой пример, состоящий из кнопки сервиса addthis и текста с ссылками на различные виды слежения за обновлениями блога Artimagine.com.
Пример создан для блога, работающего на 5 версии движка movable type. О преимуществах блога на MT5 я писал в статье: "Почему я выбрал Movable type"
Кликаем боковую панель админ-панели вашего блога, можете видеть это на скриншоте:
Для того, чтобы видоизменить шаблон страницы поста, кликаем шаблоны. После этого мы оказываемся на странице Управление шаблонами. Шаблоны на этой странице разделены по категориям:
- индексные шаблоны
- шаблоны архивов
- модули шаблонов
- системные шаблоны
Смотрим детальнее модули шаблонов. В списке находим шаблон с названием Entry Detail. Кликаем этот шаблон, перед нами будет код:
<div id="entry-<$mt:EntryID$>" class="entry-asset asset hentry">
<div class="asset-header">
<h1 id="page-title" class="asset-name entry-title"><$mt:EntryTitle$></h1>
<$mt:Include module="Entry Metadata"$>
</div>
<div class="asset-content entry-content">
<mt:If tag="EntryBody">
<div class="asset-body">
<$mt:EntryBody$>
</div>
</mt:If>
<mt:If tag="EntryMore" convert_breaks="0">
<div id="more" class="asset-more">
<$mt:EntryMore$>
</div>
</mt:If>
</div>
<div class="asset-footer">
<$mt:Include module="Категории"$>
<$mt:Include module="Теги"$>
</div>
</div>
<div class="asset-header">
<h1 id="page-title" class="asset-name entry-title"><$mt:EntryTitle$></h1>
<$mt:Include module="Entry Metadata"$>
</div>
<div class="asset-content entry-content">
<mt:If tag="EntryBody">
<div class="asset-body">
<$mt:EntryBody$>
</div>
</mt:If>
<mt:If tag="EntryMore" convert_breaks="0">
<div id="more" class="asset-more">
<$mt:EntryMore$>
</div>
</mt:If>
</div>
<div class="asset-footer">
<$mt:Include module="Категории"$>
<$mt:Include module="Теги"$>
</div>
</div>
В готовом виде это чистая страница поста. Теперь добавим код кнопок и нужный текст, который будет автоматически появляться после каждой написанной статьи. Для этого мы вставляем нужный код между этими строками:
------------сокращенный вариант кода-----------------------
</mt:If>
</div>
</div>
Вот сюда вставляем нужный код (кнопки, баннера, и т.д)
<div class="asset-footer">
<$mt:Include module="Категории"$>
<$mt:Include module="Теги"$>
</div>
</div>
<div class="asset-footer">
<$mt:Include module="Категории"$>
<$mt:Include module="Теги"$>
</div>
</div>
В итоге у нас получается:
------------сокращенный вариант кода-----------------------
<mt:If tag="EntryMore" convert_breaks="0">
<div id="more" class="asset-more">
<$mt:EntryMore$>
</div>
</mt:If>
</div>
<!-- AddThis Button BEGIN -->
<div class="addthis_toolbox addthis_default_style">
<a href="http://www.addthis.com/bookmark.php?v=250&username=xa-4b6171XXXXXXX" class="addthis_button_compact">Закладки</a>
<span class="addthis_separator">|</span>
<a class="addthis_button_facebook"></a>
<a class="addthis_button_myspace"></a>
<a class="addthis_button_google"></a>
<a class="addthis_button_twitter"></a>
</div>
<div>
<p>
<hr />
<p><b>Понравилась статья?</b> <strong><font color="#ff0000">Вы можете подписаться</font></strong> на обновления этого блога по <b><ahref="http://feeds.feedburner.com/artimaginecom"><font size="3">RSS</font></a></b>, на мой <a href="http://twitter.com/aleximagine"><b><fontsize="3">твиттер</font></b></a> или получать материалы <ahref="http://www.rss2email.ru/blog.asp?id=71994"><b><font size="3">по почте</font></b></a><font size="3">.</font> Также вы можете оставить комментарии.</p>
</div>
<script type="text/javascript"src="http://s7.addthis.com/js/250/addthis_widget.js#username=xa-4bXXXXXXXXXX"></script>
<!-- AddThis Button END -->
<div class="asset-footer">
<$mt:Include module="Категории"$>
<$mt:Include module="Теги"$>
</div>
</div>
<div id="more" class="asset-more">
<$mt:EntryMore$>
</div>
</mt:If>
</div>
<!-- AddThis Button BEGIN -->
<div class="addthis_toolbox addthis_default_style">
<a href="http://www.addthis.com/bookmark.php?v=250&username=xa-4b6171XXXXXXX" class="addthis_button_compact">Закладки</a>
<span class="addthis_separator">|</span>
<a class="addthis_button_facebook"></a>
<a class="addthis_button_myspace"></a>
<a class="addthis_button_google"></a>
<a class="addthis_button_twitter"></a>
</div>
<div>
<p>
<hr />
<p><b>Понравилась статья?</b> <strong><font color="#ff0000">Вы можете подписаться</font></strong> на обновления этого блога по <b><ahref="http://feeds.feedburner.com/artimaginecom"><font size="3">RSS</font></a></b>, на мой <a href="http://twitter.com/aleximagine"><b><fontsize="3">твиттер</font></b></a> или получать материалы <ahref="http://www.rss2email.ru/blog.asp?id=71994"><b><font size="3">по почте</font></b></a><font size="3">.</font> Также вы можете оставить комментарии.</p>
</div>
<script type="text/javascript"src="http://s7.addthis.com/js/250/addthis_widget.js#username=xa-4bXXXXXXXXXX"></script>
<!-- AddThis Button END -->
<div class="asset-footer">
<$mt:Include module="Категории"$>
<$mt:Include module="Теги"$>
</div>
</div>
Выделеным шрифтом показан код, который я хочу вставить в конец поста, после этой операции мы сохраняем изменения в шаблоне и опубликовываем изменения. Вот как будет выглядеть футер у статей:
Комментариев нет:
Отправить комментарий