Создание виджета Твиттер

Создание виджета Твиттер

Класс TwitterAPI

Код, приведенный ниже создаёт объект с именем “TwitterAPI”, который имеет член класса (объект) “Statuses”, который содержит  методы user_timeline со следующими параметрами:

  • screen_name: (string) Ваше имя в twitter
  • count: (int) количество отображаемых статусов
  • callback: (function) javascript функция, которая будет запущена, когда будет готов результат json

для более полной информации по данным методам обращайтесь к Twitter API Wiki

TwitterAPI = {
 Statuses: {
   user_timeline:function(screen_name, count, callback){
     jQuery.getJSON("http://twitter.com/statuses/user_timeline/" + screen_name + ".json?count="+count+"&b="+Math.random()+"&callback=?",
     callback);
    }
 }
};

Внедрение

Создайте HTML DOM контейнер в теле сайта или в боковой части, где вам необходимо, чтобы появлялись сообщения Твиттера (напр. ID: HTML5:aside)

<aside></aside>

Загрузите jquery фреймворк

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.3/jquery.min.js"></script>

Указанный выше код (API Класс и Функция использования метода) после загрузки jQuery, вы можете либо вставить его между или перед закрывающим тегом. Далее вам нужно запустить API метод при готовности модели DOM с параметрами, указанными выше.

jQuery(document).ready(function($){
TwitterAPI.Statuses.user_timeline("viktorminator",5,function(json){
  var content = '<ul>';
 $.each(json, function(i){
   var tweet = this['text'];
   var d = new Date(this['created_at']);
   var date_show = d.getDate()+'/'+d.getMonth()+'/'+d.getFullYear()+' '+d.getHours()+':'+d.getMinutes();
   content += '<li>' + tweet + ' (<date>'+date_show+'</date>)</li>';
 });
 content += '</ul>';
 $('aside').append(content);
});
});

Настройка

Если вы следовали описанными выше шагам, то теперь у вас появится неотформатированный список ваших твиттов, теперь вам нужно преобразовать “упоминания (@)”, “хештеги (#)” и “валидные url-форматы” в кликабельные ссылки, с этой целью я взял функцию описанную ниже из кода Реми Шарп (базированный на коде Дастин Диас).

window.ify=function(){var entities={'"':'"e;','&':'&','<':'<','>':'>'};return{"link":function(t){return t.replace(/[a-z]+:\/\/[a-z0-9-_]+\.[a-z0-9-_:~%&\?\/.=]+[^:\.,\)\s*$]/ig,function(m){return'<a href="'+m+'">'+((m.length>25)?m.substr(0,24)+'...':m)+'</a>';});},"at":function(t){return t.replace(/(^|[^\w]+)\@([a-zA-Z0-9_]{1,15})/g,function(m,m1,m2){return m1+'@<a href="http://twitter.com/'+m2+'">'+m2+'</a>';});},"hash":function(t){return t.replace(/(^|[^\w'"]+)\#([a-zA-Z0-9_]+)/g,function(m,m1,m2){return m1+'#<a href="http://search.twitter.com/search?q=%23'+m2+'">'+m2+'</a>';});},"clean":function(tweet){return this.hash(this.at(this.link(tweet)));}};}();

Просто скопируйте код в ваш HTML документ (шаблон) и далее вам необходимо немного поменять функции вызова, как указано ниже:

jQuery(document).ready(function($){
 TwitterAPI.Statuses.user_timeline("viktorminator",5,function(json){
   content = '<ul>';
   $.each(json, function(i){
     var tweet = ify.clean(this['text']);
      var d = new Date(this['created_at']);
     var date_show = d.getDate()+'/'+d.getMonth()+'/'+d.getFullYear()+' '+d.getHours()+':'+d.getMinutes();
     content += '<li>' + tweet + ' (<date>'+date_show+'</date>)</li>';
   });
   content += '</ul>';
   $('aside').append(content);
 });
});

Вот и всё. Теперь у вас есть собственный виджет.

Есть ограничения, по количеству запросов в час, поэтому если у вас страницы с большим траффиком, то вам необходимо использовать механизм кешированния иначе у вас появится сообщение об ошибке превышения количества запросов от Twitter API.

Конечный код

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>JQuery JSONP + Twitter API</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
TwitterAPI = {
 Statuses: {
   user_timeline:function(screen_name, count, callback){
     jQuery.getJSON("http://twitter.com/statuses/user_timeline/" + screen_name + ".json?count="+count+"&b="+Math.random()+"&callback=?",
     callback);
    }
 }
};
// @rem
window.ify=function(){var entities={'"':'"e;','&':'&','<':'<','>':'>'};return{"link":function(t){return t.replace(/[a-z]+:\/\/[a-z0-9-_]+\.[a-z0-9-_:~%&\?\/.=]+[^:\.,\)\s*$]/ig,function(m){return'<a href="'+m+'">'+((m.length>25)?m.substr(0,24)+'...':m)+'</a>';});},"at":function(t){return t.replace(/(^|[^\w]+)\@([a-zA-Z0-9_]{1,15})/g,function(m,m1,m2){return m1+'@<a href="http://twitter.com/'+m2+'">'+m2+'</a>';});},"hash":function(t){return t.replace(/(^|[^\w'"]+)\#([a-zA-Z0-9_]+)/g,function(m,m1,m2){return m1+'#<a href="http://search.twitter.com/search?q=%23'+m2+'">'+m2+'</a>';});},"clean":function(tweet){return this.hash(this.at(this.link(tweet)));}};}();
</script>
</head>
<body>
<aside>
<h3>My Tweets</h3>
</aside>
<script type="text/javascript">
jQuery(document).ready(function($){
TwitterAPI.Statuses.user_timeline("chazzuka",5,function(json){
  content = '<ul>';
 $.each(json, function(i){
   var tweet = ify.clean(this['text']);
    var d = new Date(this['created_at']);
   var date_show = d.getDate()+'/'+d.getMonth()+'/'+d.getFullYear()+' '+d.getHours()+':'+d.getMinutes();
   content += '<li>' + tweet + ' (<date>'+date_show+'</date>)</li>';
 });
 content += '</ul>';
 $('aside').append(content);
 });
});
</script>
</body>
</html>
Дополнение голосования CSS starrating HTML5 бесплатные шаблоны