Кнопка твитнуть в анонсах записей блога WordPress
Здравствуйте уважаемые читатели блога history-of-blog.ru. Хочу поведать Вам как я доработал кнопку твитнуть для WordPress блога. Дело в том, что на некоторых блогах я видел кнопку Твиттера на главной странице – в анонсах записей, около ссылки читать далее или же прямо под заголовком. Но при попытке разместить заветную кнопочку я столкнулся с трудностью – она “хотела твитать” только главную страницу, а мне требовалось чтобы каждая кнопка размещенная в анонсе относилась к определенной статье и “твитала” только ее.
Кнопку твита в анонсах записей на блоге WordPress.
Для того, чтобы вывести кнопку твитнуть в анонсе, нам сначала нужно сгенерировать код кнопки, как и при обычной установке кнопки твиттера.
Переходим на страницу: https://twitter.com/about/resources/buttons, выбираем первый пункт (“Отправить ссылку”) и ставим вот такие настройки:
Графы, на которые указывают стрелки должны быть именно такими, Все остальное произвольно – можете например использовать не большую а стандартную кнопку (для этого уберите галку с графы “Большая кнопка”).
Теперь нам нужен файл темы который ответственен за вывод анонса записи – это может быть файл loop.php (еще он может называться theloop.php), либо файл index.php.
Находим место где должна выводится кнопка твита – это может быть под заголовком анонса, после картинки или около ссылки “Читать далее” – в общем, смотрите по шаблону. Я например воткнул кнопку вот сюда:
Теперь вставленный код кнопки твитнуть нужно изменить в 2 местах. Сейчас он выглядит вот так:
<a class="twitter-share-button" href="https://twitter.com/share" data-url="http://адрес" data-text="название" data-lang="ru" data-size="large">Твитнуть</a>
<script type="text/javascript">// <![CDATA[
!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");
// ]]></script>
- 1 место: меняем ссылку куда нужно ссылаться, то есть фразу
data-url="http://адрес"
меняем на
data-url="<?php the_permalink(); ?>"
- 2 место: меняем текст, которым будет сопровождаться твит. Находим:
data-text="название"
И меняем на
data-text="<?php the_title(); ?>"
Таким образом конечный код нашей кнопки имеет следующий вид:
<a class="twitter-share-button" href="https://twitter.com/share" data-url="<?php the_permalink(); ?>" data-text="<?php the_title(); ?>" data-lang="ru" data-size="large">Твитнуть</a>
<script type="text/javascript">// <![CDATA[
!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");
// ]]></script>
Этот код универсален и может работать на любом блоге WordPress, но только на блоге WordPress – на других сайтах он работать не будет. Почему?
Дело в том, что при хаке кнопки твиттера мы используем php конструкции, которые нам дает движок WordPressa, например автоматически определяющаяся ссылка на статью выглядит так:
<?php the_permalink(); ?>
Ну а автоматически определяющееся название поста так:
<?php the_title(); ?>
Такой хак позволяет нам вставить много кнопок на страницу, и каждая из них будет относится к конкретной записи.
Попробуйте перейти на главную страницу этого блога и твитнуть какую-либо запись. Вы заметите, что твит будет содержать title (название) записи и ссылку на эту запись.
Ну и насчет внешнего вида:
Заключите конечный код кнопки в Div, например вот так:
<div class="twitter-hack">код кнопки</div>
Затем откройте файл style.css и пропишите там необходимые стили. У меня например они выглядят вот так:
.twitter-hack {
float:left; width:190px; margin:5px 0 8px 10px;
}
Я задал выравнивание по левому краю, ширину 190 пикселей, и отступы: 5px – сверху, 0 – справа, 8 -снизу и 10 слева. Ну а выглядит это следующим образом:
Кстати, данную кнопку можно вставить и на страницы “Архивов”, “Рубрик” и даже страницу с Поисковой выдачей.
Удачи!
- Почему именно кнопки социальных сетей?
- Установка кнопки твитнуть на блог.
- Установка кнопок твиттера на главную страницу (в анонсах) – эта статья
- Установка кнопки “мне нравится” от Facebook?
- Установка кнопки “мне нравится” от Вконтакте?
- Установка кнопки Гугл +1?
- Как красиво отобразить четыре кнопки в ряд (под статьей).
