Собственная кнопка 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));
?>

<?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>

<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;}

.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;}

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

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