Главная » Социальные сети » Кнопка твитнуть в анонсах записей блога WordPress
кнопка твиттера для анонсов записей

Кнопка твитнуть в анонсах записей блога 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 слева. Ну а выглядит это следующим образом:класс для кнопки твитнуть

Кстати, данную кнопку можно вставить и на страницы “Архивов”, “Рубрик” и даже страницу с Поисковой выдачей.

Удачи!

Вот серия статей про кнопки социальных сетей, которая поможет Вам установить 4 самых действенных кнопки к себе на блог (рекомендую читать по порядку!):

Комментировать через ВКонтакте:
Отзывов к посту "Кнопка твитнуть в анонсах записей блога WordPress" уже 6:
  • maximus | 07.05.2013 в 9:55

    Спасибо,за пост!Кнопку поставил,взял готовый скрипт у вас но,почему-то счётчик не работает(( и ещё как в скрипте заменить кнопу на меньший размер?

    • admin | 07.05.2013 в 14:26

      Берите код кнопки в генераторе, то есть на сайте твиттера. Если внимательно посмотреть на первый скриншот в статье, то можно заметить, что там стоит галочка в графе “Большая кнопка”. Если ее снять, то соответственно кнопка будет поменьше – что и требуется :|

      • maximus | 07.05.2013 в 15:11

        Да,с этим разобрался,вот только счётчик не работает 0 и всё))

  • Вебстар | 31.05.2013 в 22:45

    А как избавится от тега <a тоесть ссылки на твиттер? Не очень хочется наставлять на каждой странице ссылку на один и тот же сайт. Это ведь сквозная ссылка и их лучше избегать.

    • admin | 01.06.2013 в 0:09

      Не надо ничего избегать. Это не сквозная ссылка в чистом ее проявлении. Это кнопка – и она может лишь благополучно сказаться на продвижении сайта. Пример – есть способ подключения шрифтов при помощи google – для этого нужно разместить код загрузки шрифта (так что ли обозвать), которая заключается в ссылке на Гугловский сайт с этим шрифтом (ну то есть оттуда он браться и будет). Можно конечно этого не делать и думать что за это Гугл может наказать, но… В общем, если честно, вопрос глупый – не нужно настолько трепетно относиться к SEO

;-) :| :x :twisted: :smile: :shock: :sad: :roll: :razz: :oops: :o :mrgreen: :lol: :idea: :grin: :evil: :cry: :cool: :arrow: :???: :?: :!: