Отображение закладок Twitter с помощью JavaScript

На днях я работ над небольшим своим проектом, он не использует никаких систем управления контентом (таких как WordPress или Joomla). Проект написан на HTML и CSS. Итак, я хотел отобразить мои последние записи в Twitter, и украсить его с помощью CSS. Люди, которые используют WordPress, и хотят вывести свои записи с Twitter, они просто устанавливаю специальный плагин, который сделает все за них.

Но помните, что мой сайт написан на HTML и CSS, и не использует никакую систему управления контентом. Теперь рассмотрим, как мы может показывать свои последние записи. Мы будем использовать Twitter API. Показывать свои последние записи можно с помощью JavaScript функции twitterCallback. Урок разбит на несколько простых шагов для лучшего понимания.

Шаг 1

Во-первых, решите, где будут показаны Ваши записи. Затем вставьте туда этот код:

 
				<div  id="twitter_update_list">
				</div>
				

Шаг 2

Затем нужно разместить эти две строки JavaScript кода. Не забудьте поменять 12345 на свои имя пользователя в Twitter.

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

Теперь у Вас есть вывод последних записей в виде обычного текста. Вот так просто!

Конечно, все Web-дизайнеры должна придерживаться какой-то стилизации, даже для вывода заметок. В данный момент вывод происходит в качестве маркеров списка. Чтобы сделать отображение заметок красочным, будем использовать CSS.

 
				#twitter_update_list li {
					list-style-type:  none; 
			    }
				

Затем вы можете изменить цвет основного текста заметок. Я сделаю так:

 
				#twitter_update_list  span { 
					color:  #FFCC00; 
					background: #000000; 
			    }
				

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

 
				#twitter_update_list  span a { 
					display:  inline; 
					color:  #000000; 
			    } 
			    #twitter_update_list  span a:hover { 
					text-decoration:  underline; 
					color:  #666666; 
			    }
				

Вы можете поэкспериментировать со стилями и добиться результата, который Вам понравиться.

У меня получилось так:

Twitters API является очень большим. Вы можете поиграть со многими различными настройками для функции twitterCallback. API документацию Вы можете посмотреть тут.

Вот и все получайте удовольствие!