Twitter на вашем сайте

Май 29th, 2011 Рубрики: JavaScript, Вкусняшки coubertin.cz www.colvillewoodworking.com

Давно я не писал в блог, хотя и было о чем. Это плохо, будем наверстывать. Ну а теперь о деле, сегодня Bosha решил повесить на свой бложек последние сообщения из twitter’а, решил ему помочь. Немного пошуршал поиском и вот удобный способ вставки последних n сообщений из twitter’а всего 2 js файлами. К слову у Bosh’и он не захотел работать, но а у меня все работало, работу этого скрипта вы можете видеть на моем блоге. Теперь о реализации.
Все что нам нужно это пара javascript расположенных на самом Twitter’е.

1
2
<script type="text/javascript" src="http://twitter.com/javascripts/blogger.js"></script>
<script type="text/javascript" src="http://twitter.com/statuses/user_timeline/%nicname%.json?callback=twitterCallback2&count=5"></script>

Естественно %nicname% нужно заменить на ваш ник в twitter’е. Причем не ник введенный в настройках а тот что находится в адресной строке, например

1
http://twitter.com/#!/Zekarion

Ну а параметр count=5 в конце адреса второго скрипта отвечает за количество выводимых сообщений, я предпочел больше 5 не выводить.
Желательно скрипты разместить в самом конце, перед тегом </html>, мало ли как долго они будут грузится?

Теперь в месте где вы хотите выводить свои сообщения необходимо расположить следующий код:

1
2
3
<h3>Twitter</h3>
<ul id="twitter_update_list">
</ul>

Немного стилей

1
2
3
4
5
6
7
8
9
10
11
12
13
14
.twitter_h {
  color: blue;
  font-size: 10pt;
  font-family:Verdana;
  padding: 0px;
}

.twitter_mess {
  width:200px;
  font-family:verdana;
  font-size:8pt;
  padding-left: 17px;
  list-style-image:url(http://storage7.static.itmages.ru/i/11/0529/h_1306687297_83ee413ccd.png);
}

Ну и классы присвоить

1
2
  <h3 class="twitter_h">Twitter</h3>
  <ul id="twitter_update_list" class="twitter_mess"></ul>

И уже можно жить:

My twetter post

Ну вот вроде и все, остается только переделать под себя и дописать стили, и будет ляпота 🙂

UPD Пока писал в бложе оказалось что Bosha все таки заставил работать скрипт и у себя, хотя как именно для нас осталось загадкой 😀

Похожие записи:

  1. Cufon, или 100500 шрифтов на вашем сайте
  2. Украшаем checkbox средствами Jquery
  3. Использование разных стилей для разных разрешений
  4. Подсветка кода в textarea
  5. PNG и Internet Explorer или фиксим PNG в IE
Теги: , ,
Оставить комментарий | Trackback

4 комментария к “Twitter на вашем сайте”

  1. Asert
    Май 30th, 2012 at 11:39
    1

    Спасибо за материал:)

    [Ответить]

    ZekMan Reply:
    Май 30th, 2012 at 12:24

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

    [Ответить]

  2. Артем
    Январь 12th, 2013 at 23:25
    2

    как дату вывести например в виде 12.01.2012?

    [Ответить]

    ZekMan Reply:
    Январь 13th, 2013 at 14:39

    Никак, что бы выбирать данные которые выводим — нужно подключать более полный API а не просто JS библиотечку

    [Ответить]

Написать комментарий