본문 바로가기

[Program]/[Html & Javascript]

내 홈페이지에 트위터 위젯을 달자^^

홈페이지에 트위터 위젯을 달아봅시다.^^

트위터에서는 자체적으로 트위터 위젯을 제공해줍니다. ^^

디자인까지 제공하니 따로 디자인할필요도 없고 아주 유용한 서비스를 제공하는것이죠~

 

 



http://www.twitter.com 에 접속하여 로그인후 setting -  profile 메뉴로 들어갑니다.

 

 


(You can also add Twitter to your site here )  버튼을 클릭합니당.

 

 

 

③ My Website 버튼을 클릭합니다.^^

 

 

 




④자신의 글만 소개하는 Profile Widget, 트위터의 글을 검색하는 Search Widget, 즐겨찾기한 글만 보여주는 Faves Widget, 자신이 설정한 리스트 사용자의 글을 보여주는 List Widget 등이 나옵니다. 이중 자신이 쓴글을 블로그에 공개할수 있는 Profile Widget 을 선택합니당

 

 

 


⑤[Preference] 탭에서는 위젯의 기본적인 동작을 지정한다.

 

  1)   Poll for new results?
       글의 내용을 위에서부터 하나씩 밀어내면서 소개하는 효과를 내준다.
  2)   Include scrollbar?
       스크롤 바를 보이게 할 것인지 선택한다.
       만약 옆의 Poll for new results를 켰다면 굳이 선택하지 않아도 된다.
 3)   Timed Interval
       몇 초의 간격을 두고 하나씩 아래로 움직일 것인가를 설정한다.
 4)   Load all tweets
       한 번에 모든 글을 보여준다. 스크롤바 버튼과 같이 사용하면 좋다.
 5)   Number of Tweets
       한 번에 소개하는 글의 개수를 정한다. 자신의 하루 글 작성 수를 넣으면 적당하다.
 6)   Show Avatars?
       글마다 프로필 사진을 앞에 보여줄 것인지 결정한다.
 7)   Show Timestamps?
       시간을 보여준다. 켜두는 것이 좋다.
 8)   Show Hashtags?
       해시태그를 보여준다. 역시 켜두는 것이 좋다.
 9)   Test Settings
       미리보기 기능이다. 위의 사항을 적용시킨 후, 이 버튼을 클릭하면 미리보기 할 수 있다


 

⑥   [Appearance] 탭에서는 위젯의 색깔을 바꿀 수 있다.
       각 컬러 박스를 클릭해서 원하는 색상을 선택한다.
 1)   위젯 상단과 하단의 바탕색 지정
 2)   위젯 상단과 하단의 글자색 지정
 3)   위젯 내부의 바탕색 지정
 4)   위젯 내부의 글자색 지정
 5)   인터넷 링크가 있을 경우의 색깔 지정


 

 


⑦[Dimensions] 탭에서는 위젯의 가로 세로 크기를 정할 수 있다.
 1)   위젯의 가로 길이를 픽셀 단위로 입력한다.
 2)   위젯의 세로 길이를 픽셀 단위로 입력한다.
 3)   크기를 지정하지 않고 정해진 크기를 모두 채우는 가변 크기로 지정하고 싶다면 이 옵션을 선택한다.

 

 


⑧[Finish & Grab Code] 버튼을 클릭하면 박스 안에 소스가 생성된다.
   박스 안의 소스 코드를 복사한다.