Собственная кнопка Retweet с счетчиком без плагинов

Сегодня я расскажу как сделать кнопку Retweet с счетчиком и с собственным оформлением, по сути, какую захотите такая и будет. Для этого мы будет использовать  Topsy's Otter API.

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

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

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

Обратите внимание, что кнопка обязательно должна размещаться в пределах Loop

Разместим в нужном месте следующий php-код:

<?php
    $shareUrl = urlencode(get_permalink($post->ID));
    $shareTitle = urlencode($post->post_title);
    $retweetNick = 'your_twitter_account'; // Ваш твиттер-аккаунт
    $retweetInfo = json_decode(file_get_contents('http://otter.topsy.com/stats.json?url='.$shareUrl));
?>

Ниже вставьте html-код:

<div class='retweet'>
    <a href='<?php echo $retweetInfo->response->topsy_trackback_url; ?>' class='count'><?php echo $retweetInfo->response->all; ?></a>
    <a href='http://button.topsy.com/retweet?nick=<?php echo $retweetNick; ?>&title=<?php echo $shareTitle; ?>&url=<?php echo $shareUrl; ?>' class='button'>добавить в твиттер</a>
</div>

И, наконец, css-код:

.retweet {width: 180px; margin: 15px auto;}
.retweet a {border-radius: 2px; -moz-border-radius: 2px; -webkit-border-radius: 2px; display: block; float: left; height: 26px; line-height: 26px; padding: 0 10px; text-decoration: none;}
.retweet .count {color: #3e8704; font-size: 14px; margin-right: 1px; background: #d5d4d4;}
.retweet .button {color: #fff; font-size: 12px; font-weight: bold; text-shadow: 0 1px 0 #07607f; background: #1ab2e7;}

Вот и все. Кнопка полностью сохраняет функциональность оригинального плагина. Разметка очень простая и ее легко изменить, создавая свои уникальные кнопки.

Если возникли вопросы, задавайте в комментариях, буду рад на них ответить.

Метки: , ,

Комментарии

  1. grayhead 02.07.2010 в 09:54 #

    А где же rel="nofollow" :)

    • Neolot 02.07.2010 в 10:26 #

      Это уже на ваше усмотрение. Я лишь указал путь :)

  2. Mashkovtsev 02.07.2010 в 10:08 #

    Как на блоге вебмозга :) спасибо :) интересно было, как так сделать можно :)

  3. Never Lex 02.07.2010 в 11:46 #

    А не правильней использовать Twitter API? Или он не позволяет делать подобные ретвиты?. Кстати, а что считает кнопка? Все ретвиты или количество нажатий?

    • Neolot 02.07.2010 в 12:00 #

      Через Twitter API можно, я привел пример реализации через Topsy. Кнопка считает все ретвиты.

  4. max 02.07.2010 в 15:13 #

    начинаю изучать php, не подскажете что означает запись $post->post_title и в частности что делает значок стрелки?

    • Neolot 02.07.2010 в 15:27 #

      Это относится к теме ООП (объектно-ориентированного программирования). Стрелка означает обращение к данным, в данном случае к заголовку в глобальной переменной $post.

      • max 02.07.2010 в 21:23 #

        то есть должен быть какой-то файл с описанием этих переменных, а где он прописан?

        спасибо заранее :)

  5. Never Lex 02.07.2010 в 15:29 #

    Там бы поправить код возле «response->all» :)

    • Neolot 02.07.2010 в 15:35 #

      Спасибо, поправил. Редактор рубит php-символы, приходится по 100 раз проверять.

      • Never Lex 02.07.2010 в 15:39 #

        Заметил, потому что себе как раз ворую код :)

        • Neolot 02.07.2010 в 15:42 #

          Затем и выложен :) Сейчас вроде точно должно работать.

          • Never Lex 02.07.2010 в 15:57 #

            Да я сам подправил уже.

  6. felix 02.07.2010 в 19:20 #

    Вчера пытался сделать тоже самое для своего сайта, получилось определять количество только для уже ранее опубликованных постов, для новых он почему-то выводил знак вопроса и ошибку. Выводил URL с помощью PHP переменных серверных — решил сделать как проще. =) Не вышло! Попробую Ваш вариант.

  7. toribloger 02.07.2010 в 20:19 #

    спасибо, довольно интересно

    в закладки заберу, а там может на досуге и к себе куда-нибудь пристрою ;)

  8. Олег Маркарьян 03.07.2010 в 13:02 #

    Полезно! Подписался на обновления блога:)

  9. skforussia 02.12.2010 в 15:59 #

    спасибо что плагин ставить не нужно

  10. Роман 05.03.2011 в 20:22 #

    Здравствуйте, спасибо за мануал, раньше искал и не мог найти что-то подобное, а тут случайно увидел и аж обрадовался! :)

    Вопрос таков, а можно также сделать с Фейсбуком? Заранее спасибо!

  11. Саша 12.10.2011 в 23:48 #

    всё работает. замечательно, но вот подскажите. у меня виден код на странице. как мне его спрятать? и что значит в пределах Loop? может в моём шаблоне в файле single.php нет функции loop? сразу хочу извиниться за может быть дилетантский вопрос.

  12. Саша 13.10.2011 в 00:04 #

    поиск помог мне. всё получилось. теперь у меня вместо тяжёлого (так везде пишут) плагина, быстрый retweet twitter`а

    спб

  13. Саша 13.10.2011 в 04:04 #

    а как сделать rel="nofollow" вот сюда $retweetInfo = json_decode (file_get_contents ('http://otter.topsy.com/stats.json?url='.$shareUrl));

    ?>

  14. Мохнатый 31.10.2011 в 11:24 #

    Спасибо, красиво получилось...)

Ваше мнение

Если вам нужно вставить код, оберните его в специальный шорткод [php], [html], [css], [js].
Например: [js]Ваш код[/js]