Добавляем твиты на сайт под управлением Котонти

Добавляем твиты на сайт Cotonti

Добавить средствами JavaScript свои твиты на сайт под управлением Котонти (впрочем, как и любой другой системы управления контентом) несложно и доступно даже пользователю, поверхностно знакомому с правилами HTML-разметки. Весь урок займет не более 15 минут и потребует всего нескольких несложных манипуляций с темой Котонти (aka скин для пользователей Генуи).

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

Откроем файл header.tpl, и в блок head добавим строку

<script src="http://twitterjs.googlecode.com/svn/trunk/src/twitter.min.js" type="text/javascript"></script>

2. Добавляем JavaScript код с парметрами

Любым удобным способом добавим в header.tpl функцию. Параметров в ней будет два -- ID блока, где разместятся твиты и настройки вывода:

    getTwitters('seditioTwits', {
        id: 'seditio',
        count: 5,
        clearContents: true,
        enableLinks: true,
        ignoreReplies: false,
        withFriends: false,
        template: '%text%',
        prefix: '',
        timeout: '10',
        onTimeout: '',
        onTimeoutCancel: false,
        newwindow: false,
        callback: ''
    });

Коротко поясним настройки:

  • id -- ваш твиттер-ник
  • count -- количество твитов (по умолчанию 1)
  • clearContents -- очистить контейнер от присутствующего там контента (по умолчанию true)
  • enableLinks -- определять ссылки (по умолчанию true)
  • ignoreReplies -- игнорировать ответы, т. е. твиты, начинающиеся на @
  • withFriends -- показывать твиты друзей (по умолчанию false, эта опция временно отключена)
  • template -- HTML-шаблон внутри элемента списка li (список переменных см. ниже)
  • prefix -- простая замена шаблону, например, 'I said: '
  • timeout -- таймаут в мс перед запуском onTimeout
  • onTimeout -- функция, вызываемая по истечении таймаута
  • onTimeoutCancel -- отключает нежелательное завершение скрипта (по умолчанию false)
  • newwindow -- открывает ссылки в новом окне (по умолчанию false)
  • callback -- функция, вызываемая по завершении рендера (не срабатывает при таймауте скрипта)

... и пройдемся по переменным шаблона (их необходимо окружать знаками %):

  • text -- собственно твит
  • idstr -- id твита
  • source -- источник
  • time -- относительное время
  • created_at -- чистое время
  • user_name -- имя пользователя
  • user_screen_name -- ник
  • user_id_str
  • user_profile_image_url -- аватар
  • user_url -- веб сайт пользователя
  • user_location -- местоположения пользователя
  • user_description -- описание пользователя

3. HTML-контейнер

Контейнер для твитов может выглядеть примерно так:

<div id="seditioTwits">
  <p>Дождитесь загрузки твитов <img src="./skins/{PHP.skin}/images/indicator.gif" /></p>
  <p>Надоело ждать? Мои твиты <a href="http://twitter.com/seditio">здесь</a></p>
</div>

Напомню, что опция clearContents очистит контейнер при загрузке твитов.

4. Стили

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

<div id="seditioTwits">
  <ul>
    <li>
      <span class="twitterPrefix">I said: </span>
      <span class="twitterStatus">Join up with our discussions at cotonti.com!</span>
      <span class="twitterTime">20 minutes ago</span>
    </li>
...
  </ul>
</div>

Сообразно этой схеме и необходимо формировать таблицу стилей.

Заинтересовались? Звоните нам по телефонам +375 (29) 774-35-89 и +375 (44) 774-35-89 в Минске. Мы будем рады помочь Вам в реализации Вашего проекта.

К посту «Добавляем твиты на сайт под управлением Котонти» комментариев пока нет

Новый комментарий

Для редактирования комментария осталось 10 минут