Кнопка Retweet своими руками? Легко!

Tweet и Retweet. Вот в чем вопрос.Многие владельцы блогов стремятся добавить больше интеграции с популярными соц-сетями такими как Twitter, LiveJournal, Google Buzz, Blogger и другими. Сегодня пойдет речь о Твиттере. Существует множество онлайн-сервисов, который предоставляют различные плагины для WordPress и других популярных блоггинговых систем, чтобы владельцы блогов смогли добавить себе на сайт одну маленькую простенькую невзрачненькую кнопочку с надписью Retweet и количеством затвитченых записей. Некоторые даже на этой кнопке делают себе карьеру в интернете и неплохо зарабатывают. Я же предлагаю легкий и честный путь — сделай кнопку сам. Собственно далее и пойдет речь о кнопке Retweet.


Чтобы сделать кнопку нам потребуется создать 1 файл JavaScript. Не так уж и много. Правда? Возьмем за основу скрипт моего коллеги Джона Ресига (John Resig). Данный скрипт уже умеет делать все что нам нужно и даже больше. Скрипт создает симпотичную кнопочку с произвольной надписью, а также еще преобразует URL в которткий вид с помощью сервиса Bit.ly JavaScript API Сам скрипт можно будет забрать чуть ниже, а пока я расскажу как им пользоваться.

Скрипт может создавать кнопки двух видов — вертикальные и горизонтальные. Тут уж кому как нравится. Но самое главное достоинство — это ассинхронная работа. Тобишь если внедрить эту кнопку без скрипта непосредственно в код сайта, то сайт будет поддтормаживать при загрузке, а с помощью скрипта вы лишены любых тормозов при проседании сервиса Twitter и Bit.ly.

Итак, чтобы создать кнопку, нам нужно определить ссылку (<a> … </a>) и указать определенный класс (class) ссылки. Различные варианты определения ссылки и текста также присутствуют. Сейчас мы их и посмотрим на примере.

Примеры (все кнопки кликабельны и рабочие на 100%):

Блог Безумного Джека

<a class="retweet" href="http://madjack.ru">Блог Безумного Джека</a>

Поисковая система Yandex

<a class="retweet" href="http://yandex.ru">Поисковая система Yandex</a>
<a class="retweet vert" href="http://google.com">Поисковая система Google</a>

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

1. Подключите скрипт к странице

<script src="http://madjack.ru/retweet/retweet.js"></script>

2. Добавьте класс retweet к любой ссылке и она превратиться в кнопку, как показано на примере выше.

Скрипт можно скачать здесь — Retweet Button Script.

Оригинал скрипта и мануала (на английском языке) автора находится здесь.

Поделитесь статьей:
Константин

Константин

Программист, фрилансер, фотограф любитель, автолюбитель, геймер, писатель, читатель.

Отправить ответ

15 Комментарий на "Кнопка Retweet своими руками? Легко!"

Notify of
avatar
2000
Сортировать:   новые | старые | наиболее популярные
Ismail
Гость

Спасибо огромнное! А то в сети посты только о том как поставить плагин, для людей работающих с старым-добрым html постов не нашлось!

Константин
Гость

Да незачто=) Пользуйтесь. Есть еще в сети не жадные люди, вроде меня=)

nameless
Гость

Еще не глядел код скрипта, только собираюсь, скрипт умеет читать скоко раз запись ретвитнули?!?

Константин
Гость

А что на примерах не видно разве?

nameless
Гость

быстрым взглядом подумал, что это номер сторчки кода

Константин
Гость

Хаха=) А неторопливым взглядом понял что это таки «сколько раз запись ретвитнули»=)) Бери скрипт. Пользуй=) Потом покажешь. Скрипт кстати разработал автор библиотеки JQuery. Так что тут все схвачено.

nameless
Гость

На примерах видно, что считает а на самом деле тупо 2 показывает всегда

nameless
Гость

Спасибо, без Вас я бы такой скрипт оч долго сам писал, а тут только разобраться и все)))

Константин
Гость

Да там все правильно. Скрипт то использует API твиттера. Как твиттер считает так и выдает. На фэйсбуке например там меньше 4 фейсов вообще не считает и показывает 0. Так что скрипт нормальный.

fike
Гость

Вы ошибаетесь, скрипт показывает количество переходов по ссылке, а не ретвитов

Константин
Гость

Может конечно я и ошибаюсь, но судя по коду скрипт с помощью Bit.ly API считает сколько твитов на эту ссылку. Если есть четкие доказательства что это не ретвиты а клики — предоставьте участок кода который за это отвечает. Иначе как разобрать то.

fike
Гость

Запостите в Твиттер сыслку и с разных компьютеров походите по ней, цифры изменятся

fike
Гость

Да, я был прав, только что накрутил с 6 до 16

Sierronik
Гость

Спс ;D

Константин
Гость

Всегда пожалуйста.

wpDiscuz
Весь контент, размещенный на сайте madjack.ru является интеллектуальной собственностью автора (если явно не указано обратное).
При копировании или использовании контента - обязательно указывайте ссылку на страницу с ним.
Все права защищены © Дьяков Константин Сергеевич, 2008-2015