Упрощаем отправку текста из статей в твиттер

В статье: как сделать так, чтобы читатели могли быстро твитнуть выделенный текст или цитату из вашего блога

    Существует два подхода к тому, что и как можно сделать в блоге, чтобы посетителям было легче твитить ваши умные мысли:

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

    Рассмотрим оба варианта подробнее. Кстати, в любом случае вам придётся подключать внешние скрипты и, возможно, стили. Так что если вы не знаете, как это сделать, то самое время ознакомиться. А ещё вам нужно знать, что такое CSS селектор, потому что все решения так или иначе должны быть применены к некоторым элементам страницы, которые будут указаны при помощи этих самых селекторов.

Подход 1: показать кнопку твиттера, если читатель выделил текст

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

    jquery-highlight-twitter

    По названию ясно, что это плагин к jQuery, соответственно, сам jQuery должен быть тоже подключен. Кстати, текст в этом параграфе обрабатывается как раз этим скриптом, так что выделите какой-нибудь его фрагмент и посмотрите вживую, как работает плагин. Код скрипта миниатюрный, можно целиком копировать в шаблон (вот ссылка на скрипт). Из настроек доступна только смена картинки (которую тоже нужно скачать и разместить хотя бы в том же Блоггере). Найдите в коде следующий фрагмент и замените на нужное:

var defaults = {
  image: 'img/twitter.png',
};

Из удобств - автоматическое обрезание текста до 140 символов. Активируется путём вызова функции highlightTwitter() у нужного элемента. Например, на этой странице вызов выглядит так:

<script>
  $('.hl-twitter-1').highlightTwitter();
</script>

, где hl-twitter-1 - класс DIV-а контейнера абзаца.

    selection-sharer

    Тут из названия ничего такого не понятно, но это тоже плагин для jQuery, и тоже демонстрация доступна прямо в этом абзаце - выделяйте и смотрите, как работает. Чуть более приятный вид, авто-обрезание текста тоже присутствует. Весь плагин состоит из единственного скрипта и необходимых стилей, никаких изображений никуда заливать не нужно. Активация:

<script>
  $('СЕЛЕКТОР').selectionSharer();
</script>

    Tweet Highlighted

    Да, это тоже плагин jQuery, но тут уже есть на что посмотреть, кроме авто-обрезания текста. Ссылки на скрипт нет - нужно качать архив и брать оттуда JS файл. Активируется плагин путём вызова

<script>
  $('СЕЛЕКТОР').tweetHighlighted({
    node: 'HTML элемента, который будет показан рядом с выделенным текстом',
    minLength: 6,
    maxLength: 300,
    extra: window.document.location + '',
    via: 'blogopoisk',
    popupArgs: 'width=600,height=600,toolbar=0,location=0'
  });
</script>

, где node - это то, что будет показано рядом с выделенным текстом, например, тэг <img/> с нужной картинкой;

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

maxLength - максимальная длина. В данном примере при выделении текста длиной более 300 символов кнопка твиттера показана не будет;

extra - текст, которые будет добавлен к любому твиту (в данном случае ссылка на страницу источник);

via - текст будет добавлен в самом конце в виде "при помощи @blogspot";

popupArgs - аргументы всплывающего окна - не трогайте, если не знаете, о чём речь.

Если постараться, можно найти много подобных решений разной степени гибкости. Недостатком такого подхода является то, что некоторые люди любят выделять текст в процессе чтения и такие всплывающие элементы будут им очень надоедать. Так что будьте готовы к частым и нудным объяснениям, что польза для вашего блога важнее их привычек. Или всё таки нет? В любом случае, последний вариант частично может решить эту проблему.

Подход 2: показывать кнопку твиттера всегда, но только для заранее указанных фрагментов

    Здесь также существует несколько готовых решений.

    tweetable.js

    Интересен тем, что цитаты могут встраиваться прямо в текст или даже быть скрыты и открываться (т.е. изменять содержимое цитаты) только при попытке твитнуть. Не понятно, зачем это нужно, но раз уж есть... А ещё есть возможность указать связанные твиттер аккаунты. После твита читателю будет предложено зафоловвить указанные аккаунты - стоит обратить внимание на эту опцию. Чтобы установить в блог, скачайте архив по ссылке, распакуйте, подключите JS из архива и стили с той же страницы по ссылке (не забудьте заменить пути к картинкам на свои). Активация плагина:

<script>
  $('[data-tweetable]').tweetable({
    via: 'blogopoisk',
    related: 'список аккаунтов через запятую'
  });
</script>

Цитаты должны быть заключены в HTML элементы с атрибутом data-tweetable, например, так:

<span data-tweetable>умная мысль номер один</span>

- чтобы читатели могли твитнуть умную мысль 1;

<span data-tweetable="умная мысль номер два">твитни меня</span>

- чтобы читатели могли твитнуть умную мысль 2 при нажатии на "твитни меня";

    jQuery ProQuo

    Настраиваемый плагин jQuery для превращения обычных цитат (blockquote) в твиттер-цитаты. На самом деле, не обязательно цитат - будет работать любой селектор, хоть к обычному DIV-у.

Самая обычная цитата (и немножко CSS).
— Блогопоиск

Получилась после вызова

<script>
  $('СЕЛЕКТОР').proQuo({
    tweetLabel: 'Твитнуть'
  });
</script>

Цитата с кавычками (когда твитишь) и кнопкой твиттера.
— Блогопоиск

Получилась после вызова

<script>
  $('СЕЛЕКТОР').proQuo({
    tweetLabel: 'Твитнуть',
    addCurlyQuotes: true,
    useTwitterButton: true
  });
</script>

    У плагина много настроек: можно задать текст ссылки или использовать кнопку твиттера со счётчиком, определить свои функции для создания ссылки (например, используя сокращатель ссылок), цитаты, переопределить внешний вид. Даже странно, что у такого гибкого плагина отсутствуют, например, возможность указать связанные аккаунты (related, как у предыдущего плагина) или определить действие, которое нужно выполнить после того, как читатель твитнул цитату. Последнее, кстати, очень редко встречается. Ни у одного из рассмотренных плагинов такой возможности нет, хотя API твиттера (документация на английском) разрешает и не такое. Например, используя API, можно поблагодарить читателя, если он вас зафоловил. Или добавил твит в избранное. Но увы, обнаружить плагин, который бы всё это реализовывал, не удалось. Если знаете о таком, расскажите в комментариях. А пока такое можно сделать только вручную, но это уже тема отдельной статьи. Впрочем, ручным способом пренебрегать не стоит.

    Делаем цитату для твита самостоятельно

    Простейший вариант цитаты с кнопкой твиттера можно подготовить и самостоятельно, не прибегая к сторонним плагинам - сэкономите посетителям чуть-чуть трафика. Вот пример, как это может выглядеть. Заглянув в HTML страницы, вы увидите, что цитата - это не что иное, как обычная ссылка <a></a>, сформированная специальным образом. В данном случае она выглядит так:

<a href="https://twitter.com/share?text=ТЕКСТ_ТВИТА&via=ТВИТТЕР_АККАУНТ&related=СВЯЗАННЫЕ_АККАУНТЫ&url=ССЫЛКА_НА_СТРАНИЦУ" itemprop="url" rel="nofollow" target="_blank">ТЕКСТ_ЦИТАТЫ</a>

Приправить немножко CSS и цитата готова!

Сегодня я научился делать цитаты для твиттера. А ты?

Вариант для девочек:

Сегодня я научилась делать цитаты для твиттера. А ты?

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

Знаете более удобные варианты автоматизации подготовки цитат для твиттера?