Создание виджета Твиттер
Класс 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>12-11-2011 Twitter API jquery Виктор Матушевский
Lola Elesina
30.10.2012 18:02Виктор! Хотелось бы по шагам, что и куда загружать. А так ничего не понятно.