Twitter в блоге 3.0 Beta

Привет всем, в этот прекрасный (в некоторых частях планеты) первый день лета я хочу представить новую версию самого клёвого скрипта для вставки сообщений из твиттера под номером 3.0, не смотря на то, что он ещё Beta им уже можно вполне спокойно пользоваться :)

Из нововведений:

  • Скрипт теперь плагин для jQuery
  • Появились настройки
  • Появилась честная возможность выводить несколько твитов
  • Появился callback

А теперь подробнее. Скрипт теперь стал полноценным плагином для jQuery, а это значит, что его теперь можно вызывать так:

$(target).getTwit(options,callback)

Теперь давайте рассмотрим все параметры, так сказать, вблизи:

  • name — имя пользователя в твиттере, обязательно для указания.
  • num — кол-во отображаемых твитов, стандартное значение — 1.
  • wrapperClass1 — класс для div-обёртки, если не указан — обёртка не выводится.
  • wrapperClass2 — класс для div-обёртки чётных твитов, если не указан — для всех обёрток класс одинаков.
  • deltaClass — класс для div с информацие о дате добавления, по умолчанию — deltaLnk.
  • linksTarget — значение параметра target у ссылок, по умолчанию — _blank.
  • showName — значение 1 или 0 (true или false), при 0 скрывает имя пользователя, которое добавляется перед сообщением. По-умолчанию — 1
  • showTitles — значение 1 или 0 (true или false), при 0 убирает атрибуты title у ссылок в тексте результата.

То есть, если вы хотите поместить 3 последних твита пользователя bobuk в блоках-обёртках с классом twiWrap в блок #twitter, и в коллбеке вызвать алерт с текстом «completed!» вызов функции у вас должен быть такой:

$('#twitter').getTwit({name:'bobuk',num:3,wrapperClass1:'twiWrap'},function(){alert('completed!')})

Стандартный результат работы скрипта выглядит так:

<!--[Только если showName = 1]-->
<a href="<!--[cсылка на профиль в твиттере]-->">
    <!--[имя]-->
</a>:
<!--[///]-->
<span>
    <!--[текст твита]-->
</span>
<div class="<!--[значение deltaClass]-->">
    <a href="<!--[ссылка на страницу твита]-->" target="<!--[Значение linksTarget]-->" >
       <!--[время прошедшее с момента добавления твита]-->
    </a>
</div>
Ну а если вы добавили div-обёртку и, например установили num на 2, а showName на 0 код будет выглядеть примерно следующим образом:
<div class="<!--[значение wrapperClass1]-->">
    <span>
       <!--[текст твита]-->
    </span>
    <div class="<!--[значение deltaClass]-->">
       <a href="<!--[ссылка на страницу твита]-->" target="<!--[Значение linksTarget]-->" >
          <!--[время прошедшее с момента добавления твита]-->
       </a>
    </div>
</div>

<div class="<!--[значение wrapperClass2]-->">
    <span>
       <!--[текст твита]-->
    </span>
    <div class="<!--[значение deltaClass]-->">
       <a href="<!--[ссылка на страницу твита]-->" target="<!--[Значение linksTarget]-->" >
          <!--[время прошедшее с момента добавления твита]-->
       </a>
    </div>
</div>

Сжатая версия скрипта расположена по этой ссылке.

Я успел заметить, что не все пользователи моего скрипта знакомы с CSS так же хорошо, как я. Поэтому приведу несколько примеров селекторов, которые помогут в использовании этого скрипта. За данное возьмём id блока, в который вставляется результат равный twitter
  • Если вам нужно выбрать все ссылки в тексте твита используйте селектор #twitter span a
  • Если вам нужно выбрать ссылку на профиль в твиттере используйте и вы не используете div-обёртку — #twitter > a
  • То же самое, но при использовании обёртки #twitter > div > a
Так же, несколько вещей которые нужно запомнить перед использованием скрипта:
  • При каждом вызове функции JSON с данными загружается снова. (позднее будет настраиваемой фичей)
  • Вызывать ф-ию можно только после загрузки всей страницы, чтобы запрос JSONa с данными не тормозил загрузку страницы
  • Производить действия над результатом работы скрипта можно только после его полного выполнения то есть внутри сallback
  • Ф-ия cntRus вынесена отдельно, что позволит вам использовать в своих скриптах. Создана она из скрипта Aleko, а как она работает предлагаю разобраться самим

Не абсурдные предложения по скрипту с радостью принимаются в комментариях.

Creative Commons License

01.06.2010
Скрипты
Добавлено 7 комментариев. Написать свой.
Владимир
0    
Оно конечно круто, но что куда копировать и где сохранять, чтобы скрипт начал работать?
Если не знаете даже, что куда копировать и где сохранять — лучше не пользуйтесь.
Ну вообще-то далеко не все тут продвинутые js-кодеры. Можно было бы чуточку подробнее про вызов функции.
почему так
Code
$('#twitter').getTwit({name:'bobuk',num:3,wrapperClass1:'twiWrap'})

а не так
Code
$('#twitter').getTwit({name:'bobuk',3,'twiWrap'})

???
Потому что это параметры (внимание на {} ), а не переменные.
Предложение: добавить возможность поиска текста, чтобы получилось что-то вроде вот этого.
kont-nn@mail.ru
+1    
almlex, Может вы тогда попробуете написать виджет или гаджет для удобства установки. Тогда действительно этим люди пользоваться смогут.

Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]