Вставляем кнопку retweet от twitter

retweetНаконец произошло то, что должно было, случится давным-давно. Twitter выдал собственный инструмент для вставки кнопок retweet на сайты и блоги.

Честно говоря, я до сих пор не совсем понимаю, почему это произошло только сейчас и почему разработчики так долго тянули.

Ну да ладно, главное это есть и теперь его нужно внедрить.

На моих блогах: компьютерный блог на maypk.com и профессия веб-мастер я данные кнопки уже внедрил.

Раньше стоял плагин «Topsy», но у него было проблемы с русскими словами, здесь пока проблем замечено не было.

Так, что начнем

Решения от twitter не содержит плагинов, а только готовый код. Получить его можно здесь.

Весь процесс разбит на три шага:

  1. Первый шаг содержит все еще четыре шага:
    • На первом шаге выбираем внешний вид нашей кнопки;
    • Текс твита (если его не трогать, то возьмется заголовок статьи);
    • Ссылка твита (если не трогаем, ссылка ведет на статью в сжатом виде);
    • Язык (русского нет);
  2. На втором шаге нам предлагают добавить возможность порекомендовать твиттерян.
    Когда человек нажмет retweet, сверху будут перечислены ники твиттерян за которым стоит последить. (мелочь, а приятно)
  3. Третий шаг это даже не шаг, а завершающая стадия. Здесь мы видим, как будет выглядеть кнопка, ее размеры и код для вставки на сайт или блог.

Вот собственно и все. Осталось внедрить код на ваш сайт.

Я покажу самый часто используемые и самый сложный пример вставки.
Вставляем кнопку retweet от twitter
Хотя стоит заметить сложный не в плане реализации, а в плане осмысления.

Так как контент у нас выводиться через функцию

1
<?php the_content('Далее &raquo;'); ?>.

Мы, конечно же, не будем трогать системные файлы, иначе это будет не эффективно и придется редактировать их при каждом обновлении wordpress до новой версии.

Перед функцией

1
<?php the_content('Далее &raquo;'); ?>

вставляем

1
<div id=”twitter_btn”>

«twitter_btn» – можно заменить на свое название.

И в него вставляем код полученный от twitter.com.

Должно получиться, что-то типа этого:

1
2
<div id="twitt_btn_one"><a href="http://twitter.com/share" class="twitter-share-button" data-count="vertical" data-via="webmasterprofru">Tweet</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script></div>
         <?php the_content('Далее &raquo;'); ?>

В файле стилей пишем следующие:

1
#twitt_btn_one{width:55px;height:62px;float:right;margin-left:3px}

Вот и все, наша кнопка гармонично вписалась в дизайн блога.

На этом все удачи.

С уважением Тригуба Сергей!!!

Автор:
Приглашаю присоединиться ко мне в следующих сервисах:
Получайте новые статьи по созданию сайтов на ваш почтовый ящик.

Комментарии Вконтакте:

Комментарии Facebook:

Комментариев21 комментарий

Интересная новость спасибо... Скажи, а ещё не подскажи как поставить с права такую панельку для rrs как у тебя readers and folower

Это плагин — Simple Counters.

Сразу предупреждаю. Разработчик выбрал для реализации тяжёлую библеотеку.

Если следить за скоростью загрузки блога. То стоит потестировать, прежде чем ставить данный плагин на блог!!!

Спасибо, интересно.

А может подскажете, попробовала добавить кнопку Твиттера в ЖЖ, а у меня получается просто текстовая ссылка. Я вставляла полученный от Твиттера код в пост, используя кнопку HTML.

    C ЖЖ не работал. Но кнопка требует поддержки java-script. Обычный html не будет отображать счетчик.

    А если просто кнопку:

    1
    2
    3
    <a rel="nofollow" target="_blank" href="http://twitter.com/home?status=RT @webmasterprofru <?php the_title(); ?>: <?php the_permalink(); ?>" title="Добавить в Twitter">
    <img src="путь к картинке" alt="Опубликовать в twitter.com" width="78" height="18">
    </a>

    Но это для wordpress.

    1
    <?php the_title(); ?>: <?php the_permalink(); ?>

    — вставляет ссылку статьи

      Оксана
      3.2

      у меня таким образом не получается выводить кнопку на ретвит с моей картинкой. Просто не выводит ее и все. Помогите, пожалуйста.

        Давайте по порядку. Какой код вы вставляете?

        В какой файл и в каком месте?

          Оксана
          3.4

          <a rel="nofollow" target="_blank" href="http://twitter.com/home?status=RT @klassdis : « title=»Добавить в Twitter">

          вот этот

          сначала пробовала через создание записи в админке — вообще не выводилась вся кнопка полностью.

          потом вставила в плагин ADMAN, чтобы выводить после статьи.

          Выводит, но в твитер попадает RT @klassdis : а не само название и ссылка

          Оксана
          3.5

          код некорректно отправился

          В вашем коде я изменила ник в твитере и размер изображения

          Вставила адрес изоражения

          А в твитер попадает «RT klassdis код для title и ссылки»

          а не само название и ссылка

        Оксана вы не правильно вставили код. В частности забыли блок скрипт.

        Вот полный код из статьи выше. Внимательнее к мелочам.

        1
        <div id="twitt_btn_one"><a href="http://twitter.com/share" class="twitter-share-button" data-count="vertical" data-via="webmasterprofru">Tweet</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script></div>

Был рад помочь!!!

А как можно отобразить кнопку твиттера, в которую вставить количество твитерян? На блоге у меня стоит кнопка фида, которая выполнена на css, но там данные берутся с плагина. Есть функция, которая выводит количество твитерян, но как их засунуть в кнопку, не графическую)

    Давайте попробуем разобратся.

    Узнать количество тветерян можно с помощью скрипта и вывести их в нужном месте.

    Кнопку можно сделать в виде ссылки (как у меня показывается количество комментов к статье на главной (это и кнопка и счетчик))

    Единственное неудобство: Это вызовет задержки при загрузке страницы. Так как нужно будет постоянно делать запрос к твитеру.

Я имею в виду кнопку не графическую) Загляните ко мне на блог, фид сделан на css, красиво и обращается к серверу раз в час.

    В моей кнопке нет графики. Только html и css.

    Тогда встает вопрос: какой функционал вы хотите получить от кнопки с твитером?

Даже не столько кнопка, сколько просто счетчик, я неправильно выразился. Не хочется обращаться к плагинам. Dimox сказал, что скоро раскроет эту тему в одном из новых постов)

    Реализовать можно запросом. Я тоже задавался такой задачей и у меня раньше висел такой счетчик.

    Но я его снял. Если интересно могу выложить код!

Да, наверно, можно было даже пост написать, как это сделать. Сам код отображения количества у меня есть, а вот кнопку хочется на css3)

Что-то ретвита я как раз и не увидела. Который вверху поста вставляется. Кнопка банальная обычного твита как у вас в конце поста 🙁 где ретвит взять без плагина?

Написать ответ

Получай обновления блога первым!
Каталог@Mail.ru - каталог ресурсов интернет