귀하 또는 귀하의 회사에 Twitter 계정이 있는 경우 이를 홍보하고 귀하의 웹 사이트에서 최신 트윗을 표시하고 싶을 가능성이 있습니다. 많은 웹사이트(개인용 및 비즈니스용)가 WordPress와 같은 블로깅 소프트웨어를 기반으로 구축되기 때문에 일반적으로 플러그인을 통해 구현되며 그 중 많은 것이 있습니다.
그러나 라이브 Twitter 피드를 "일반" 웹 페이지에 추가하려는 경우에는 어떻게 해야 합니까? Twitter 자체는 여러 HTML 위젯을 제공합니다., 하지만 이 기사에서는 약간의 JavaScript, CSS 및 jQuery를 사용하여 얼마나 쉽게 달성할 수 있는지 보여 드리겠습니다.
이전에 본 적이 없는 경우:
jQuery 란 무엇입니까?
jQuery 빠른 웹 개발을 위해 HTML 문서 순회, 이벤트 처리, 애니메이션 및 Ajax 상호 작용을 단순화하는 빠르고 간결한 JavaScript 라이브러리입니다. 그것은 매우 강력하고 JavaScript를 작성할 때 인생을 훨씬 더 쉽게 만듭니다. 웹 페이지에 jQuery를 포함하려면 다음을 추가하십시오. 태그:
이것은 Google 코드에서 호스팅되는 버전을 사용하므로 파일을 다운로드할 필요가 없습니다.
트위터 API
Twitter 자체는 모든 종류의 항목에 대한 액세스를 허용하는 복잡한 API를 제공합니다. 인증과 관련하여 이러한 복잡한 문제가 많이 발생하고 필연적으로 발생하지만 감사하게도 간단히 검색할 수 있습니다. 트윗 스트림, 인증이 필요하지 않습니다(문제의 사용자가 트윗을 숨기지 않는 한).
우선 API는 다양한 방법을 제공합니다. 사용자의 상태. 나는 내가 선호하는 것 외에는 다른 어떤 것도 다루지 않을 것이며, 이것이 내가 여기서 이야기할 것입니다: user_timeline.
user_timeline
이것은 사용자가 게시한 가장 최근의 여러 상태를 반환합니다. XML, JSON, RSS 및 Atom과 같은 다양한 형식으로 데이터를 반환할 수 있습니다. 나는 선호한다 JSON, 가벼운 데이터 교환 형식이므로 이것이 내가 이야기할 형식입니다.
여러 매개변수를 사용할 수 있으며 수행할 수 있는 작업의 전체 목록은 Twitter API 설명에서 찾을 수 있습니다. user_timeline. 지금은 관련된 몇 가지만 사용하겠습니다.
나에게 트윗을 줘!
특정 Twitter 계정에 대한 데이터를 검색하려면(저는 pcpro 이 예에서는 여기) 다음을 호출합니다.
$.getJSON("http://twitter.com/statuses/user_timeline.json?
screen_name=pc_pro&count=10&callback=?",
function(tweetdata) {
// do some stuff here
});
그러면 pc_pro 계정의 마지막 10개 트윗이 JSON 형식으로 반환됩니다. tweetdata 변하기 쉬운. 기본적으로 리트윗된 트윗은 이 피드에 포함되지 않지만 포함하려면 &include_rts=1 위의 매개변수를 사용하면 반환됩니다.
물론 우리는 이제 이 데이터를 이해하고 파싱하고 실제로 무언가를 해야 합니다.
HTML 페이지에서 그리고 아이디를 줘 tweet-list. 이것은 우리가 트윗을 보관할 곳입니다. 위의 코드는 다음을 수행하도록 확장됩니다.
$.getJSON("http://twitter.com/statuses/user_timeline.json? screen_name=pc_pro&count=1O&callback=?", function(tweetdata) {
var tl = $("#tweet-list");
$.each(tweetdata, function(i, tweet) {
tl.append("
});
});
몇 가지 설명: var tl = $("#tweet-list"); 에 대한 참조를 가져옵니다. 위에서 만든 요소입니다. 각 트윗을 추가할 때 이것이 필요합니다.
$.each(tweetdata, function(i, tweet) {... jQuery 루프의 시작이며, 이 경우 각 항목을 반복합니다. tweetdata 그리고 임시로 저장 tweet. 다음 줄은 다음 안에 트윗을 추가합니다. 안건. 트윗의 실제 텍스트는 text 데이터 멤버, 여기에서 큰따옴표로 묶고 생성된 시간은 created_at 데이터 멤버.
이제 관련 HTML 페이지에 목록 형식으로 최근 10개의 트윗이 표시됩니다.
단, 트윗에 포함된 링크가 있는 경우 클릭이 불가능하며 생성일은 약간 길고 "약 1분 전" 또는 "2시간 전"과 같은 Twitter 표준 타임라인과 다릅니다. 전에". 다음 두 가지 기능으로 이 문제를 해결할 수 있습니다. urlToLink(); 우리가 부르는 tweet.text:
function urlToLink(text) {
var exp = /(b(https?|ftp|file)://[-A-Z0-9+&@#/%?=~_|!:,.;]*[-A-Z0-9+&@#/%=~_|])/ig;
return text.replace(exp,"$1");
}
그리고 relTime(); 우리가 부르는 tweet.created_at:
function relTime(time_value) {
time_value = time_value.replace(/(+[0-9]{4}s)/ig,"");
var parsed_date = Date.parse(time_value);
var relative_to = (arguments.length > 1)? arguments[1]: new Date();
var timeago = parseInt((relative_to.getTime() - parsed_date) / 1000);
if (timeago < 60) return 'less than a minute ago';
else if(timeago < 120) return 'about a minute ago';
else if(timeago < (45*60)) return (parseInt(timeago / 60)).toString() + ' minutes ago';
else if(timeago < (90*60)) return 'about an hour ago';
else if(timeago < (24*60*60)) return 'about ' + (parseInt(timeago / 3600)).toString() + ' hours ago';
else if(timeago < (48*60*60)) return '1 day ago';
else return (parseInt(timeago / 86400)).toString() + ' days ago';
}
따라서 위의 줄을 다음과 같이 변경해야 합니다.
tl.append("
이것은 HTML 페이지가 로드될 때 호출되며(또는 다른 시간에 로드할 수 있습니다. 물론 사용자에게 달려 있습니다.) 이 작업은 jQuery를 사용하여 내부에 코드를 삽입하여 수행됩니다.
$(document).ready(function() {
// code here
});
전체 DOM이 로드되었을 때 기본적으로 코드를 호출합니다.
최종 결과
위의 모든 코드를 사용하여 예제를 작성했으므로 이 모든 것을 함께 보고 직접 작업할 수 있습니다. 또한 코드를 보고 수행 방법을 확인할 수 있습니다. 막힐 경우를 대비하여 모두 주석 처리되어 있습니다.
물론 CSS를 사용하여 목록과 내용의 스타일을 지정할 수도 있지만 독자의 연습 문제로 남겨두겠습니다.
*업데이트*
아래 댓글 중 하나는 특정 계정 목록에서 최신 상태를 검색하는 것에 대해 질문했습니다. PC Pro의 '스태프' Twitter 목록에서 최신 업데이트를 검색하고 표시하는 간단한 예제를 만들었습니다. 물론 소스 코드를 볼 수 있습니다.
주요 차이점은 &.getJSON() 다음과 같아야 합니다.
http://api.twitter.com/1/account-name/lists/list-name/statuses.json? callback=?
어디 account-name 이 경우 계정의 이름입니다. pc_pro, 그리고 list-name 이 경우 목록의 이름입니다. staff.
