Виджет твиттера для blogger


С увеличением популярности твиттера в России в рунете расплодилось немало всяких скриптов и виджетов для твиттера. Один виджет привлёк моё внимание, о чём ниже и поговорим.


Виджет хорошоший, анимированный и очень гибкий. Работает от одного js, который лежит на хостинге у разработчика. Это и будет ссылка на первоисточник (http://widgets.twimg.com/j/2/widget.js), а то скажут, мол присваивает чужие разработки себе, негодяй...

Небольшое отступление.
Нафига это нужно? Можно виджет повесить в сайдбар, можно на отдельную страницу к которой будет вести кнопка твиттера с главной, можно сделать совсем круто - подцепить виджет в выдвигающуюся панель...

Теперь смотрим демку:

И начинаем разбор полётов.

Первое, что нужно сделать - это сделать нехорошую вещь: скачать по вышеприведённой ссылке скрипт, исправить в нём все внешние ссылки (и одну надпись "Join to conversation"), которые любят оставлять авторы сервисов и положить на свой, повторяю, НА СВОЙ, хостинг.
Если не знаете, как пользоваться блокнотом, можете скачать мною исправленный скрипт здесь. Своих ссылок я "туды не сувал", можно смело качать. И, да, потом кладите на свой хостинг.

Код выглядит так (кладите в свой блог, куда хотите):
<div class="twitter">
<script src="http://ВАШ_ХОСТИНГ/widget.js"></script>
<script>
new TWTR.Widget({
  version: 2,
  type: 'search',
  search: 'НАЗВАНИЕ_УЧЁТКИ_В_ТВИТТЕРЕ',
  interval: 6000,
  title: '',
  subject: 'НАЗВАНИЕ_УЧЁТКИ_В_ТВИТТЕРЕ в прямом эфире',
  width: 'auto',
  height: 300,
  theme: {
    shell: {
      background: '#ff751f',
      color: '#ffffff'
    },
    tweets: {
      background: '#ffffff',
      color: '#ff751f',
      links: '#1fcdff'
    }
  },
  features: {
    scrollbar: false,
    loop: true,
    live: true,
    hashtags: true,
    timestamp: true,
    avatars: true,
    toptweets: true,
    behavior: 'default'
  }
}).render().start();
</script></div>

Настройки.
Цвета рамки виджета, ссылок и постов:
theme: {
    shell: {
      background: '#ff751f',
      color: '#ffffff'
    },
    tweets: {
      background: '#ffffff',
      color: '#ff751f',
      links: '#1fcdff'
    }
  },
Названия html цветов можете взять здесь, покрутив колёсико.

В этом блоке задаются размеры (ширина стоит авто (сама подстраивается), высота в 300 пикселей):
width: 'auto',
  height: 300,

Во features настраивается поведения твитов: убран скролбар, поставлена закольцованность, включены автарки и т.п.

Постового нет, а в качестве бонуса оставляю вот такую картинку:

Комментариев нет:

Отправить комментарий