Лично я не большой поклонник Твиттера, но в данный момент он в моде, и даже такой циник, как я, понимает, что это ценный инструмент для общения с вашими клиентами. На самом деле, было так много шума о запуске всего, что вы знаете о CSS, это неправильно! что мы добавили простой виджет «Twitter Buzz» на его страницу продаж.
При создании своего маленького виджета я не мог найти ничего похожего на то, что мне было нужно, поэтому я добавил что-то вместе с PHP и jQuery , и теперь я хотел бы поделиться этим с вами.
Серверный прокси Twitter
Это очень просто. Проверьте это:
<?php header("Content-Type: text/xml"); // replace Foobar with your URL-encoded search term echo(file_get_contents( "http://search.twitter.com/search.atom?q=Foobar")); ?> Здесь мы просто берем результаты поиска с http://search.twitter.com/search.atom?q=Foobar и возвращаем их прямо клиенту. Мы также устанавливаем тип содержимого ответа text/xml ; без этого jQuery не сможет обработать ответ как документ XML DOM.
Виджет Базз на Twitter на стороне клиента
С нашим прокси-сервером на стороне сервера и jQuery мы можем начать вставлять ответ в наш документ. Поместите скрытый div с id twitter-buzz где twitter-buzz нибудь в вашем документе, затем включите следующий JavaScript:
$(function() { $.get("twitter-proxy.php", function(data, status) { // check for success if(status == "success") { // check for entries if($("entry", data).size() > 0) { // create the list var list = $("<ul>").get(0); // iterate through entries $("entry", data).each(function(index, entry) { // parse out the details of the tweet var authorElement = $("author", entry).get(0); var authorName = $("name", authorElement).text(); var authorUri = $("uri", authorElement).text(); var authorImage = $("link[rel='image']", entry).attr("href"); var text = $("title", entry).text(); // add the tweet to our list $(list).append("<li><a href="" + authorUri + "">" + "<img src="" + authorImage + "" alt="" + authorName + "" />" + "</a><span>" + text + "</span>"); }); // add the list to the document $("#twitter-buzz").append(list); // reveal the area $("#twitter-buzz").show("slow"); } } }); });
Он просто получает ответ Atom от созданного ранее прокси-сервера Twitter, создает неупорядоченный список твитов, а затем добавляет их в документ. Даже если что-то пойдет не так, или поиск вернет ноль твитов, страница вообще не будет повреждена; все, что у нас будет — это скрытый пустой div на странице.
Конечно, в этот виджет могут быть внесены улучшения, такие как автоматическое обновление самого себя по таймеру и автоматическое добавление ссылок для @replies, но я оставлю эти функции на ваше усмотрение.